.elementor-48728 .elementor-element.elementor-element-fdabf07{--display:flex;}/* Start of your page custom CSS rules */ :root{
      /* Brand */
      --ph-brand-nude:#E9DED6;
      --ph-brand-beigeRose:#D6C2B6;
      --ph-brand-taupe:#8C7B72;
      --ph-brand-brown:#4A3F3A;
      --ph-brand-gold:#C8A97E;
      --ph-white:#FFFFFF;

      /* Text */
      --ph-text-primary:#4A3F3A;
      --ph-text-secondary:#8C7B72;
      --ph-text-muted:rgba(74,63,58,0.68);

      /* UI */
      --ph-bg-page:#FFFFFF;
      --ph-bg-section:#E9DED6;
      --ph-bg-surface:#FFFFFF;
      --ph-bg-surfaceAlt:#F6F0EC;

      --ph-border:rgba(74,63,58,0.14);
      --ph-border-strong:rgba(74,63,58,0.28);

      --ph-radius-lg:16px;
      --ph-radius-pill:999px;

      --ph-shadow-md:0 10px 30px rgba(0,0,0,0.05);

      --ph-font-heading:Playfair Display, Cormorant Garamond, serif;
      --ph-font-body:Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .ph-article{
      font-family:var(--ph-font-body);
      color:var(--ph-text-primary);
      background:var(--ph-bg-page);
      max-width: 980px;
      margin: 0 auto;
      padding: 24px 16px;
    }

    .ph-hero{
      background: linear-gradient(180deg, var(--ph-bg-surfaceAlt), var(--ph-bg-page));
      border: 1px solid var(--ph-border);
      border-radius: var(--ph-radius-lg);
      box-shadow: var(--ph-shadow-md);
      padding: 22px;
      margin-bottom: 16px;
    }

    .ph-hero h1{
      font-family: var(--ph-font-heading);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin: 0 0 10px 0;
      font-size: 32px;
    }

    .ph-hero p{
      margin: 0;
      color: var(--ph-text-secondary);
      line-height: 1.55;
      font-size: 16px;
    }

    .ph-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 12px;
      border-radius: var(--ph-radius-pill);
      background: rgba(200,169,126,0.14);
      border: 1px solid rgba(200,169,126,0.35);
      color: var(--ph-text-primary);
      font-size: 13px;
      margin-bottom: 10px;
    }

    .ph-sommaire{
      background: var(--ph-bg-surface);
      border: 1px solid var(--ph-border);
      border-radius: var(--ph-radius-lg);
      padding: 18px 18px 10px 18px;
      margin: 0 0 18px 0;
    }

    .ph-sommaire .title{
      font-family: var(--ph-font-heading);
      margin: 0 0 8px 0;
      font-size: 18px;
    }

    .ph-sommaire ol{
      margin: 0 0 0 18px;
      padding: 0;
      line-height: 1.75;
    }

    .ph-sommaire a{
      color: var(--ph-text-primary);
      text-decoration: none;
      border-bottom: 1px dashed rgba(74,63,58,0.35);
    }
    .ph-sommaire a:hover{
      border-bottom-color: var(--ph-brand-gold);
    }

    /* 4 BLOCS */
    .ph-block{
      background: var(--ph-bg-surface);
      border: 1px solid var(--ph-border);
      border-radius: var(--ph-radius-lg);
      box-shadow: var(--ph-shadow-md);
      padding: 22px;
      margin: 0 0 16px 0;
    }

    .ph-block h2{
      font-family: var(--ph-font-heading);
      margin: 0 0 10px 0;
      font-size: 22px;
      line-height: 1.3;
      letter-spacing: -0.02em;
    }

    .ph-block p{
      margin: 0 0 10px 0;
      line-height: 1.75;
      color: var(--ph-text-primary);
    }

    .ph-block ul{
      margin: 10px 0 0 18px;
      line-height: 1.75;
      color: var(--ph-text-primary);
    }

    .ph-callout{
      margin-top: 12px;
      background: rgba(200,169,126,0.12);
      border: 1px solid rgba(74,63,58,0.14);
      border-left: 4px solid var(--ph-brand-gold);
      border-radius: 12px;
      padding: 14px;
      color: var(--ph-text-primary);
      line-height: 1.75;
    }

    .ph-cta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      margin-top: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--ph-border);
    }

    .ph-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:46px;
      padding: 0 18px;
      border-radius: var(--ph-radius-pill);
      border: 1px solid var(--ph-border-strong);
      text-decoration:none;
      font-weight: 600;
      color: var(--ph-white);
      background: var(--ph-brand-brown);
    }
    .ph-btn:hover{ background: var(--ph-brand-gold); }

    .ph-btn--ghost{
      background: transparent;
      color: var(--ph-text-primary);
    }
    .ph-btn--ghost:hover{
      background: rgba(200,169,126,0.12);
    }
    /* Shadow un peu plus premium */
:root{
  --ph-shadow-lg: 0 18px 50px rgba(0,0,0,0.08);
}

/* Header + Sommaire côte à côte */
.ph-top{
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* gauche plus large */
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}

/* Mobile = l’un sous l’autre */
@media (max-width: 820px){
  .ph-top{ grid-template-columns: 1fr; }
}

/* Box shadow bien visible sur les 2 */
.ph-hero{
  box-shadow: var(--ph-shadow-lg);
}

.ph-sommaire{
  box-shadow: var(--ph-shadow-lg);
  height: 100%;
}

/* Optionnel : rendre le sommaire “sticky” sur desktop */
@media (min-width: 821px){
  .ph-sommaire{
    position: sticky;
    top: 14px;
    align-self: start;
  }
}

/* ✅ Sections en 2 colonnes (texte / image) */
.ph-split{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 820px){
  .ph-split{ grid-template-columns: 1fr; }
}

/* Col image */
.ph-media{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ph-border);
  background: var(--ph-bg-surfaceAlt);
  box-shadow: var(--ph-shadow-md);
}

.ph-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Optionnel : légende discrète */
.ph-caption{
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ph-text-secondary);
  border-top: 1px solid var(--ph-border);
  background: rgba(255,255,255,0.6);
}

/* ✅ 2 BOXES (Texte / Image) */
.ph-twoBox{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:16px;
  align-items:stretch;
  margin: 0 0 16px 0;
}

@media (max-width: 820px){
  .ph-twoBox{ grid-template-columns: 1fr; }
}

.ph-box{
  background: var(--ph-bg-surface);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius-lg);
  box-shadow: var(--ph-shadow-md);
  padding: 22px;
}

.ph-box h2{
  font-family: var(--ph-font-heading);
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.ph-box p{ margin: 0 0 10px 0; line-height: 1.75; }

.ph-box ul{ margin: 10px 0 0 18px; line-height: 1.75; }

.ph-box--media{
  padding: 0;
  overflow: hidden;
}

.ph-box--media img{
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

/* ✅ Inversion Section 2 (desktop), mais texte en premier sur mobile */
.ph-twoBox--reverse .ph-box--media{ order: 1; }
.ph-twoBox--reverse .ph-box--text{ order: 2; }

@media (max-width: 820px){
  .ph-twoBox--reverse .ph-box--text{ order: 1; }
  .ph-twoBox--reverse .ph-box--media{ order: 2; }
}
/* 1) Centre verticalement les 2 boxes (texte aligné au milieu de l’image) */
.ph-twoBox{
  align-items: center; /* au lieu de stretch */
}

/* 2) Taille image standard (si tu veux garder comme avant) */
.ph-box--media img{
  object-position: center;
}

/* 3) Section 2 : image réduite + centrée */
.ph-twoBox--imgSmall .ph-box--media{
  max-width: 380px;      /* réduit la largeur de la box image */
  justify-self: center;  /* centre dans la colonne */
  height: 280px;         /* réduit la hauteur */
}

.ph-twoBox--imgSmall .ph-box--media img{
  height: 100%;
  min-height: 0;         /* annule le min-height global */
  object-fit: cover;
}

/* Mobile : reprendre full width */
@media (max-width: 820px){
  .ph-twoBox--imgSmall .ph-box--media{
    max-width: 100%;
    height: 240px;
  }
}

/* Section 2 : image réduite mais + grande (centrée) */
.ph-twoBox--imgSmall .ph-box--media{
  max-width: 460px;     /* ⬅️ plus large */
  justify-self: center; /* centre dans la colonne */
  height: 650px;        /* ⬅️ plus haut */
}

.ph-twoBox--imgSmall .ph-box--media img{
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/* Mobile : reprendre full width */
@media (max-width: 820px){
  .ph-twoBox--imgSmall .ph-box--media{
    max-width: 100%;
    height: 600px;      /* ⬅️ un peu plus grand aussi */
  }
  
      .ph-conclusion{
      background: var(--ph-bg-surface);
      border: 1px solid var(--ph-border);
      border-radius: var(--ph-radius-lg);
      box-shadow: var(--ph-shadow-md);
      padding: 26px;
      text-align: center;
      margin-top: 18px;
    } /* End of your page custom CSS rules */