/* ============================================================
   Association Chams Tensift — V4 targeted pixel-polish
   Corrections only: hero viewport, whitespace, media grid,
   global alignment and responsive stability.
   Existing card/button visual design is intentionally preserved.
   ============================================================ */

:root{
  --pp-max:1280px;
  --pp-gutter:clamp(20px,4.5vw,64px);
  --pp-section-y:clamp(76px,6.5vw,96px);
  --pp-header-h:92px;
  --pp-trust-h:116px;
}

html{scroll-padding-top:calc(var(--pp-header-h) + 18px)}
body{overflow-x:clip}

/* Correction Header / animated logo */
body.media-enhanced .site-header{
  min-height:var(--pp-header-h);
  height:var(--pp-header-h);
  padding:8px max(18px,calc((100vw - 1380px)/2));
  border-radius:0 0 24px 24px;
}
body.media-enhanced .brand{
  width:300px;
  max-width:26vw;
  height:64px;
  padding:5px 10px;
  overflow:hidden;
}
body.media-enhanced .brand-video{width:100%;height:100%;object-fit:contain}
body.media-enhanced .desktop-nav a{padding-block:29px 25px}
body.media-enhanced .desktop-nav a::after{bottom:18px}
body.media-enhanced .contact-button{min-height:48px}

/* The obsolete bottom mobile navigation was duplicated by the modern menu. */
main#accueil > .mobile-nav{display:none!important}

/* Correction Hero Height — header + hero + statistics = first viewport. */
.page-intro-shell{
  min-height:calc(100svh - var(--pp-header-h));
  display:flex;
  flex-direction:column;
}
.page-intro-shell > .premium-hero{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}
.page-intro-shell .premium-hero-inner{
  flex:1 1 auto;
  min-height:0;
  width:min(var(--pp-max),calc(100% - (var(--pp-gutter) * 2)));
  padding:22px 0 24px;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:clamp(34px,4vw,64px);
  align-items:center;
}
.page-intro-shell .premium-hero-copy{
  max-width:620px;
  padding:0;
  align-self:center;
}
.page-intro-shell .premium-kicker{margin-bottom:16px}
.page-intro-shell .premium-hero h1{font-size:clamp(48px,4.35vw,68px);line-height:1.01}
.page-intro-shell .premium-lead{margin-top:20px;font-size:clamp(16px,1.18vw,18px);line-height:1.62}
.page-intro-shell .premium-pillars{margin-top:20px;gap:8px}
.page-intro-shell .premium-pillar-icon{width:48px;height:48px}
.page-intro-shell .premium-hero-actions{margin-top:20px}
.page-intro-shell .premium-btn{min-height:48px}
.page-intro-shell .premium-hero-visual{
  min-height:0;
  height:min(62vh,600px);
  max-height:600px;
  align-self:center;
}
.page-intro-shell .premium-photo-shell{inset:0!important;border-radius:30px;clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,4% 68%,1% 44%)}
.page-intro-shell .premium-photo-shell img{object-fit:contain;object-position:center}
.page-intro-shell .premium-quote{bottom:18px;right:18px;width:min(520px,74%);padding:14px 18px 16px;font-size:clamp(17px,1.35vw,22px)}

.page-intro-shell > .trust-strip{
  flex:0 0 auto;
  width:100%;
  min-height:var(--pp-trust-h);
  margin:0;
  padding:0 max(var(--pp-gutter),calc((100vw - var(--pp-max))/2));
  border-radius:0;
}
.page-intro-shell .trust-item{min-height:var(--pp-trust-h);padding:20px 24px}
.page-intro-shell .trust-item h2{font-size:18px}
.page-intro-shell .trust-item p{font-size:12px}

/* Correction Vertical Spacing — remove structural gaps, not symptoms. */
main#accueil > .section,
main#accueil > .about-section,
main#accueil > .values-section,
main#accueil > .gallery-section,
main#accueil > .partners-section,
main#accueil > .act-section,
main#accueil > .contact-section,
main#accueil > .media-hub-section{
  margin-block:0;
}
main#accueil > .section{padding-block:var(--pp-section-y)}
main#accueil > .about-section{
  width:min(var(--pp-max),calc(100% - (var(--pp-gutter) * 2)));
  margin-inline:auto;
  margin-bottom:0;
  padding-block:clamp(72px,6vw,92px);
}
main#accueil > .programs-section{padding-block:clamp(78px,6vw,94px)}
main#accueil > .timeline-section{padding-block:clamp(74px,5.5vw,88px)}
main#accueil > .values-section{
  padding:clamp(72px,5.5vw,84px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2));
}
main#accueil > .news-section{padding-block:clamp(76px,6vw,92px)}
main#accueil > .media-hub-section{padding:clamp(76px,6vw,92px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2))}
main#accueil > .gallery-section{padding:clamp(80px,6vw,96px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2))}
main#accueil > .partners-section{padding:clamp(72px,5.5vw,88px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2))}
main#accueil > .act-section{padding:clamp(78px,6vw,94px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2))}
main#accueil > .contact-section{padding:clamp(78px,6vw,94px) max(var(--pp-gutter),calc((100vw - var(--pp-max))/2))}

/* The unified Media Hub replaces the duplicated legacy blog on the homepage. */
main#accueil > #blog{display:none}

/* Correction Section Alignment */
main#accueil > .paths-section,
main#accueil > .timeline-section,
main#accueil > .news-section{
  width:min(var(--pp-max),calc(100% - (var(--pp-gutter) * 2)));
  margin-inline:auto;
}
.media-hub-shell,.gallery-heading,.gallery-toolbar,.gallery-grid{max-width:var(--pp-max);margin-inline:auto}

/* Correction Blog Grid — exactly 3 recent articles on desktop. */
[data-media-panel="articles"] .media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
[data-media-panel="videos"] .media-grid,
[data-media-panel="books"] .media-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.media-card{height:100%}
.media-card-body{display:flex;flex-direction:column}
.media-card-actions{margin-top:auto}

/* Keep titles readable in all languages and prevent media overlap. */
.premium-hero-copy,.media-hub-head,.media-card-body{position:relative;z-index:6}
html[dir="rtl"] .premium-hero-copy{text-align:right;direction:rtl}
html[dir="rtl"] .premium-hero h1{font-family:Tahoma,Arial,sans-serif;letter-spacing:0;line-height:1.27}
html[dir="rtl"] .premium-lead{line-height:1.85}

@media (max-width:1180px){
  :root{--pp-header-h:82px;--pp-section-y:72px}
  body.media-enhanced .site-header{height:var(--pp-header-h);min-height:var(--pp-header-h);padding:7px 16px}
  body.media-enhanced .brand{width:min(240px,48vw);max-width:none;height:58px}
  .page-intro-shell{min-height:auto}
  .page-intro-shell > .premium-hero{display:block;min-height:auto}
  .page-intro-shell .premium-hero-inner{
    min-height:auto;
    width:min(920px,calc(100% - 40px));
    padding:44px 0 48px;
    grid-template-columns:1fr;
    gap:28px;
  }
  .page-intro-shell .premium-hero-copy{max-width:790px}
  .page-intro-shell .premium-hero h1{font-size:clamp(46px,7vw,66px)}
  .page-intro-shell .premium-hero-visual{width:100%;height:auto;max-height:none;aspect-ratio:16/9}
  .page-intro-shell .premium-photo-shell{clip-path:none;border-radius:26px}
  .page-intro-shell > .trust-strip{min-height:auto}
  .page-intro-shell .trust-item{min-height:96px}
  [data-media-panel="articles"] .media-grid,
  [data-media-panel="videos"] .media-grid,
  [data-media-panel="books"] .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  :root{--pp-header-h:72px;--pp-gutter:20px;--pp-section-y:56px}
  html{scroll-padding-top:88px}
  body.media-enhanced .site-header{height:var(--pp-header-h);min-height:var(--pp-header-h);padding:6px 10px;border-radius:0 0 18px 18px;gap:8px}
  body.media-enhanced .brand{width:min(178px,49vw);height:52px;padding:3px 6px;border-radius:13px}
  body.media-enhanced .header-actions{gap:5px}
  body.media-enhanced .language-switch{display:flex;font-size:9px;gap:2px}
  body.media-enhanced .language-switch span{display:none}
  body.media-enhanced .language-switch button{min-width:28px;min-height:38px;padding:0 3px}
  body.media-enhanced .mobile-menu-button{width:42px;height:42px}

  .page-intro-shell .premium-hero-inner{width:calc(100% - 40px);padding:34px 0 40px;gap:24px}
  .page-intro-shell .premium-kicker{margin-bottom:16px;font-size:11px}
  .page-intro-shell .premium-hero h1{font-size:clamp(36px,10.7vw,48px);line-height:1.06}
  html[dir="rtl"] .page-intro-shell .premium-hero h1{font-size:clamp(35px,10vw,46px);line-height:1.31}
  .page-intro-shell .premium-lead{margin-top:22px;font-size:15px;line-height:1.62}
  .page-intro-shell .premium-pillars{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;gap:14px 8px}
  .page-intro-shell .premium-pillar-icon{width:46px;height:46px}
  .page-intro-shell .premium-hero-actions{display:grid;grid-template-columns:1fr;margin-top:24px}
  .page-intro-shell .premium-btn{width:100%;min-height:50px}
  .page-intro-shell .premium-hero-visual{aspect-ratio:4/3}
  .page-intro-shell .premium-photo-shell{border-radius:20px}
  .page-intro-shell .premium-quote{left:12px;right:12px;bottom:12px;width:auto;padding:12px 14px;font-size:15px}
  .page-intro-shell > .trust-strip{padding:0 14px;grid-template-columns:1fr 1fr}
  .page-intro-shell .trust-item{min-height:82px;padding:14px 12px}
  .page-intro-shell .trust-item h2{font-size:14px}
  .page-intro-shell .trust-item p{font-size:10px}

  main#accueil > .section,
  main#accueil > .about-section,
  main#accueil > .values-section,
  main#accueil > .gallery-section,
  main#accueil > .partners-section,
  main#accueil > .act-section,
  main#accueil > .contact-section,
  main#accueil > .media-hub-section{padding-block:56px}
  main#accueil > .paths-section,
  main#accueil > .about-section,
  main#accueil > .timeline-section,
  main#accueil > .news-section{width:calc(100% - 40px)}
  main#accueil > .values-section,
  main#accueil > .gallery-section,
  main#accueil > .partners-section,
  main#accueil > .act-section,
  main#accueil > .contact-section,
  main#accueil > .media-hub-section{padding-inline:20px}
  [data-media-panel="articles"] .media-grid,
  [data-media-panel="videos"] .media-grid,
  [data-media-panel="books"] .media-grid{grid-template-columns:1fr;gap:14px}
  .media-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .media-tab{flex:0 0 auto;white-space:nowrap;min-height:44px}
}

@media (max-width:390px){
  body.media-enhanced .brand{width:min(166px,47vw)}
  .page-intro-shell .premium-hero-inner{width:calc(100% - 32px)}
}

@media (max-height:760px) and (min-width:1181px){
  :root{--pp-header-h:84px;--pp-trust-h:104px}
  body.media-enhanced .site-header{height:var(--pp-header-h);min-height:var(--pp-header-h)}
  .page-intro-shell .premium-hero-inner{padding-block:12px 16px}
  .page-intro-shell .premium-hero h1{font-size:clamp(44px,4vw,60px)}
  .page-intro-shell .premium-lead{margin-top:15px;font-size:16px}
  .page-intro-shell .premium-pillars{margin-top:14px}
  .page-intro-shell .premium-hero-actions{margin-top:14px}
  .page-intro-shell .premium-hero-visual{height:min(58vh,520px)}
  .page-intro-shell .trust-item{min-height:var(--pp-trust-h);padding-block:14px}
}

@media (prefers-reduced-motion:reduce){
  .premium-photo-shell img,.media-card,.premium-btn{transition:none}
}

/* ============================================================
   V4.1 final visual-audit corrections
   ============================================================ */

/* Header collision fix: reserve intrinsic space for language + CTA. */
@media (min-width:1181px){
  body.media-enhanced .site-header{
    grid-template-columns:260px minmax(0,1fr) max-content;
    column-gap:18px;
    padding-inline:max(20px,calc((100vw - 1380px) / 2));
  }
  body.media-enhanced .brand{
    width:260px;
    max-width:260px;
  }
  body.media-enhanced .desktop-nav{
    gap:clamp(12px,1.15vw,19px);
    justify-content:center;
    min-width:0;
  }
  body.media-enhanced .desktop-nav a{
    font-size:clamp(11.5px,.86vw,13px);
    white-space:nowrap;
  }
  body.media-enhanced .header-actions{gap:12px;white-space:nowrap}
  body.media-enhanced .contact-button{
    min-width:164px;
    padding-inline:16px;
    white-space:nowrap;
    flex:none;
  }
}

/* Correct invalid calc() arithmetic from the first pass and restore the
   shared 1280px grid inside the hero. */
.page-intro-shell .premium-hero-inner{
  /* Prevent flex-grow from defeating the global 1280px container. */
  flex:0 1 auto;
  width:min(var(--pp-max),calc(100% - var(--pp-gutter) - var(--pp-gutter)));
  max-width:var(--pp-max);
  margin-inline:auto;
  /* Let copy/visual z-index participate in the hero stacking context:
     text stays above the orange/navy curve while the photo stays behind it. */
  z-index:auto;
}

/* Mobile: floating desktop utilities must never cover primary content/CTAs. */
@media (max-width:700px){
  main#accueil > .quick-actions,
  main#accueil > .section-navigation{display:none!important}
}