/* ═══════════════════════════════════════════════════════════════════════
   EDGARIS — couche mobile
   Ne s'applique qu'en dessous de 680px : le bureau n'est jamais touché.
   Reprend les variables de edgaris.css, n'introduit aucune couleur.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {

  /* ── 1. Lisibilité : rien sous 16px pour le corps de texte ──
     16px est aussi le seuil sous lequel iOS zoome tout seul dans un champ. */
  body, p, li, .hero-sub, .hero-body, .desc-col p, .hero-contexte p{
    font-size: 16px;
    line-height: 1.65;
  }
  input, select, textarea{ font-size: 16px !important; }

  /* ── 2. Cibles tactiles : 44px minimum (Apple HIG, WCAG 2.5.5) ── */
  .btn, .nav-cta, .nav-mobile-links a, .bc-link, .hp-card-link,
  .pn-link, .foot ul a, .proj-filtre, .radio-label{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-mobile-links a{ min-height: 56px; }
  input[type="text"], input[type="email"], input[type="tel"],
  select, .field input, .field select{ min-height: 48px; }
  .foot ul li + li{ margin-top: 6px; }
  .foot ul a{ padding: 4px 0; }

  /* ── 3. Hero d'accueil condensé ──
     Il occupait un écran entier avant le premier mot utile. Le message et
     le premier bouton passent au-dessus de la ligne de flottaison. */
  .hero{ min-height: auto; }
  .hero-inner{ padding: 116px 24px 36px; }
  .hero h1{ width: auto !important; font-size: clamp(2rem, 9vw, 2.6rem); margin-top: 18px; }
  .hero-sub{ margin-top: 18px; font-size: 16px; }
  .hero-ctas{ margin-top: 26px; gap: 10px; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn{ justify-content: center; width: 100%; }
  /* Deux aplats or côte à côte annulent la hiérarchie : le second passe en
     contour, comme le prévoit .btn-ghost avant sa surcharge de bureau. */
  .hero-ctas .btn-ghost{
    background: transparent; color: var(--gold);
    border: 1px solid var(--gold); outline: 0;
  }
  /* Le surtitre reprend ce que dit la nav et tenait sur deux lignes : retiré.
     Le second bouton part aussi — un seul geste proposé, la suite de la page
     mène de toute façon aux deux métiers. */
  .hero .eyebrow{ display: none; }
  .hero-ctas .btn-ghost{ display: none; }

  /* Les trois verbes tiennent sur une ligne au lieu de trois blocs empilés.
     Leurs sous-titres sont repris mot pour mot par la section suivante. */
  .hero-bottom{ padding: 14px 0 18px; }
  .stats-row{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; }
  .stat-item{ flex-direction: row; align-items: baseline; gap: 0; }
  .stat-item + .stat-item{ border-left: 0; border-top: 0; padding: 0; }
  .stat-item + .stat-item::before{
    content: "·"; margin: 0 10px; color: var(--gold); opacity: .55;
  }
  .stat-v{ display: none; }
  .stat-k{ font-size: 19px; }

  /* ── 4. Barre d'action fixe ──
     Injectée par mobile.js. Elle n'apparaît qu'une fois le hero dépassé,
     pour ne pas concurrencer l'appel à l'action principal. */
  .m-bar{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--green);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.2,.6,.2,1);
  }
  .m-bar.is-visible{ transform: translateY(0); }
  .m-bar a{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; padding: 0 12px;
    font-family: 'Sora', sans-serif; font-weight: 500;
    font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cream); text-decoration: none;
  }
  .m-bar a + a{ border-left: 1px solid var(--rule); }
  .m-bar a.is-primary{ background: var(--gold); color: var(--green); }
  .m-bar svg{ width: 17px; height: 17px; flex-shrink: 0 }

  /* La barre ne doit jamais recouvrir la fin de page */
  body.m-bar-on{ padding-bottom: 56px; }

  /* Elle masquerait le bouton d'envoi du formulaire : on l'efface au focus */
  body.m-typing .m-bar{ transform: translateY(110%); }

  /* ── 5. Respirations resserrées ──
     Les paddings pensés pour le bureau doublent la longueur de la page. */
  :root{ --section-pad: 56px; }
  .processus, .home-projets, .contact-section, .conviction, .leadgen,
  .transformation, .descriptif, .proj-nav, .cta-strip, section[class]{
    padding-top: 56px; padding-bottom: 56px;
  }
  .section-head, .teasers-head, .processus-head, .bc-head, .tp-head,
  .acc-head, .leadgen-top, .steps-head, .seq-head{ margin-bottom: 36px; }
  .hp-grid, .proj-grid, .bc-grid{ gap: 18px; }
  .hp-card img{ height: 240px; }
  footer{ padding: 48px 0 24px; }
  .foot-grid{ gap: 32px; }
  /* Les cartes projet : titre et lien resserrés */
  .bc-body{ padding: 20px 18px; }
  .bc-body h3{ min-height: 0; }

  /* ── 6. Accueil : le formulaire cède la place à deux gestes directs ──
     Le formulaire complet pesait 1,9 écran et redouble la page Contact.
     Sur mobile on garde l'intention et on donne les deux actions ; la page
     Contact accueille la demande détaillée. Le bureau est inchangé. */
  .leadgen .form-card{ display: none; }
  .leadgen-mobile{ display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .leadgen-mobile .btn{ justify-content: center; width: 100%; }
  .leadgen-mobile-note{
    margin-top: 6px; text-align: center;
    font-family: 'Manrope', sans-serif; font-weight: 300;
    font-size: 13.5px; line-height: 1.6; color: rgba(245,240,232,.55);
  }

  /* ── 7. Pages intérieures : corps de texte ──
     La règle du §1 vise « p » et « li » nus : toute règle de page portant
     une classe la surclasse. On reprend ici, une par une, les classes qui
     portent de la prose courante. Les micro-libellés en Sora capitales
     (.eyebrow, .li-label, .proc-title, .prest-num, .tl-l, .legal-updated,
     .hp-status, .pn-lbl, .seq-legende) restent à leur taille : ils font
     partie de l'identité, les grossir casserait le dessin. */
  .bc-zone, .nm-ul .li-body, .proc-desc, .exp-tl-desc, .prest-text p,
  .legal-wrap p, .legal-wrap li, .seq-sous{
    font-size: 16px;
    line-height: 1.7;
  }
  .foot ul{ font-size: 15px; }

  /* ── 8. Cibles tactiles que le §2 n'atteignait pas ──
     Mesurées à 32, 37, 39, 20 et 15px sur téléphone. */
  .nav-burger{ width: 44px; height: 44px; }
  .act-cta, .hp-link, .nm-cta, .exp-cta{
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Liens secondaires du pied : 44px les ferait peser autant que la
     navigation. On vise les 24px de la WCAG 2.5.8 (AA) via l'interligne. */
  .foot-links a, .foot-credit a{ display: inline-block; padding: 6px 0; }
  .foot-links{ gap: 28px; }

  /* ── 9. Pages intérieures : mises en page à deux colonnes ──
     Les pages se replient déjà seules ; ne restent que les blocs sans
     point de rupture propre sous 680px. */
  .portrait-grid, .edg-split, .nm-split, .exp-split-inner, .steps-split-inner{
    grid-template-columns: 1fr;
  }
  .legal-wrap h2{ font-size: 19px; margin: 36px 0 14px; }

  /* ── 10. Séquences : cartes empilées, resserrées ──
     Un premier essai les faisait glisser à l'horizontale ; écarté, le
     déroulé vertical se lit mieux. On ne récupère donc de la hauteur que
     sur les marges intérieures, pensées pour le bureau : sur téléphone
     elles ajoutaient une demi-carte de vide par carte. */
  .proc-card{ padding: 34px 26px 30px; }
  .pq-card{ padding: 30px 24px 28px; }
  .proc-cards{ margin-top: 36px; }
  .pq-grid{ margin-top: 32px; }

  /* ── 11. Plans : agrandissement au toucher ──
     Le plan s'ouvre à 260% de la largeur d'écran, échelle à laquelle les
     lots et les surfaces se lisent, et on s'y déplace au doigt. */
  .plan-box:has(img){ cursor: zoom-in; }
  .plan-box:has(img)::after{
    content: "⤢";
    position: absolute; right: 8px; bottom: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    color: var(--green); background: rgba(245,240,232,.9);
    border: 1px solid var(--rule); border-radius: 2px;
    pointer-events: none;
  }
  .plan-box:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }

  .m-loupe{
    position: fixed; inset: 0; z-index: 400;
    background: rgba(26,43,39,.96);
    display: flex; align-items: center; justify-content: center;
  }
  .m-loupe-zone{
    width: 100%; height: 100%;
    overflow: auto; -webkit-overflow-scrolling: touch;
    display: flex; align-items: center;
  }
  .m-loupe-zone img{
    width: 260%; max-width: none; height: auto;
    margin: auto; display: block;
  }
  .m-loupe-x{
    position: absolute; top: 10px; right: 10px; z-index: 1;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; line-height: 1;
    color: var(--green); background: var(--gold);
    border: 0; border-radius: 2px; cursor: pointer;
  }

  /* ── 12. Fiches projet : le diptyque en pile, sans hauteur imposée ── */
  .duo-grid{ gap: 32px; }
  .duo-grid .plan-box{ height: auto; min-height: 200px; }
  .hero-duo{ gap: 22px; }
}

/* Au-dessus de 680px, la barre n'existe pas. */
@media (min-width: 681px){ .m-bar{ display: none !important; } }

/* Le bloc de contact mobile n'apparaît pas au-dessus de 680px. */
@media (min-width: 681px){ .leadgen-mobile{ display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Sous 1100px : le site passe déjà en menu burger. Tout ce que l'on
   perçoit alors comme « la version mobile » doit suivre, sans attendre
   les 680px de la couche ci-dessus.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px){
  /* Le bloc « Notre promesse » gardait texte à gauche et image à droite
     jusqu'en bas : à 768px la colonne image tombait à 266px. Il s'empile,
     texte d'abord — c'est déjà l'ordre du balisage. */
  .exp-split-inner{ grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 1100px){
  /* Les numéros 01–05 devant les entrées du menu. Ils n'existent que dans
     le menu mobile ; display:none les retire aussi de la vocalisation,
     où « 01 Marchand de biens » n'apporte rien. */
  .nav-mobile-links .num{ display: none; }

  /* Sous-menu de section : quatre entrées pour 390px de large. La barre
     défilait déjà, mais rien ne le disait et les libellés étaient tranchés
     en plein milieu — trois sections sur quatre restaient introuvables.
     Les crans alignent les entrées, le dégradé de droite montre qu'il en
     reste, et mobile.js ramène l'entrée active dans le champ. */
  /* .nav-mobile et .page-anchors portaient toutes deux z-index:99. À
     égalité c'est l'ordre du balisage qui tranche, et la barre d'ancres
     vient après : elle passait devant le menu ouvert et masquait
     l'entrée « Contact ». Elle repasse dessous. Le bureau n'est pas
     concerné — le menu burger n'y existe pas. */
  .page-anchors{ z-index: 98; }
  .page-anchors .container{
    scroll-snap-type: x proximity;
    scroll-padding-left: 8px;
  }
  .page-anchors a{ scroll-snap-align: start; }
  .page-anchors::before,
  .page-anchors::after{
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: 48px; pointer-events: none;
    opacity: 0; transition: opacity .2s;
  }
  .page-anchors::after{
    right: 0;
    background: linear-gradient(to right, rgba(245,240,232,0) 0%, var(--cream) 78%);
  }
  .page-anchors::before{
    left: 0; z-index: 1;
    background: linear-gradient(to left, rgba(245,240,232,0) 0%, var(--cream) 78%);
  }
  .page-anchors.a-droite::after{ opacity: 1; }
  .page-anchors.a-gauche::before{ opacity: 1; }
}