/* Transposé de maquettes/mobile.css (révision 21, 10/09/2026). Adaptations : sur mobile, tiroirs et profils en deux temps (texte sortant effacé, puis étape suivante qui monte du bas en fondu) */
/* Mobile follows the approved paper, type and scroll-mask language. */
.mobile-approach,.deck-controls{display:none}
.project-contact-form textarea{font-size:16px;font-family:inherit;font-weight:300}
.project-contact-form textarea::placeholder{font:inherit;font-style:italic;color:var(--muted);opacity:1}
@media(max-width:700px){
 body[data-variant=tiroirs] .project-grid{display:block}
 body[data-variant=tiroirs] .project-grid .project{display:block;width:100%;margin:0 0 48px}
 body[data-variant=tiroirs] .project-grid .project-picture{aspect-ratio:4/5}
 body[data-variant=tiroirs] .project-grid .project-picture img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;transform:none}
 .interior .portrait-figure img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
 body[data-variant=tiroirs] .accordion-story{height:auto;padding:24px 0 0}
 body[data-variant=tiroirs] .story-stage{display:flex;flex-direction:column;gap:32px;padding-block:0}
 body[data-variant=tiroirs] .story-right{position:static;order:-1;width:min(72%,250px);margin:0;align-self:flex-start}
 body[data-variant=tiroirs] .story-images{height:auto;aspect-ratio:3/4;width:100%}
 body[data-variant=tiroirs] .story-image[data-image="-1"]{display:block;opacity:1;visibility:visible;clip-path:none;transform:none}
 body[data-variant=tiroirs] .story-image[data-image="-1"] img{object-fit:cover;object-position:50% 45%}
 body[data-variant=tiroirs] .story-image:not([data-image="-1"]),body[data-variant=tiroirs] .story-actions,body[data-variant=tiroirs] .drawers,body[data-variant=tiroirs] .story-scenes{display:none}
 body[data-variant=tiroirs] .story-left{width:100%;height:auto}
 body[data-variant=tiroirs] .story-left>h2,.mobile-approach h2{font-size:46px;font-weight:300;line-height:1.08;letter-spacing:-.035em;margin:0 0 28px}
 body[data-variant=tiroirs] .agency-copy{display:block;grid-template-rows:1fr;opacity:1;max-height:none}
 .agency-intro-inner>p{font-size:16px;line-height:1.65}
 .agency-facts{gap:26px;margin:28px 0}.agency-facts>div{flex:1}.agency-facts dt{font-size:11px;line-height:1.4}.agency-facts dd{font-size:44px}
 .mobile-approach{display:block;margin-top:72px;margin-bottom:32px;scroll-margin-top:80px}
 .mobile-approach .deck-panel{border-top:1px solid var(--line);padding:26px 0 30px}
 .mobile-approach .deck-panel h3{font-size:29px;font-weight:300;line-height:1.15;max-width:17ch;margin:0 0 24px}
 .mobile-approach .deck-panel p{font-size:17px;line-height:1.65;margin:0}
 .deck-is-pinned{position:relative;padding-bottom:0}
 .deck-is-pinned>.deck-stage{position:sticky;top:var(--deck-top,80px);min-height:64svh;display:flex;flex-direction:column;justify-content:flex-start}
 .deck-is-pinned .deck-panels{display:grid;position:relative;isolation:isolate;margin:0}
 .deck-is-pinned .deck-panel,.deck-is-pinned .deck-panel[hidden]{display:block;grid-area:1/1;position:relative;background:var(--paper);clip-path:none;opacity:var(--deck-opacity,1);z-index:var(--deck-order);animation:none;transition:none;margin:0;align-self:stretch;pointer-events:none}
 .deck-is-pinned .deck-panel[aria-hidden=false]{pointer-events:auto}
 .deck-is-pinned .deck-controls{display:flex;justify-content:space-between;gap:0;border-top:1px solid var(--line);margin-top:24px}
 .deck-controls button{flex:1;min-width:0;min-height:44px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);border-top:1px solid transparent;margin-top:-1px}
 .deck-controls button[aria-current=step]{color:var(--ink);border-top-color:var(--ink)}
 .method-mobile-sequence{margin-top:38px}
 .method-mobile-sequence.deck-is-pinned .deck-stage{min-height:62svh}
 .method-mobile-sequence.deck-is-pinned .method-steps li{display:grid;grid-template-columns:25px 1fr;align-content:start;border-bottom:none;padding:28px 0 36px;gap:12px}
 .method-mobile-sequence .method-steps h3{font-size:30px;line-height:1.2}
 .method-mobile-sequence .method-steps p{font-size:17px;line-height:1.65;margin-top:24px}
 .pathway-scroll.deck-is-pinned .deck-stage{min-height:0;padding-bottom:20px}
 .pathway-scroll.deck-is-pinned .pathway-tabs{margin:0 0 24px;gap:10px}
 .pathway-scroll.deck-is-pinned .pathway-tabs button{font-size:clamp(12px,3.6vw,14px)}
 .pathway-scroll.deck-is-pinned .pathway-tabs button::after{transition:none}
 .pathway-scroll.deck-is-pinned .pathway-panel{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding-bottom:0}
 .pathway-scroll.deck-is-pinned .pathway-copy h3{font-size:28px;line-height:1.12}
 .pathway-scroll.deck-is-pinned .pathway-copy p{font-size:16px;line-height:1.55;margin-top:16px}
 .pathway-scroll.deck-is-pinned .pathway-copy>.text-link{margin-top:18px;font-size:13px}
 .pathway-scroll.deck-is-pinned .pathway-panel img{height:23svh;width:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
 .pathway-scroll.deck-is-pinned .pathway-panel figcaption{font-size:11px;margin-top:10px}
 .method-pathways>.all-projects-link{margin-top:28px}
}

/* Refinement 21: preserve the agency pause; stack mobile drawers vertically. */
.approach-link-space{height:34px;margin-bottom:5px}
.drawer-scene-stack{display:none}
.method-closing-links{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:28px}
.method-closing-links .text-link{margin:0}
.method-closing-links .method-guide{max-width:none}
.method-pathways{padding-bottom:0}
@media(max-width:700px){
 .method-pathways{padding-bottom:32px}
 .deck-is-pinned[data-drawer-stack] .drawer-source{display:none}
 .deck-is-pinned[data-drawer-stack] .drawer-scene-stack{display:grid}
 .deck-is-pinned[data-drawer-stack]>.deck-stage{min-height:0}
 .deck-is-pinned .drawer-scene{padding:0;border:0}
 .mobile-drawer-row{border-top:1px solid var(--line)}
 .mobile-drawer-row:last-child{border-bottom:1px solid var(--line)}
 .mobile-drawer-row h3,.mobile-approach .mobile-drawer-row h3{font-size:19px;line-height:1.2;font-weight:300;max-width:none;margin:0}
 .mobile-drawer-row h3 button{display:grid;grid-template-columns:24px 1fr 15px;gap:9px;align-items:center;width:100%;min-height:48px;padding:12px 0;text-align:left;font:inherit}
 .mobile-drawer-row .step-position{font-size:11px;padding:0;color:var(--muted)}
 .mobile-drawer-mark{text-align:right;font-size:21px}
 .mobile-drawer-row p,.mobile-approach .mobile-drawer-row p{font-size:16px;line-height:1.55;margin:4px 24px 22px 33px}
 .pathway-scroll.deck-is-pinned .pathway-panel img{height:auto;aspect-ratio:1;max-height:none}
 .pathway-scroll.deck-is-pinned .pathway-panel{gap:20px}
 .pathway-scroll.deck-is-pinned .deck-stage{padding-bottom:0}
 .method-closing-links .method-guide{font-size:13px;max-width:35ch}
}
@media(max-width:700px){
 body[data-variant=tiroirs] .story-left>h2,.mobile-approach h2{font-size:clamp(36px,10vw,46px)}
 .mobile-drawer-row h3,.mobile-approach .mobile-drawer-row h3{font-size:18px}
}
@media(max-width:360px){
 .mobile-drawer-row h3,.mobile-approach .mobile-drawer-row h3{font-size:17px}
 .mobile-drawer-row h3 button{min-height:44px;padding-block:10px}
 .mobile-drawer-row p,.mobile-approach .mobile-drawer-row p{font-size:15px;line-height:1.5;margin-right:10px}
}
/* Tiroirs : le paragraphe ouvert, son signe « − » et le trait qui le ferme s’effacent, puis la ligne suivante monte de 64 px en apparaissant (demande de Tarek du 11/09/2026). Sans color-mix, le trait disparaît avec son étape, recouverte par la suivante ; sans la variable, translate reste à none. */
.deck-is-pinned .drawer-scene .mobile-drawer-row.is-open>p,.deck-is-pinned .drawer-scene .mobile-drawer-row.is-open .mobile-drawer-mark{opacity:var(--deck-sortie,1)}
@supports (color:color-mix(in srgb,red calc(1*50%),transparent)){.deck-is-pinned .drawer-scene .mobile-drawer-row.is-open{border-bottom-color:color-mix(in srgb,var(--line) calc(var(--deck-sortie,1)*100%),transparent)}}
.deck-is-pinned .drawer-scene .mobile-drawer-row.is-open{translate:0 var(--deck-decalage)}
/* Profils : même enchaînement, pour que deux textes ne se superposent pas non plus. Le texte et la légende du profil affiché s’effacent, puis le profil suivant apparaît, son texte montant de 64 px (18 px sur mobile, où la photo est juste dessous et ne doit pas être recouverte) ; les photos passent de l’une à l’autre en fondu. */
.deck-is-pinned .pathway-panel .pathway-copy{opacity:var(--deck-sortie,1);translate:0 var(--deck-decalage)}
@media(max-width:700px){.deck-is-pinned .pathway-panel .pathway-copy{translate:0 calc(var(--deck-decalage) * .28)}}
.deck-is-pinned .pathway-panel figcaption{opacity:var(--deck-sortie,1)}
/* Section épinglée plus haut que le bas de l’en-tête (petits écrans) : l’en-tête reste masqué, sauf menu ouvert ou focus clavier. */
body.deck-sous-entete:not(.menu-open) .site-header:not(:focus-within){transform:translateY(-105%);opacity:0;pointer-events:none}

/* Section épinglée : le focus clavier ne fait plus défiler la page vers un onglet ou une étape déjà à l’écran. */
.deck-is-pinned [id]{scroll-margin-top:0}
/* Profils sur les téléphones peu hauts (390 × 664, Safari avec ses barres) : la photo est un peu moins haute, pour que la légende reste à l’écran. */
@media(max-width:700px) and (max-height:700px){.pathway-scroll.deck-is-pinned .pathway-panel img{max-height:calc(100svh - 360px)}}
/* Tiroirs sur mobile (accueil et Méthode) : sans les signes « + » et « − » (demande de Tarek du 12/09/2026). */
@media(max-width:700px){.mobile-drawer-mark{display:none}.mobile-drawer-row h3 button{grid-template-columns:24px 1fr}}
/* Accueil sur mobile : le portrait passe sous le texte et les chiffres de l’agence (demande de Tarek du 12/09/2026). */
@media(max-width:700px){body[data-variant=tiroirs] .story-right{order:0}}

/* Tiroirs sur mobile (accueil et Méthode) : pas de trait au-dessus de la première ligne ni sous la dernière, et un peu plus d’air entre les lignes, réglé sur la hauteur de l’écran pour que la liste ouverte tienne encore en 375 × 667 (demande de Tarek du 12/09/2026). */
@media(max-width:700px){.mobile-drawer-row:first-child{border-top:0}.mobile-drawer-row:last-child{border-bottom:0}.mobile-drawer-row h3 button{padding-block:clamp(12px,2svh,18px)}}
/* Accueil : légende sous le portrait (demandes de Tarek du 12/09/2026) ; sur ordinateur, à droite, sur la ligne du lien « En savoir plus », et effacée pendant les étapes, quand la photo change ; sur mobile, sous la photo. */
.portrait-caption{display:none}
@media(min-width:701px){.portrait-caption{display:block;position:absolute;right:0;bottom:8px;text-align:right;font-size:13px;line-height:1.45;transition:opacity .35s}.portrait-caption span{display:block}.portrait-caption span+span{font-size:12px;color:var(--muted)}.story-stage.has-step .portrait-caption{opacity:0}}
@media(max-width:700px){body[data-variant=tiroirs] .portrait-caption{display:block;margin-top:12px;font-size:14px;line-height:1.45}.portrait-caption span{display:block}.portrait-caption span+span{font-size:13px;color:var(--muted)}}