/* TETRIA - Notre organisation (page 930) — scoped styles, no regression */
:root{
  --tetria-blue:#001489;
  --tetria-light:#D7D1D1; /* [CYB05] ajusté (gris cartes) */
  --tetria-sep:#d8dde6;
}

/* Container */
.tetria-org{ padding: 40px 0 10px; }
.tetria-org-container{ max-width: 1200px; margin: 0 auto; padding: 0 18px; }

/* Bloc 2 — Piliers */
.tetria-org-pillars{ background: #fff; padding: 50px 0 20px; }
.tetria-org-pillars-grid{ display:flex; gap:0; align-items:stretch; justify-content:space-between; }
.tetria-org-pillar{ flex:1; text-align:center; padding: 10px 26px 20px; }
.tetria-org-pillar + .tetria-org-pillar{ border-left: 1px solid var(--tetria-sep); }
.tetria-org-icon{ width: 60px; height: 60px; object-fit: contain; margin: 0 auto 10px; display:block; }
.tetria-org-pillar h3{ color: var(--tetria-blue); font-size: 22px; margin: 0 0 8px; }
.tetria-org-pillar p{ margin: 0; color: #333; line-height: 1.55; font-size: 14px; }

/* Bloc 3 — Méthode */
.tetria-org-method{ padding: 40px 0; background:#fff; }
.tetria-org-method-card{ background: var(--tetria-light); border-radius: 2px; padding: 22px; display:flex; gap: 28px; align-items:center; }
.tetria-org-method-media{ flex: 0 0 52%; }
.tetria-org-video{ width:100%; height:280px; object-fit:cover; border-radius: 2px; display:block; background:#000; }
.tetria-org-iframe{ position:relative; padding-top:56.25%; background:#000; border-radius:2px; overflow:hidden; }
.tetria-org-iframe iframe{ position:absolute; inset:0; width:100%; height:100%; }
.tetria-org-video-placeholder{ width:100%; height: 280px; display:flex; align-items:center; justify-content:center; background:#ddd; color:#666; border-radius:2px; }
.tetria-org-method-text{ flex: 1; }
.tetria-org-method-text h3{ color: var(--tetria-blue); font-size: 26px; margin: 0 0 10px; }
.tetria-org-method-desc p{ margin: 0 0 10px; color:#333; line-height:1.65; font-size:14px; }
.tetria-org-btn{ display:inline-block; margin-top: 10px; background: var(--tetria-accent); color:#fff; padding: 10px 22px; border-radius: 4px; text-decoration:none; font-weight: 600; font-size: 13px; }
.tetria-org-btn:hover{ opacity: .92; color:#fff; }

/* Bloc 4 — Process */
.tetria-org-process{ padding: 10px 0 40px; background:#fff; }
.tetria-org-process-box{ max-width: 1050px; margin: 0 auto; background: var(--tetria-blue); border-radius: 28px; padding: 24px 22px; }
.tetria-org-process-grid{ display:flex; gap: 18px; }
.tetria-org-step{ flex:1; text-align:center; color:#fff; }
.tetria-org-step-icon{ width: 60px; height:60px; border-radius: 999px; background:#fff; margin: 0 auto 10px; display:flex; align-items:center; justify-content:center; }
.tetria-org-step-icon img{ width: 28px; height: 28px; object-fit: contain; }
.tetria-org-step h4{ margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.tetria-org-step p{ margin: 0; font-size: 12px; line-height: 1.5; opacity: .95; }
.tetria-org-step + .tetria-org-step{ border-left: 1px solid rgba(255,255,255,.25); padding-left: 12px; }

/* Bloc 5 — CTA */
.tetria-org-cta{ padding: 40px 0 70px; background:#fff; }
.tetria-org-cta-card{ background: var(--tetria-light); padding: 28px 20px; text-align:center; }
.tetria-org-cta-card h3{ color: var(--tetria-blue); font-size: var(--tetria-title-fs, 24px) !important; margin:0 0 8px; }
.tetria-org-cta-card p{ margin:0 0 14px; color:#333; }

/* Responsive */
@media (max-width: 900px){
  .tetria-org-pillars-grid{ flex-direction:column; }
  .tetria-org-pillar + .tetria-org-pillar{ border-left:0; border-top:1px solid var(--tetria-sep); }
  .tetria-org-method-card{ flex-direction:column; }
  .tetria-org-method-media{ flex-basis:auto; width:100%; }
  .tetria-org-process-grid{ flex-direction:column; }
  .tetria-org-step + .tetria-org-step{ border-left:0; border-top: 1px solid rgba(255,255,255,.25); padding-left:0; padding-top: 14px; }
}


/* === CYB14 — Ajustements charte gris + vidéo + sécurité FO (page 930) ===
   Fond cartes grises: #F0F0F0
   Bordures/séparateurs: rgba(0,0,0,0.12)
*/
body.page-id-930,
body.page-id-930 #page,
body.page-id-930 #main,
body.page-id-930 #content{ background:#ffffff !important; }

body.page-id-930 .tetria-org-method-card,
body.page-id-930 .tetria-org-cta-card{
  background:#F0F0F0 !important;
  border-color: rgba(0,0,0,0.12) !important;
}

body.page-id-930 .tetria-org-pillars-grid .tetria-org-pillar + .tetria-org-pillar{
  border-left-color: rgba(0,0,0,0.12) !important;
}

/* Vidéo: remplir le masque + coins arrondis */
body.page-id-930 .tetria-org-method-media,
body.page-id-930 .tetria-org-video{
  border-radius: 10px !important;
  overflow: hidden !important;
}
body.page-id-930 .tetria-org-method-media video,
body.page-id-930 .tetria-org-video video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}


/* ==== CYB24 (2026-02-06) — Bloc 3 (Process) RESTORE: TITRES BLANCS + SÉPARATEURS OFF (régression) ====
   Objectif unique:
   - Remettre les titres du bloc 3 en blanc et supprimer les séparateurs verticaux.
   Périmètre:
   - CSS scoppé Process uniquement. Aucun changement BO/HTML. Aucune action sur les icônes.
*/

/* Titres bloc 3 en blanc */
.tetria-org-process h4,
.tetria-org-process .tetria-title-1,
.tetria-org-process .tetria-title-2,
.tetria-org-process-box h4,
.tetria-org-process-box .tetria-title-1,
.tetria-org-process-box .tetria-title-2{
  color: #ffffff !important;
}

/* Séparateurs verticaux OFF */
.tetria-org-process .tetria-org-step,
.tetria-org-process-box .tetria-org-step{
  border-left: none !important;
}
.tetria-org-process .tetria-org-step:before,
.tetria-org-process .tetria-org-step:after,
.tetria-org-process-box .tetria-org-step:before,
.tetria-org-process-box .tetria-org-step:after{
  content: none !important;
  display: none !important;
}


/* ==== CYB25 (2026-02-06) — Bloc 3 (Process) : icônes remplissent le conteneur, cercle blanc invisible ==== 
   Objectif unique:
   - Sur le bloc 3 (Process), l'icône doit remplir la zone 56x56 et le fond blanc circulaire ne doit pas être visible.
   Périmètre:
   - CSS scoppé Process uniquement. Aucun changement BO/HTML.
*/
.tetria-org-process .tetria-org-step-icon{
  background: transparent !important;
}

.tetria-org-process .tetria-org-step-icon img{
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==== PATCH 05E7 (2026-02-19) — Notre organisation (FO) : mise en forme Process (icônes + hover + trait) ====
   Objectif unique:
   - Icônes Process : cercle bordure accent, 70x70, hover inversion (accent <-> blanc)
   - Trait horizontal médian (accent)
   Périmètre:
   - Scopé sur le bloc Process Tétria uniquement. Aucun impact BO/DB/HTML.
*/

.tetria-org-process .tetria-org-process-grid{
  position: relative;
}

.tetria-org-process .tetria-org-process-grid::before{
  content: "";
  position: absolute;
  /* ligne centrée: du centre de la 1ère icône au centre de la dernière */
  left: 12.5%;
  right: 12.5%;
  top: 35px;
  height: 2px;
  background: var(--tetria-accent);
  z-index: 0;
}

.tetria-org-process .tetria-org-step{
  position: relative;
  z-index: 1;
}

.tetria-org-process .tetria-org-step-icon{
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  border-radius: 50% !important;
  border: 2px solid var(--tetria-accent) !important;
  background: var(--tetria-white, #fff) !important;
  color: var(--tetria-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
  box-sizing: border-box !important;
  transition: background-color .15s ease, color .15s ease;
}

.tetria-org-process .tetria-org-step-icon :is(i,svg,img){
  display: block !important;
}

/* Flaticon font icon */
.tetria-org-process .tetria-org-step-icon i{
  font-size: 38px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Image icon (legacy) */
.tetria-org-process .tetria-org-step-icon img{
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: contain !important;
}

/* Hover inversion */
.tetria-org-process .tetria-org-step:hover .tetria-org-step-icon{
  background: var(--tetria-accent) !important;
  color: var(--tetria-white, #fff) !important;
}


/* Active step (BO: "Activée ?") */
.tetria-org-process .tetria-org-step.is-active .tetria-org-step-icon{
  background: var(--tetria-accent) !important;
  color: var(--tetria-white, #fff) !important;
}

/*
  Règle demandée:
  - par défaut: la 1ère (active) est en mode inversé
  - au survol d'une autre icône: l'active repasse en mode "normal"
  - quand on quitte le survol: retour au mode inversé
  Implémentation CSS (sans JS):
  - si on survole la grille, on neutralise le style actif
  - si on survole l'étape active elle-même, on garde le style actif
*/
.tetria-org-process .tetria-org-process-grid:hover .tetria-org-step.is-active .tetria-org-step-icon{
  background: var(--tetria-white, #fff) !important;
  color: var(--tetria-accent) !important;
}
.tetria-org-process .tetria-org-process-grid:hover .tetria-org-step.is-active:hover .tetria-org-step-icon{
  background: var(--tetria-accent) !important;
  color: var(--tetria-white, #fff) !important;
}

/* Mobile: pas de trait horizontal (layout en colonne) */
@media (max-width: 900px){
  .tetria-org-process .tetria-org-process-grid::before{
    content: none !important;
    display: none !important;
  }
}


/* ==== CYB32 (2026-02-06) — Bloc 1 (Piliers) : resserrer via container padding L/R 180 ====
   Objectif unique:
   - Figer le resserrage du Bloc 1 via padding du container: 180px gauche/droite.
   Périmètre:
   - CSS scoppé Bloc 1 uniquement (.tetria-org-pillars .tetria-org-container).
*/
.tetria-org-pillars .tetria-org-container{
  padding-left: 180px !important;
  padding-right: 180px !important;
}



/* === TETRIA FINALISATION — Bind Options générales (NOTRE ORGANISATION) ===
   Objectif: distinguer Titres vs Sous-titres (polices/couleurs) + respecter hover texte boutons.
   - Titres: h3 des sections (ex: "Notre méthode de travail"), titres CTA
   - Sous-titres: libellés sous icônes (piliers) + étapes process
   - Contenus: paragraphes non-WYSIWYG
   - Inversion: dans les containers fond bleu, basculer automatiquement sur les couleurs inversées
*/

/* Base variables (fallbacks) */
/* Titres (police/couleur) */
.tetria-org .tetria-org-method-text h2,
.tetria-org .tetria-org-method-text h3,
.tetria-org .tetria-org-cta-card h2,
.tetria-org .tetria-org-cta-card h3{
  font-family: var(--tetria-title-ff, inherit), sans-serif !important;
  color: var(--tetria-title-color, var(--tetria-blue)) !important;
}

/* Sous-titres (police/couleur) */
.tetria-org .tetria-org-pillar h3,
.tetria-org .tetria-org-step h4{
  font-family: var(--tetria-subtitle-ff, inherit), sans-serif !important;
  color: var(--tetria-subtitle-color, var(--tetria-blue)) !important;
}

/* Sous-titres — override la règle globale .tetria-page-scope.tetria-titlefont-* h3/h4 (tetria-pages-front.css) */
.tetria-page-scope[class*="tetria-titlefont-"] .tetria-org .tetria-org-pillar h3,
.tetria-page-scope[class*="tetria-titlefont-"] .tetria-org .tetria-org-step h4{
  font-family: var(--tetria-subtitle-ff, inherit), sans-serif !important;
}


/* Contenus hors WYSIWYG */
.tetria-org .tetria-org-pillar p,
.tetria-org .tetria-org-method-desc p,
.tetria-org .tetria-org-cta-card p{
  font-family: var(--tetria-content-ff, inherit), sans-serif !important;
  color: var(--tetria-content-color, #333) !important;
}

/* Inversion automatique (fond bleu) */
.tetria-org-process-box{
  --tetria-title-color: var(--tetria-title-color-inv, #fff);
  --tetria-subtitle-color: var(--tetria-subtitle-color-inv, #fff);
  --tetria-content-color: var(--tetria-content-color-inv, rgba(255,255,255,.92));
}
.tetria-org .tetria-org-step p{
  font-family: var(--tetria-content-ff, inherit), sans-serif !important;
  color: var(--tetria-content-color, rgba(255,255,255,.92)) !important;
}

/* Boutons (respect hover texte) */
.tetria-org .tetria-org-btn{
  background: var(--tetria-btn-bg, var(--tetria-accent));
  color: var(--tetria-btn-text, #fff) !important;
  border-radius: var(--tetria-btn-radius, 4px);
  width: var(--tetria-btn-w, 220px);
  height: var(--tetria-btn-h, 42px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  font-family: var(--tetria-btn-ff, inherit), sans-serif !important;
}
.tetria-org .tetria-org-btn:hover,
.tetria-org .tetria-org-btn:focus{
  opacity: 1;
  background: var(--tetria-btn-hover-bg, var(--tetria-accent));
  color: var(--tetria-btn-hover-text, #fff) !important;
}


/* --- Options générales (BO) : typographies/couleurs (titres & sous-titres) --- */
/* Scope limité à la page "Notre organisation" pour éviter les effets de bord */
.tetria-page-scope--notre-organisation :is(h1,h2,h3){
  font-family: var(--tetria-title-ff, inherit), sans-serif;
  color: var(--tetria-title-color, inherit);
}
.tetria-page-scope--notre-organisation :is(h4,h5,.tetria-org-subtitle){
  font-family: var(--tetria-subtitle-ff, inherit), sans-serif;
  color: var(--tetria-subtitle-color, inherit);
}
.tetria-page-scope--notre-organisation{
  font-family: var(--tetria-content-ff, inherit), sans-serif;
  color: var(--tetria-content-color, inherit);
}

/* ==== HOTFIX (2026-02-16) — Mobile : annuler le padding 180px du Bloc 1 (Piliers) ==== */
@media (max-width: 900px){
  .tetria-org-pillars .tetria-org-container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* === FINALISATION 04F : Force button font from Options générales (Moonbeam etc.) === */
.tetria-page-scope--notre-organisation :is(a.btn, button, input[type="submit"], .tetria-btn, .tetria-org-btn){
  font-family: var(--tetria-btn-ff, inherit), sans-serif !important;
}

/* --- PATCH 05D3I: FIX self-reference vars + rattachement strict (Notre organisation) --- */
/* TITRES */
.tetria-org .tetria-org-method-content > h3.tetria-title-1{
  font-family: var(--tetria-title-ff, inherit), sans-serif !important;
  font-size: var(--tetria-title-fs, 24px) !important;
  color: var(--tetria-title-color, var(--tetria-blue, #001489)) !important;
}
.tetria-org .tetria-org-process-box > h4{
  font-family: var(--tetria-title-ff, inherit), sans-serif !important;
  font-size: var(--tetria-title-fs, 24px) !important;
  color: var(--tetria-title-color, var(--tetria-blue, #001489)) !important;
}

/* SOUS-TITRES */
.tetria-org .tetria-org-pillar h3{
  font-family: var(--tetria-subtitle-ff, inherit), sans-serif !important;
  font-size: var(--tetria-subtitle-fs, 18px) !important;
  color: var(--tetria-subtitle-color, var(--tetria-blue, #001489)) !important;
}
.tetria-org .tetria-org-step h4{
  font-family: var(--tetria-subtitle-ff, inherit), sans-serif !important;
  font-size: var(--tetria-subtitle-fs, 18px) !important;
  color: var(--tetria-subtitle-color-inv, #fff) !important;
}

/* CONTENU hors WYSIWYG */
.tetria-org :is(.tetria-org-method-text,.tetria-org-pillar p,.tetria-org-step p,.tetria-org-cta p){
  font-family: var(--tetria-content-ff, inherit), sans-serif !important;
  font-size: var(--tetria-content-fs, 16px) !important;
  color: var(--tetria-content-color, rgba(0,0,0,.65)) !important;
}

/* Boutons (page) */
.tetria-org :is(.tetria-org-btn,.tetria-btn,a.btn,button.btn,input.btn){
  font-family: var(--tetria-btn-ff, inherit), sans-serif !important;
  font-size: var(--tetria-btn-fs, 16px) !important;
}

/* === 05EE — PROD HOTFIX (Process icons: size + single circle) === */
.tetria-org-process .p-icon,
.tetria-org-process .process-icon{
  width:70px !important;
  height:70px !important;
  min-width:70px !important;
  min-height:70px !important;
  border:2px solid var(--tetria-accent) !important;
  border-radius:50% !important;
  background: var(--tetria-white, #ffffff) !important;
  box-shadow:none !important;
  outline:0 !important;
}
.tetria-org-process .p-icon i,
.tetria-org-process .process-icon i{
  font-size:32px !important;
  line-height:1 !important;
  color: var(--tetria-accent) !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.tetria-org-process .process-step:hover .p-icon,
.tetria-org-process .process-step:hover .process-icon{
  background: var(--tetria-accent) !important;
}
.tetria-org-process .process-step:hover .p-icon i,
.tetria-org-process .process-step:hover .process-icon i{
  color: var(--tetria-white, #ffffff) !important;
}