/* ==========================================================================
   RESPONSIVE — chargé en dernier
   La maquette n'existe qu'au format 1440. Les paliers ci-dessous dérivent du
   desktop : on défait d'abord les largeurs FIXED, puis les rangées, puis les
   grilles. Règle de survie : dans une colonne flex, toute largeur figée
   devient 100 % ET toute hauteur figée devient auto — sinon le contenu
   déborde de sa boîte sans provoquer de défilement horizontal, donc sans
   être détecté par un simple test d'overflow.
   ========================================================================== */

/* ==========================================================================
   ≤ 1280 px — les colonnes figées deviennent fluides
   ========================================================================== */
@media (max-width: 1280px) {

  .hero__col,
  .hero__head,
  .band__inner,
  .services__head,
  .pledges__head,
  .journey__head,
  .contact__head,
  .figures__head,
  .guide__list,
  .local__list { width: 100%; }

  /* Sous 1440 px le texte se replie sur plus de lignes : la hauteur figée
     devient un minimum, sinon le héros rogne son propre contenu. */
  .hero { height: auto; min-height: 650px; }

  .hero__badge { top: 200px; right: 24px; width: 320px; }
  .hero__badge img { width: 100%; }

  .support__row  { gap: var(--sp-40); }
  .support__col  { width: auto; flex: 1 1 0; min-width: 0; }
  .support__media { width: 380px; }
  .support__media > img { width: 100%; height: 470px; }
  .support__calli { left: 50%; transform: translateX(-50%); top: 400px; width: 210px; }
  .support__deco { display: none; }

  .guide__row   { gap: var(--sp-40); }
  .guide__media { width: 420px; height: 380px; }
  .guide__media > img { width: 100%; height: 100%; }
  .guide__calli { left: 50%; transform: translateX(-50%); top: 270px; width: 250px; }
  .guide__col   { width: auto; flex: 1 1 0; min-width: 0; }

  .pledges__row { gap: var(--sp-32); }
  .pledges__col { width: auto; flex: 1 1 0; min-width: 0; }
  .pledges__media { width: 320px; height: 400px; }

  .local__row { gap: var(--sp-40); }
  .local__col { width: auto; flex: 1 1 0; min-width: 0; }
  .local__media { min-height: 460px; border-width: 12px; }

  .callout__row   { gap: var(--sp-24); }
  .callout__col   { width: auto; flex: 1 1 0; min-width: 0; }
  .callout__panel { width: auto; flex: 1 1 0; min-width: 0; }

  .partners__row   { gap: var(--sp-40); }
  .partners__media { width: 360px; height: 380px; }

  .footer__top   { gap: var(--sp-40); }
  .footer__brand { width: 320px; }
  .footer__cols  { gap: var(--sp-24); }
}

/* ==========================================================================
   ≤ 1080 px — navigation en tiroir, rangées à deux colonnes conservées
   ========================================================================== */
@media (max-width: 1080px) {

  .nav-toggle { display: flex; position: relative; }

  /* Ancré sous l'en-tête collant : le tiroir suit le header au défilement */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-8) clamp(20px, 4vw, 64px) var(--sp-24);
    background: var(--c-white);
    box-shadow: var(--sh-header);
    border-top: 1px solid var(--c-field-border);
    max-height: calc(100dvh - var(--h-header));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
    z-index: var(--z-menu);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }

  .nav__link {
    padding-block: var(--sp-16);
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--c-field-border);
  }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link[aria-current="page"]::after { left: 0; transform: none; }

  /* Le bouton d'appel de l'en-tête garde son libellé (demande client),
     en version compacte pour tenir à côté du logo et du burger. */
  .header__cta { padding-inline: var(--sp-16); white-space: nowrap; }

  .hero__badge { display: none; }

  .services__grid { flex-wrap: wrap; }
  .services__grid .svc { flex: 1 1 calc(50% - var(--sp-24)); min-width: 240px; }

  .steps { flex-wrap: wrap; row-gap: var(--sp-40); }
  .steps .step { flex: 1 1 calc(50% - var(--sp-16)); min-width: 240px; }
  .journey__line { display: none; }

  .stats { flex-wrap: wrap; }
  .stats .stat { flex: 1 1 calc(50% - var(--sp-16)); min-width: 260px; }

  .contact__row { flex-direction: column; }
  /* En colonne, les bases 735px/449px deviendraient des hauteurs. */
  .contact__panel,
  .contact__media { flex: 0 0 auto; }
  .contact__panel { border-radius: var(--r-form) var(--r-form) 0 0; }
  .contact__media { border-radius: 0 0 var(--r-form) var(--r-form); min-height: 320px; }
}

/* ==========================================================================
   ≤ 900 px — toutes les rangées passent en colonne
   ========================================================================== */
@media (max-width: 900px) {

  :root {
    --fs-hero:   38px;
    --fs-h2-xl:  32px;
    --fs-h2:     30px;
    --fs-h3:     22px;
    --fs-quote:  22px;
    --fs-quote-fr: 19px;
    --sp-88:     56px;
    --sp-90:     56px;
    --sp-104:    64px;
    --sp-72:     48px;
  }

  .support__row,
  .guide__row,
  .pledges__row,
  .local__row,
  .callout__row,
  .partners__row { flex-direction: column; align-items: stretch; }

  /* En colonne, une largeur figée doit disparaître ET la hauteur redevenir auto */
  .support__media,
  .guide__media,
  .pledges__media,
  .partners__media { width: 100%; height: auto; }

  .support__media > img { height: clamp(320px, 62vw, 520px); }
  .guide__media > img   { height: clamp(280px, 58vw, 435px); }
  .pledges__media       { height: clamp(320px, 66vw, 462px); }
  .partners__media      { height: clamp(280px, 58vw, 428px); border-width: 6px; }

  .support__calli { top: auto; bottom: 24px; }
  .guide__calli   { top: auto; bottom: 24px; }
  .guide__deco    { left: -12px; top: -22px; width: 84px; }

  .local__media { min-height: clamp(280px, 58vw, 460px); border-width: 8px; }

  .pledges__row { gap: var(--sp-48); }
  .pledges__col { width: 100%; }

  .support__grid { flex-direction: column; align-items: flex-start; gap: var(--sp-32); }
  .seal { align-self: center; }

  .callout { padding: var(--sp-32) var(--sp-24); }
  .callout__col, .callout__panel { width: 100%; }

  /* Le cadre décoratif ne tient pas sous 900 px : on repasse en boîte fluide
     et le contenu redevient un flux normal (hauteur auto obligatoire). */
  .ayah {
    height: auto;
    background: var(--c-white);
    border: 1px solid var(--c-gold-line);
    border-radius: var(--r-soft);
  }
  .ayah__frame { display: none; }
  .ayah__body {
    position: static;
    padding: var(--sp-56) var(--sp-32);
    align-items: center;
  }

  .hadith { flex-direction: column; gap: var(--sp-32); border-radius: var(--r-soft) 0 var(--r-soft) 0; }
  .hadith__rules { flex-direction: row; width: auto; height: 1px; gap: var(--sp-40); }
  .hadith__col--ar { align-items: flex-start; text-align: right; }

  .footer__top  { flex-direction: column; gap: var(--sp-48); }
  .footer__brand { width: 100%; }
  .footer__cols { flex-wrap: wrap; row-gap: var(--sp-40); }
  .footer__col  { flex: 1 1 45%; min-width: 200px; }

  /* Les hauteurs FIXED du desktop doivent redevenir auto, sinon le contenu
     déborde silencieusement de sa boîte. */
  .band { height: auto; padding-block: 56px; align-items: center; }
  .band__deco { width: 200px; opacity: .5; }
  .footer { min-height: 0; }
}

/* ==========================================================================
   ≤ 768 px — grilles sur une seule colonne, appel flottant
   ========================================================================== */
@media (max-width: 768px) {

  :root {
    --pad-page: 20px;
    --h-header: 84px;
  }

  .header__logo img { width: 52px; height: 73px; }

  .topbar { height: auto; padding-block: var(--sp-8); }
  .topbar__inner { flex-direction: column; gap: var(--sp-6); }
  .topbar__group { gap: var(--sp-12); flex-wrap: wrap; justify-content: center; }
  .topbar__rule { display: none; }
  .topbar__item, .topbar__status { font-size: var(--fs-xxs); }

  .hero { height: auto; padding-block: 56px; }

  .services__grid { flex-direction: column; }
  .services__grid .svc { flex: 1 1 auto; width: 100%; min-width: 0; height: 380px; }

  .steps { flex-direction: column; gap: var(--sp-40); }
  .steps .step { flex: 1 1 auto; width: 100%; min-width: 0; }
  .step__card { min-height: 0; }

  .stats { flex-direction: column; }
  .stats .stat { flex: 1 1 auto; width: 100%; min-width: 0; }

  /* align-items:stretch obligatoire : la valeur desktop flex-start ferait
     rétrécir les champs à leur largeur de contenu (~210 px) en colonne. */
  .form__grid { flex-direction: column; gap: var(--sp-16); align-items: stretch; }
  .form__grid .form__col { flex: 0 0 auto; }
  .callout__actions { flex-direction: column; align-items: stretch; }
  .callout__actions .btn { width: 100%; }

  .btn-group { gap: var(--sp-12); }
  .btn-group .btn { flex: 1 1 auto; }

  .contact__panel { padding: var(--sp-24); }
  .contact__meta { justify-content: flex-start; }
  .contact__meta-rule { display: none; }

  .partners { padding-block: 64px; min-height: 0; }
  .partners__bg { width: 100%; object-fit: cover; }

  .footer__inner { padding-block: 56px; gap: var(--sp-48); }
  .footer__legal { gap: var(--sp-20); }

  .call-fab { display: inline-flex; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   ≤ 560 px — resserrement final
   ========================================================================== */
@media (max-width: 560px) {

  :root {
    --fs-hero:  30px;
    --fs-h2:    26px;
    --fs-h2-xl: 26px;
    --fs-h3:    20px;
    --fs-h4:    18px;
    --fs-quote: 19px;
    --fs-quote-fr: 17px;
    --fs-footer-h: 18px;
  }

  .hero__pill { font-size: 11px; padding: var(--sp-10) var(--sp-16); }
  .hero__cards { flex-direction: column; }

  /* Sur les très petits écrans, les libellés longs doivent pouvoir passer à
     la ligne : la hauteur figée de 44 px devient donc un minimum. */
  .btn {
    padding: var(--sp-10) 18px;
    font-size: var(--fs-xxs);
    height: auto;
    min-height: var(--h-btn);
    white-space: normal;
  }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }

  .ayah__body { padding: var(--sp-32) var(--sp-20); }
  .hadith { padding: var(--sp-24) var(--sp-20); }

  .seal { width: 168px; height: 168px; }
  .seal__body { width: 100px; }
  .seal__num { font-size: 24px; }
  .seal__num b { font-size: 28px; }
  .seal__label { font-size: var(--fs-xs); }

  .footer__cols { flex-direction: column; }
  .footer__col { flex: 1 1 auto; width: 100%; }
  .footer__logo img { width: 180px; height: auto; }

  .call-fab { right: var(--sp-12); bottom: var(--sp-12); height: 48px; padding: 0 16px; }
}

/* ==========================================================================
   Impression
   ========================================================================== */
@media print {
  .topbar, .header, .call-fab, .band__deco, .svc__pin,
  .btn, form { display: none !important; }
  body { color: #000; background: #fff; }
  .footer { background: #fff; color: #000; }
  .footer__bg { display: none; }
}

/* ==========================================================================
   PAGES INTÉRIEURES — adaptation des composants de pages.css
   Même règle qu'au-dessus : en colonne, toute largeur figée passe à 100 %
   ET toute hauteur figée revient à auto.
   ========================================================================== */

@media (max-width: 1280px) {
  .pbanner__inner,
  .pbanner__lead   { width: 100% !important; }
  .pbanner__chip--tr,
  .pbanner__chip--br { right: 20px; }
  .pbanner__chip--tl { left: 20px; }
  .pbanner__chip--bl { left: 60px; }

  .docaside        { width: 44%; }
  .gstrip__lead    { width: 34%; }
  .trust__inner    { width: 100%; }
  .trust__deco     { opacity: .5; }
}

@media (max-width: 1080px) {
  /* Les pastilles flottantes n'ont plus la place de se poser sans recouvrir
     le titre de la bannière. */
  .pbanner__chip { display: none; }

  .ecard { padding: var(--sp-40); }
  .invoc__pair { gap: var(--sp-32); }
  .gstrip { flex-wrap: wrap; }
  .gstrip__lead { width: 100%; border-radius: var(--r-step) var(--r-step) 0 0; }
  .gstrip__item:last-child { border-radius: 0 0 var(--r-step) var(--r-step); }
}

@media (max-width: 900px) {
  .mrow,
  .mrow--44,
  .ecard__row,
  .split,
  .docgrid__wrap,
  .invoc__pair   { flex-direction: column; align-items: stretch; }

  /* Même raison que les cartes à 768 px : en colonne, une base flex (0 ou en
     px) ne doit pas devenir la hauteur. */
  .ecard__row > .ecard__col { flex: 0 0 auto; }
  .split__text,
  .split__media { flex: 0 0 auto; }

  /* `!important` est nécessaire : les dimensions FIXED de la maquette sont
     portées par des attributs style= sur ces médias, qui l'emportent
     autrement sur la requête média. */
  .mrow__media,
  .mrow__media--mission,
  .mrow__media--engagement { width: 100%; height: auto; margin: 0; }
  .ecard__media { width: 100% !important; height: auto !important; }
  .ecard__media > img { height: clamp(220px, 55vw, 460px); }
  /* Cadres ornementaux (PNG alpha) : ni rognage cover, ni marge négative. */
  .ecard__media--ornement { margin: 0 !important; }
  .ecard__media--ornement > img { height: auto; object-fit: contain; }
  .mrow__media--mission img,
  .mrow__media--engagement img { height: clamp(280px, 60vw, 500px); }
  .mrow__media--mission { border-width: 8px; }
  .mrow__media--engagement { border-width: 10px; }

  .split__text  { border-radius: 0; padding: var(--sp-32) var(--sp-24); }
  .split__media { border-radius: 0; height: clamp(240px, 55vw, 420px); }

  .trust__deco  { display: none; }
  .trust__inner { padding-block: 0; }

  .docaside { width: 100%; border-radius: var(--r-media) 0 var(--r-media) 0; min-height: 320px; }
  .docgrid  { width: 100%; }

  .invoc__col  { width: 100%; }
  .invoc__rule { width: 100%; height: 2px; }
  .invoc__inner { gap: var(--sp-40); }
  .invoc { min-height: 0; padding: var(--sp-32) var(--sp-24); }

  .qstrip__row { flex-direction: column; }
  .qstrip__cell--accent { border-radius: 26px 26px 0 0; }
  .qstrip__cell--plain  { border-radius: 0 0 26px 26px; }

  .pbanner { height: auto; min-height: 340px; padding-block: 56px; }
  .pbanner--tall { height: auto; }

  .tline__body { padding-left: var(--sp-24); }
  .tline::before { left: 17px; }
}

@media (max-width: 768px) {
  .dgrid__row,
  .trust__row,
  .docgrid__row { flex-direction: column; }
  /* En colonne, `flex: 1 1 0` ferait de la base 0 la hauteur (seul le
     min-height:auto sauve le rendu) : figer la taille sur le contenu. */
  .dgrid__row > .dcard,
  .dgrid__row > .doccard,
  .trust__row > .tcard,
  .docgrid__row > .doccard { flex: 0 0 auto; }
  .dcard__media { height: 240px; }

  .ecard { padding: var(--sp-24); border-radius: 0 var(--r-soft) 0 var(--r-soft); }
  .ecard--flip { border-radius: var(--r-soft) 0 var(--r-soft) 0; }
  .ecard__stack { gap: var(--sp-40); }

  .gstrip__item { flex: 1 1 45%; min-width: 140px; }
  .gstrip__item:last-child { border-radius: 0; }

  .acc__item { padding: var(--sp-20); }
  .acc__q { font-size: var(--fs-h6); }
  .acc__a { padding-left: var(--sp-24); }

  .wideshot { height: clamp(200px, 50vw, 450px); border-radius: var(--r-soft); }
  .crumbs { font-size: 12px; }
}