/*
Theme Name:   Agora des DRH — Hello Child
Theme URI:    https://lagoradesdrh.eu
Description:  Thème enfant Hello Elementor pour L'Agora des DRH. Conteneurs atteints par marqueurs :has().
Author:       Fabulous iD
Template:     hello-elementor
Version:      7.0.0
Text Domain:  agora-child
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root{
  --agora-navy:    #233B46;
  --agora-fond:    #F4FAF9;
  --agora-blanc:   #FFFFFF;
  --agora-doux:    #5C6870;
  --agora-ligne:   #3A5866;

  --agora-teal:    #41929A;
  --agora-orange:  #E67E2E;
  --agora-vert:    #729D68;
  --agora-jaune:   #E6B449;
  --agora-fuchsia: #CA536C;

  --agora-survol:  #35777E;

  --agora-titre: "Lora", Georgia, serif;
  --agora-texte: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;

  --agora-largeur:   1200px;
  --agora-gouttiere: 120px;
  --agora-section:   100px;
}

body{
  background-color: var(--agora-fond);
  color: var(--agora-navy);
  font-family: var(--agora-texte);
  font-size:17px; line-height:1.45;
}
h1,h2,h3,h4{ font-family: var(--agora-titre); color: var(--agora-navy); line-height:1.25; }

/* ==========================================================================
   2. TYPOGRAPHIE
   Chaque règle vise l'élément nu ET l'élément interne d'Elementor,
   parce qu'Elementor pose les classes sur l'enveloppe du widget.
   ========================================================================== */

.agora-h1, .agora-h1 .elementor-heading-title{
  font: 700 clamp(2rem, 3.5vw, 3.125rem)/1.2 var(--agora-titre);
  color: var(--agora-navy); margin:0;
}
.agora-h2, .agora-h2 .elementor-heading-title{
  font: 700 clamp(1.6rem, 2.4vw, 2.125rem)/1.25 var(--agora-titre);
  color: var(--agora-navy); margin:0;
}
.agora-h2--large, .agora-h2--large .elementor-heading-title{
  font-size: clamp(1.8rem, 2.7vw, 2.375rem);
}
.agora-citation, .agora-citation p{
  font: 400 clamp(1.35rem, 2.1vw, 1.875rem)/1.45 var(--agora-titre);
  color: var(--agora-navy);
}
.agora-surtitre, .agora-surtitre .elementor-heading-title, .agora-surtitre p{
  font: 600 .8125rem/1.45 var(--agora-texte);
  color: var(--agora-teal);
  text-transform:uppercase; letter-spacing:.14em; margin:0;
}
.agora-chapo, .agora-chapo p{ font: 400 1.125rem/1.55 var(--agora-texte); }

/* ==========================================================================
   3. SIGNATURE, FILETS, PASTILLES
   ========================================================================== */

.agora-marque{ display:flex; gap:7px; }
.agora-marque--centre{ justify-content:center; }
.agora-marque span{ width:14px; height:9px; flex:0 0 auto; }
.agora-marque span:nth-child(1){ background:var(--agora-teal); }
.agora-marque span:nth-child(2){ background:var(--agora-orange); }
.agora-marque span:nth-child(3){ background:var(--agora-vert); }
.agora-marque span:nth-child(4){ background:var(--agora-jaune); }
.agora-marque span:nth-child(5){ background:var(--agora-fuchsia); }

.agora-filet{ display:block; width:36px; height:4px; }
.agora-filet--teal{    background:var(--agora-teal); }
.agora-filet--orange{  background:var(--agora-orange); }
.agora-filet--vert{    background:var(--agora-vert); }
.agora-filet--jaune{   background:var(--agora-jaune); }
.agora-filet--fuchsia{ background:var(--agora-fuchsia); }

.agora-icone{ display:block; width:26px; height:26px; border-radius:3px; }
.agora-icone--teal{    background:var(--agora-teal); }
.agora-icone--orange{  background:var(--agora-orange); }
.agora-icone--vert{    background:var(--agora-vert); }
.agora-icone--jaune{   background:var(--agora-jaune); }
.agora-icone--fuchsia{ background:var(--agora-fuchsia); }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.agora-btn .elementor-button, a.agora-btn{
  font: 500 .875rem/1 var(--agora-texte);
  padding:16px 30px; border-radius:2px;
  background-color: var(--agora-teal); color: var(--agora-blanc);
  transition: background-color .18s ease;
}
.agora-btn .elementor-button:hover, a.agora-btn:hover{
  background-color: var(--agora-survol); color: var(--agora-blanc);
}
.agora-btn--ligne .elementor-button, a.agora-btn--ligne{
  background-color: transparent; color: var(--agora-teal);
  box-shadow: inset 0 0 0 1.5px var(--agora-teal);
}
.agora-btn--ligne .elementor-button:hover, a.agora-btn--ligne:hover{
  background-color: var(--agora-teal); color: var(--agora-blanc);
}
.agora-btn--clair .elementor-button, a.agora-btn--clair{
  background-color: var(--agora-blanc); color: var(--agora-teal); font-weight:600;
}
.agora-btn--clair .elementor-button:hover, a.agora-btn--clair:hover{
  background-color: var(--agora-fond); color: var(--agora-survol);
}

/* ==========================================================================
   5. HEADER
   .e-con double la spécificité pour passer devant les règles d'Elementor.
   ========================================================================== */

.e-con.agora-header, .agora-header{
  position:absolute; top:28px; left:0; right:0; z-index:99;
  padding:0 var(--agora-gouttiere);
}
.e-con.agora-header-carte, .agora-header-carte{
  max-width: var(--agora-largeur); margin-inline:auto;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:24px;
  background-color: var(--agora-blanc);
  padding:18px 40px;
  border-radius:16px;
  box-shadow:0 10px 34px rgba(35,59,70,.14);
}
.agora-header-carte .elementor-nav-menu .elementor-item{
  font: 500 .78rem/1.3 var(--agora-texte);
  color: var(--agora-navy);
  padding:8px 10px;
}
.agora-header-carte .elementor-nav-menu .elementor-item:hover,
.agora-header-carte .elementor-nav-menu .elementor-item.elementor-item-active{
  color: var(--agora-teal);
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

.e-con.agora-section, .agora-section{ padding: var(--agora-section) var(--agora-gouttiere); }
.agora-section > .e-con-inner, .agora-section > *{
  max-width: var(--agora-largeur); margin-inline:auto; width:100%;
}
.agora-section--centre{ text-align:center; }
.agora-section--centre .agora-marque{ justify-content:center; }
.e-con.agora-section--claire{ background-color: var(--agora-fond); }
.e-con.agora-section--blanche{ background-color: var(--agora-blanc); }

/* --- Hero --- */
.e-con.agora-hero, .agora-hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:200px var(--agora-gouttiere) 90px;
  background-color: var(--agora-navy);
  background-size:cover; background-position:center;
  color: var(--agora-blanc);
}
.agora-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(35,59,70,.25) 0%, rgba(35,59,70,.68) 100%);
}
.agora-hero > *{ position:relative; z-index:1; max-width:760px; }
.agora-hero .agora-h1, .agora-hero .agora-h1 .elementor-heading-title{ color: var(--agora-blanc); }
.agora-hero .agora-surtitre, .agora-hero .agora-surtitre .elementor-heading-title{
  color: var(--agora-blanc); opacity:.9;
}
.agora-hero .elementor-widget-text-editor{ color: var(--agora-blanc); max-width:700px; }

/* --- Pourquoi --- */
.agora-pourquoi{ text-align:center; }
.agora-pourquoi .agora-marque{ justify-content:center; }
.agora-pourquoi .elementor-widget-text-editor{ max-width:900px; margin-inline:auto; }

/* --- Cartes --- */
.e-con.agora-cartes, .agora-cartes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; width:100%;
}
.e-con.agora-carte, .agora-carte{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  background-color: var(--agora-fond); padding:28px 26px;
  min-height:198px; text-align:left;
}
.agora-carte .elementor-heading-title{ font: 700 1.1875rem/1.3 var(--agora-titre); }
.agora-carte .elementor-widget-text-editor{
  font: 400 .875rem/1.55 var(--agora-texte); color:var(--agora-doux);
}
.e-con.agora-carte--pleine{ background-color: var(--agora-teal); }
.agora-carte--pleine .elementor-heading-title,
.agora-carte--pleine .elementor-widget-text-editor{ color: var(--agora-blanc); }

/* --- Valeurs --- */
.e-con.agora-valeurs, .agora-valeurs{
  background-color: var(--agora-navy);
  padding:96px var(--agora-gouttiere); text-align:center;
}
.agora-valeurs > .e-con-inner{ max-width: var(--agora-largeur); margin-inline:auto; width:100%; }
.agora-valeurs .agora-marque{ justify-content:center; }
.agora-valeurs .agora-h2 .elementor-heading-title{ color: var(--agora-blanc); }
.e-con.agora-valeurs-grille, .agora-valeurs-grille{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:left; width:100%;
}
.e-con.agora-valeur{ align-items:flex-start; gap:12px; }
.agora-valeur .elementor-heading-title{
  font: 600 1.0625rem/1.35 var(--agora-texte); color: var(--agora-blanc);
  text-transform:uppercase; letter-spacing:.08em;
}
.agora-valeur .elementor-widget-text-editor{
  font: 400 .9375rem/1.55 var(--agora-texte); color: var(--agora-blanc);
}

/* --- Ambition --- */
.agora-ambition{ text-align:center; }
.agora-ambition .agora-marque{ justify-content:center; }
.agora-ambition .agora-citation{ max-width:980px; margin-inline:auto; }

/* --- Cercle --- */
.e-con.agora-cercle, .agora-cercle{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  background-color: var(--agora-fond); padding:0;
}
.agora-cercle-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.e-con.agora-cercle-texte, .agora-cercle-texte{
  padding:80px 90px; max-width:620px; align-items:flex-start; gap:18px;
}
.agora-cercle-texte .elementor-widget-text-editor{ font-size:1rem; color:var(--agora-doux); }

/* --- CTA --- */
.e-con.agora-cta, .agora-cta{
  background-color: var(--agora-teal); padding:88px var(--agora-gouttiere);
  text-align:center; align-items:center;
}
.agora-cta .agora-h2 .elementor-heading-title{ color: var(--agora-blanc); }
.agora-cta .elementor-widget-text-editor{ color: var(--agora-blanc); max-width:760px; margin-inline:auto; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.e-con.agora-footer, .agora-footer{
  background-color: var(--agora-navy);
  padding:0 var(--agora-gouttiere);
}
.e-con.agora-footer-inner, .agora-footer-inner{
  max-width: var(--agora-largeur); margin-inline:auto; width:100%;
  padding:56px 0;
}
.e-con.agora-footer-rangee, .agora-footer-rangee{
  display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-start; gap:40px;
}
.e-con.agora-footer-marque{ max-width:300px; align-items:flex-start; gap:14px; }
.agora-footer-marque img{ max-height:46px; width:auto; }
.agora-footer-marque .elementor-widget-text-editor{
  color: var(--agora-blanc); font-size:.875rem;
}
.e-con.agora-footer-colonne{ min-width:200px; align-items:flex-start; gap:14px; }

.agora-footer-titre, .agora-footer-titre .elementor-heading-title{
  font: 600 .8125rem/1.4 var(--agora-texte);
  color: var(--agora-teal);
  text-transform:uppercase; letter-spacing:.1em;
}
.agora-footer-liste .elementor-icon-list-items{ display:block; }
.agora-footer-liste .elementor-icon-list-item{ margin-bottom:9px; }
.agora-footer-liste .elementor-icon-list-icon{ display:none; }
.agora-footer-liste .elementor-icon-list-text,
.agora-footer-liste .elementor-icon-list-item a{
  font: 400 .8125rem/1.4 var(--agora-texte);
  color: var(--agora-blanc); padding-left:0;
}
.agora-footer-liste .elementor-icon-list-item a:hover,
.agora-footer-liste .elementor-icon-list-item a:hover .elementor-icon-list-text{
  color: var(--agora-teal);
}

.agora-footer-filet .elementor-divider{ padding:0; }
.agora-footer-filet .elementor-divider-separator{ border-top-color: var(--agora-ligne); }

.agora-footer-mentions, .agora-footer-mentions p{
  font: 400 .75rem/1.5 var(--agora-texte); color: var(--agora-doux); margin:0;
}

/* ==========================================================================
   8. LISTES À COCHES
   ========================================================================== */

.agora-liste{ list-style:none; padding:0; margin:0; }
.agora-liste li{ position:relative; padding-left:28px; margin-bottom:10px; }
.agora-liste li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color: var(--agora-teal); font-weight:700;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width:1200px){
  :root{ --agora-gouttiere:56px; --agora-section:80px; }
  .e-con.agora-header, .agora-header{ position:relative; top:0; padding-block:16px; }
  .e-con.agora-header-carte, .agora-header-carte{ padding:16px 24px; }
  .e-con.agora-hero, .agora-hero{ min-height:auto; padding-top:90px; }
  .e-con.agora-cercle-texte, .agora-cercle-texte{ padding:56px; }
}

@media (max-width:900px){
  .e-con.agora-cartes, .agora-cartes{ grid-template-columns:repeat(2,1fr); }
  .e-con.agora-valeurs-grille, .agora-valeurs-grille{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .e-con.agora-cercle, .agora-cercle{ grid-template-columns:1fr; }
  .agora-cercle-media img{ height:340px; }
  .e-con.agora-cercle-texte, .agora-cercle-texte{ max-width:none; }
}

@media (max-width:600px){
  :root{ --agora-gouttiere:22px; --agora-section:60px; }
  body{ font-size:16px; }
  .e-con.agora-cartes, .agora-cartes,
  .e-con.agora-valeurs-grille, .agora-valeurs-grille{ grid-template-columns:1fr; }
  .e-con.agora-carte, .agora-carte{ min-height:0; padding:24px 22px; }
  .e-con.agora-cercle-texte, .agora-cercle-texte{ padding:40px 22px; }
  .agora-marque span{ width:12px; height:8px; }
  .e-con.agora-footer-rangee, .agora-footer-rangee{ gap:32px; }
}


/* ==========================================================================
   10. MARQUEURS
   Elementor 7 ignore les classes posées sur les conteneurs, mais les
   applique sur les widgets. Chaque conteneur reçoit donc un widget HTML
   invisible portant une classe, et :has() remonte au parent.
   ========================================================================== */

.agora-mk{ display:none !important; }

/* --- Sections --- */
.e-con:has(> .mk-hero){
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:200px var(--agora-gouttiere) 90px;
  background-color: var(--agora-navy);
  background-size:cover; background-position:center;
}
.e-con:has(> .mk-hero)::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(35,59,70,.25) 0%, rgba(35,59,70,.68) 100%);
}
.e-con:has(> .mk-hero) > *{ position:relative; z-index:1; max-width:760px; }
.e-con:has(> .mk-hero) .elementor-heading-title,
.e-con:has(> .mk-hero) .elementor-widget-text-editor{ color: var(--agora-blanc); }

.e-con:has(> .mk-pourquoi),
.e-con:has(> .mk-ambition){
  padding: var(--agora-section) var(--agora-gouttiere);
  text-align:center; align-items:center;
}
.e-con:has(> .mk-pourquoi){ background-color: var(--agora-fond); }
.e-con:has(> .mk-ambition){ background-color: var(--agora-blanc); }
.e-con:has(> .mk-ambition) .elementor-widget-text-editor{
  font-family: var(--agora-titre); max-width:980px; margin-inline:auto;
}

.e-con:has(> .mk-distingue){
  padding: var(--agora-section) var(--agora-gouttiere);
  background-color: var(--agora-blanc); text-align:center; align-items:center;
}

.e-con:has(> .mk-valeurs){
  padding:96px var(--agora-gouttiere);
  background-color: var(--agora-navy); text-align:center; align-items:center;
}
.e-con:has(> .mk-valeurs) .elementor-heading-title,
.e-con:has(> .mk-valeurs) .elementor-widget-text-editor{ color: var(--agora-blanc); }

.e-con:has(> .mk-cta){
  padding:88px var(--agora-gouttiere);
  background-color: var(--agora-teal); text-align:center; align-items:center;
}
.e-con:has(> .mk-cta) .elementor-heading-title,
.e-con:has(> .mk-cta) .elementor-widget-text-editor{ color: var(--agora-blanc); }
.e-con:has(> .mk-cta) .elementor-button{
  background-color: var(--agora-blanc); color: var(--agora-teal);
}

/* --- Grilles --- */
.e-con:has(> .mk-cartes){
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  width:100%; max-width:var(--agora-largeur); margin-inline:auto;
}
.e-con:has(> .mk-grille){
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  width:100%; max-width:var(--agora-largeur); margin-inline:auto; text-align:left;
}

/* --- Cartes --- */
.e-con:has(> .mk-carte), .e-con:has(> .mk-carte-pleine){
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:28px 26px; width:auto; text-align:left;
}
.e-con:has(> .mk-carte){ background-color: var(--agora-fond); }
.e-con:has(> .mk-carte-pleine){ background-color: var(--agora-teal); }
.e-con:has(> .mk-carte-pleine) .elementor-heading-title,
.e-con:has(> .mk-carte-pleine) .elementor-widget-text-editor{ color: var(--agora-blanc); }
.e-con:has(> .mk-carte) .elementor-widget-text-editor,
.e-con:has(> .mk-valeur) .elementor-widget-text-editor{ font-size:.875rem; }

.e-con:has(> .mk-valeur){ align-items:flex-start; gap:12px; text-align:left; }
.e-con:has(> .mk-valeur) .elementor-heading-title,
.e-con:has(> .mk-valeur) .elementor-widget-text-editor{ color: var(--agora-blanc); }

/* --- Cercle --- */
.e-con:has(> .mk-cercle){
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  background-color: var(--agora-fond); padding:0;
}
.e-con:has(> .mk-cercle-media) img{ width:100%; height:100%; object-fit:cover; display:block; }
.e-con:has(> .mk-cercle-texte){ padding:80px 90px; align-items:flex-start; gap:18px; }

/* --- Responsive --- */
@media (max-width:1200px){
  .e-con:has(> .mk-hero){ min-height:auto; padding-top:110px; }
  .e-con:has(> .mk-cercle-texte){ padding:56px; }
}
@media (max-width:900px){
  .e-con:has(> .mk-cartes){ grid-template-columns:repeat(2,1fr); }
  .e-con:has(> .mk-grille){ grid-template-columns:repeat(2,1fr); }
  .e-con:has(> .mk-cercle){ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .e-con:has(> .mk-cartes),
  .e-con:has(> .mk-grille){ grid-template-columns:1fr; }
  .e-con:has(> .mk-cercle-texte){ padding:40px 22px; }
}