/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — correctifs communs, chargés EN DERNIER sur toutes les pages.

   Chaque feuille de page (equipe.css, clients.css, expertises.css…) recopie
   les styles du chrome (barre, menu, icônes de contact) après global.css ;
   ces copies ont divergé, d'où des défauts différents d'une page à l'autre
   sur téléphone. Plutôt que de retoucher chaque copie, les règles mobiles
   qui doivent valoir PARTOUT sont posées ici, une seule fois : chargée après
   la feuille de la page, cette feuille l'emporte à spécificité égale.
   Audit du 30/09/2026, à 390 px de large (iPhone 12 à 16).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barre du haut, mode défilé ──────────────────────────────────────────
   Sur ordinateur, la barre défilée n'est qu'un symbole et un burger posés
   dans la marge. Sur téléphone il n'y a pas de marge : le texte passait
   dessous. On lui donne un fond, dans la couleur de la section survolée
   (nav-dark / nav-light, posées par le script de chaque page). */
@media(max-width:900px){
  .nav.scrolled{height:60px;padding:0 var(--pad);
    background:rgba(19,27,42,.84);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:0 1px 0 rgba(247,245,243,.06)}
  .nav.scrolled.nav-light{background:rgba(247,245,243,.88);box-shadow:0 1px 0 rgba(19,27,42,.08)}
  /* menu ouvert : c'est le menu qui fait fond, la barre redevient transparente */
  body.locked .nav.scrolled,
  body.locked .nav.scrolled.nav-light{background:transparent;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── Sélecteur FR / EN ───────────────────────────────────────────────────
   Masqué sous 900 px sur toutes les pages sauf Savoir-faire : la version
   anglaise était inaccessible depuis un téléphone. Il reste dans la barre
   en haut de page, disparaît au défilement (comme sur ordinateur) et
   revient quand le menu est ouvert. */
@media(max-width:900px){
  .nav-lang-sw{display:inline-flex}
  .nav.scrolled .nav-lang-sw{display:none}
  body.locked .nav.scrolled .nav-lang-sw{display:inline-flex}
  body.locked .nav.scrolled .nav-lang{opacity:1!important;pointer-events:auto}
  /* zone tactile agrandie sans toucher au dessin (le soulignement est l'::after) */
  .nav-lang::before{content:'';position:absolute;inset:-14px -8px}
}

/* ── Icônes de contact flottantes et colonne annexe du menu ──────────────
   Retirées sous 900 px par global.css ; expertises.css les rétablissait,
   d'où trois pastilles posées sur le texte de Savoir-faire. */
@media(max-width:900px){
  .sidebar,.menu-aside{display:none}
}

/* ── Menu plein écran ────────────────────────────────────────────────────
   La colonne des liens était bornée à 60 % de la largeur : « Ressources »
   était coupé et « Savoir-faire » passait sur deux lignes. */
@media(max-width:900px){
  .menu-nav{max-width:none}
}

/* ── Champs de saisie : 16 px minimum ────────────────────────────────────
   Safari sur iPhone zoome la page dès qu'on touche un champ écrit en moins
   de 16 px, et ne dézoome pas en sortant. Formulaire de contact (15 px) et
   recherches des publications et de la veille (13,5 px). */
@media(max-width:900px){
  .cw-field input,.cw-field textarea,.ct-input,
  .pub-search,.vl-search{font-size:16px}
}

/* ── Cibles tactiles ─────────────────────────────────────────────────────
   Filtres des publications et pas « Retour / Continuer » du formulaire :
   ~21 px de haut, trop peu pour un doigt (44 px recommandés). La zone de
   toucher est élargie par un pseudo-élément, le dessin ne bouge pas. */
@media(max-width:900px){
  .pub-filter,.cw-retour,.cw-suivant{position:relative}
  .pub-filter::before,.cw-retour::before,.cw-suivant::before{
    content:'';position:absolute;inset:-12px -8px}
}

/* ═══ SAVOIR-FAIRE ═══════════════════════════════════════════════════════ */
@media(max-width:920px){
  /* Vignettes des quatre clientèles : la colonne gardait sa hauteur
     d'ordinateur (60vh), étirée sur deux rangées de 120 px → 260 px de vide
     entre les deux lignes de vignettes. */
  .xs-tabs{min-height:0}

  /* Prestations : sur ordinateur, la description se pose PAR-DESSUS les
     rangées voisines, qui s'effacent au survol. Au doigt, ni l'un ni l'autre
     ne marchait : le texte recouvrait les intitulés suivants. Sur téléphone
     la description est donc affichée dans le flux, sous son intitulé. */
  .values-list--repli .values-item{min-height:0;align-content:start}
  .values-list--repli .values-d{position:static;margin-top:8px;
    opacity:1;transform:none;pointer-events:auto;transition:none}
  .values-list--repli .values-c,
  .values-list--repli .values-n{transform:none!important}
  .values-list--repli:hover .values-item:not(:hover):not(.is-current){opacity:1}
  .values-list--repli:hover .values-item{border-top-color:rgba(247,245,243,.16)}
  .values-list--repli:hover .values-item:last-child{border-bottom-color:rgba(247,245,243,.16)}
  .values-list--repli{--lo:0!important}

  /* Frise « Notre méthode » : hauteur de l'écran VISIBLE, barres de Safari
     comprises (100vh = écran sans barres, le bas passait dessous). */
  .om-sticky{height:100svh}
}
@media(max-width:600px){
  /* Sur téléphone, 4 colonnes de 78 px ne tiennent pas des intitulés comme
     « Structuration » ou « Financement » : la 4e colonne sortait de l'écran.
     Deux colonnes, rangées resserrées pour que la frise et son détail
     tiennent toujours dans l'écran. */
  .om-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .om-num{margin-bottom:4px}
  .om-t{font-size:15px}
  .om-board{margin-top:clamp(24px,4vh,40px)}
}

/* ═══ RESSOURCES — grille des publications ══════════════════════════════
   En pile, les tuiles perdaient leur hauteur (pub-tiles.css la leur rend
   sur l'accueil, publications.css l'avait oubliée) : date sur l'étiquette
   dans la 2e tuile, tuile « À venir » écrasée à 26 px. */
@media(max-width:820px){
  .pub-grid>.pub-card{min-height:clamp(200px,38vw,280px)}
}

/* ═══ CLIENTS ════════════════════════════════════════════════════════════ */
@media(max-width:920px){
  /* Globe : la règle de base (flex-direction:row, plus bas dans clients.css)
     annulait le repli en colonne ; le globe se partageait la ligne avec le
     titre et tombait à 96 px de large. Borné à 920 px : au-delà, la ligne
     titre + globe tient, et le crantage d'ordinateur s'applique. */
  .cl-map-section{flex-direction:column;align-items:stretch}
  .cl-map-wrap{flex:none;width:100%}
}
@media(max-width:400px){
  /* Tuiles des clientèles : deux colonnes aussi sur les iPhone de 375 à
     400 px (une seule colonne faisait défiler 12 photos pleine largeur,
     environ cinq écrans pour douze intitulés). */
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL SUR TÉLÉPHONE (≤ 600 px) — maquette validée par Alix le 30/09/2026
   (canevas Claude Design « Raise Avocats sur smartphone »).
   Principes : une section = un écran ; textes du site sans réécriture
   (coupes seulement) ; aucune flèche ; vrais boutons à forme visible.
   Les éléments ci-dessous n'existent que pour ce format : masqués ailleurs.
   ═══════════════════════════════════════════════════════════════════════ */
.menu-m,.mbar,.pub-all,.m-rail-nav,.footer-ico,.footer-lbl{display:none}
/* le site affiche tous les <span> de la colonne Contact : règle plus précise */
.footer .footer-col-contact .footer-lbl{display:none}

@media(max-width:600px){

  /* ── Menu plein écran : rubriques, deux boutons, liens légaux centrés ── */
  .menu-inner{flex-direction:column;gap:0;padding:100px var(--pad) 26px}
  .menu-nav{flex:none;justify-content:flex-start}
  .menu-m{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:min(100px,11svh);padding-top:24px}
  .menu-m-btns{display:flex;gap:10px}
  .menu-m-btns a{flex:1 1 0;height:50px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;
    border-radius:999px;font-family:var(--mu);font-size:clamp(10.5px,3.1vw,12px);letter-spacing:.1em;text-transform:uppercase}
  .menu-m-call{border:1px solid rgba(247,245,243,.3);color:var(--cream);font-weight:600}
  .menu-m-call svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
  .menu-m-contact{background:var(--accent);color:var(--navy-3);font-weight:700}
  .menu-m-legal{display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px}
  .menu-m-legal a{min-height:44px;display:flex;align-items:center;font-family:var(--mu);font-size:12.5px;color:rgba(247,245,243,.6)}

  /* ── Barre de contact du bas (accueil) ── */
  body:has(.hblock) .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:480;gap:10px;
    padding:10px 16px max(14px,env(safe-area-inset-bottom));background:rgba(19,27,42,.94);
    border-top:1px solid rgba(247,245,243,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    transform:translateY(110%);transition:transform .45s var(--ease)}
  body:has(.hblock) .nav.scrolled~.mbar{transform:none}
  body:has(.hblock) .nav.scrolled~.mbar.is-away,body.locked .mbar{transform:translateY(110%)}
  .mbar a{flex:0 0 calc((100% - 10px) * .4);height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;
    border-radius:999px;font-family:var(--mu);font-size:clamp(10.5px,3.1vw,12px);letter-spacing:.1em;text-transform:uppercase}
  .mbar-call{border:1px solid rgba(247,245,243,.3);color:var(--cream);font-weight:600}
  .mbar-call svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
  .mbar-contact{flex-basis:calc((100% - 10px) * .6)!important;background:var(--accent);color:var(--navy-3);font-weight:700}

  /* ── Une section = un écran : par la HAUTEUR seulement. Pas de crantage :
     sur iPhone il coupe l'élan du doigt à chaque section (retour d'Alix,
     30/09 : « aucun effet d'entraînement »). Le défilement reste libre. ── */
  html:has(.hblock){scroll-snap-type:none}
  .hblock .hero-scroll{display:none}

  /* ── Héro : photo sur 55 % de l'écran, puis bleu nuit ── */
  #hero.hero{min-height:100svh;height:100svh;padding:0;display:block}
  #hero .hero-slideshow,#hero .hero-snow{top:0;bottom:auto;height:55%}
  #hero .hero-overlay{top:0;bottom:auto;height:calc(55% + 2px);
    background:linear-gradient(180deg,rgba(19,27,42,.60) 0%,rgba(19,27,42,.05) 26%,rgba(19,27,42,.05) 50%,rgba(19,27,42,.72) 78%,#131B2A 100%)}
  #hero .hero-content{position:absolute;left:var(--pad);right:var(--pad);bottom:44px;max-width:none;padding:0}
  #hero .hero-h1{font-size:clamp(26px,8.4vw,34px);line-height:1.1;margin-bottom:22px}
  #hero .hero-tags{margin-bottom:26px}
  /* largeur = celle du bouton de la barre du bas : (écran − 32 px de marges − 10 px d'écart) × 1,5 / 2,5 */
  #hero .hero-cta{display:flex;width:calc((100vw - 42px) * .6);height:48px;box-sizing:border-box;margin:0 auto;padding:0;gap:0;
    justify-content:center;border-radius:999px;background:var(--accent);color:var(--navy-3);
    font-size:clamp(10.5px,3.1vw,12px);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  #hero .hero-cta::before,#hero .hero-cta::after{display:none}
  #hero .hero-cta-circle{display:none}
  /* L'effet de défilement du héro (global.css, « DÉFILEMENT ») fait descendre
     la photo à 45 % de la vitesse et efface le texte : invisible sur ordinateur
     où la photo couvre l'écran, il la faisait glisser SUR le titre ici. */
  #hero .hero-slideshow,#hero .hero-content{transform:none;opacity:1}
  #hero .hero-overlay::after{opacity:0}

  /* ── En-tête commun des sections ── */
  #cabinet,#references,#valeurs,#fondateurs,.hblock--pubs{min-height:100svh;box-sizing:border-box;
    padding:84px var(--pad) 92px;display:flex;flex-direction:column}
  /* Chaque section REMPLIT la hauteur visible (100svh, barres de Safari
     déduites : ~660 px sur iPhone 15, 844 sur ordinateur étroit) : la grille,
     le rail ou la photo prend l'espace restant (flex:1) au lieu d'une hauteur
     calculée pour un seul format d'écran. */

  /* ── 01 · Une pratique… : phrase d'introduction + 2 × 2 photos ── */
  #cabinet .hblock-inner,#cabinet .present-grid{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;padding:0;min-height:0;gap:0}
  /* ombre « rideau » de l'ordinateur au bord haut du bandeau : sur fond uni elle se lit comme un trait */
  #cabinet::before{display:none}
  #cabinet .hb-lead{margin:12px 0 0}
  #cabinet .hb-title,#references .hb-title,#valeurs .hb-title,#fondateurs .hb-title,.hblock--pubs .hb-title{font-size:clamp(22px,7vw,28px);line-height:1.15}
  #cabinet .hb-lead,#cabinet .hb-link,#cabinet .present-right-eyebrow{display:none}
  #cabinet .present-col{flex:none}
  #cabinet .present-right{flex:1 1 auto;display:flex;flex-direction:column;align-self:stretch;margin:0;padding:0;width:100%;max-width:none;min-height:0}
  #cabinet .clientele{flex:1 1 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(105px,1fr));
    gap:10px;margin-top:18px;height:auto;min-height:220px}
  #cabinet .cl-panel{position:relative;flex:none;width:auto;min-width:0;height:auto;min-height:0;
    border-radius:12px;overflow:hidden;background-size:cover;background-position:center}
  #cabinet .cl-panel-scrim{opacity:1;background:linear-gradient(180deg,rgba(19,27,42,.10) 30%,rgba(19,27,42,.88) 100%)}
  #cabinet .cl-panel-body{position:absolute;left:0;right:0;bottom:0;top:auto;padding:16px;transform:none;opacity:1}
  #cabinet .cl-name{margin:0;font-family:var(--ep);font-size:clamp(14.5px,4.4vw,17px);font-weight:400;line-height:1.2;color:var(--cream);
    writing-mode:horizontal-tb;transform:none;white-space:normal}
  #cabinet .cl-desc{display:none}
  #cabinet .cl-more{position:absolute;inset:0;z-index:3;font-size:0;color:transparent;padding:0;margin:0}
  #cabinet .cl-more *,#cabinet .cl-more::before,#cabinet .cl-more::after{display:none}

  /* ── Rails horizontaux (02 et 05) ── */
  #references .refs-grid,.hblock--pubs .pub-grid{display:flex;grid-template:none;height:auto;min-height:0;gap:12px;
    margin:24px calc(-1 * var(--pad)) 0;padding:0 var(--pad);border:0;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none}
  #references .refs-grid::-webkit-scrollbar,.hblock--pubs .pub-grid::-webkit-scrollbar{display:none}
  #references .refs-grid::after,.hblock--pubs .pub-grid::after{content:'';flex:0 0 1px}
  .m-rail-nav{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
  .m-dots{display:flex;align-items:center;gap:6px}
  .m-dots span{width:6px;height:6px;border-radius:3px;background:rgba(247,245,243,.3);transition:width .3s,background .3s}
  .m-dots span.on{width:22px;background:var(--accent)}
  .m-hint{font-family:var(--mu);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,243,.55)}

  /* ── 02 · Un cabinet de référence : cartes-photos, description au toucher ── */
  #references .refsbg-imgs,#references .ref-eyebrow{display:none}
  #references .hblock-inner{flex:1 1 auto;padding:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:none}
  #references .refs-grid{flex:1 1 0;min-height:230px;align-items:stretch}
  #references .ref-col{position:relative;flex:0 0 min(292px,78vw);height:auto;padding:0;
    border:0;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;scroll-snap-align:start;
    cursor:pointer;opacity:1}
  #references .ref-col[data-img="0"]{background-image:url('/assets/refs/bg-0.webp')}
  #references .ref-col[data-img="1"]{background-image:url('/assets/refs/bg-1.webp')}
  #references .ref-col[data-img="2"]{background-image:url('/assets/refs/bg-2.webp')}
  #references .ref-col[data-img="3"]{background-image:url('/assets/refs/bg-3.webp')}
  #references .ref-col::before{content:'';position:absolute;inset:0;width:auto;height:auto;z-index:0;display:block;opacity:1;transform:none;
    background:linear-gradient(180deg,rgba(19,27,42,.15) 0%,rgba(19,27,42,0) 22%,rgba(19,27,42,.55) 50%,rgba(19,27,42,.92) 74%,#131B2A 100%)}
  #references .ref-col::after,#valeurs .values-item::after{content:'';display:block;position:absolute;top:14px;right:14px;z-index:3;
    width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(247,245,243,.55);opacity:1;
    background:linear-gradient(var(--cream),var(--cream)) center/10px 1px no-repeat,
               linear-gradient(var(--cream),var(--cream)) center/1px 10px no-repeat,rgba(19,27,42,.22);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease);pointer-events:none}
  #references .ref-col.is-open::after,#valeurs .values-item.is-current::after{transform:rotate(45deg)}
  #references .refs-head{border:0;padding:0;margin:0}
  #references .ref-inner{position:absolute;inset:0;z-index:1;box-sizing:border-box;padding:24px;display:flex;
    flex-direction:column;justify-content:flex-end;transform:none;background:transparent;transition:background .3s}
  #references .ref-title{margin:0;font-family:var(--ep);font-size:clamp(22px,7vw,28px);font-weight:400;line-height:1.15;color:var(--cream);transform:none;
    text-shadow:0 1px 14px rgba(8,11,18,.55)}
  #references .ref-desc{display:none}
  #references .ref-col.is-open .ref-inner{background:#1B2436}
  #references .ref-col.is-open .ref-title{font-size:clamp(20px,6vw,24px)}
  #references .ref-col.is-open .ref-desc{display:block;margin:14px 0 0;max-width:none;max-height:none;opacity:1;
    visibility:visible;transform:none;font-family:var(--mu);font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(247,245,243,.8)}

  /* ── 03 · Ce qui nous distingue : 2 × 2 photos, le mot seul, description au toucher ── */
  #valeurs.hblock--values{display:flex;flex-direction:column}
  #valeurs .values-photo{display:none}
  #valeurs .values-panel,#valeurs .values-panel-inner{flex:1 1 auto;padding:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:none}
  #valeurs .hb-head{margin:0;padding:0}
  #valeurs .values-list{flex:1 1 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(105px,1fr));
    gap:10px;margin:28px 0 0;padding:0;min-height:220px}
  #valeurs .values-list::before{display:none}
  #valeurs .values-item{position:relative;height:auto;box-sizing:border-box;margin:0;
    padding:16px;border:0;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;opacity:1;cursor:pointer;
    background-size:cover;background-position:center}
  #valeurs .values-item:nth-child(1){background-image:url('/assets/refs/01.webp');background-position:30% 50%}
  #valeurs .values-item:nth-child(2){background-image:url('/assets/refs/02.webp')}
  #valeurs .values-item:nth-child(3){background-image:url('/assets/refs/03.webp')}
  #valeurs .values-item:nth-child(4){background-image:url('/assets/refs/04.webp')}
  #valeurs .values-item::before{content:'';position:absolute;inset:0;width:auto;height:auto;background:linear-gradient(180deg,rgba(19,27,42,.05) 40%,rgba(19,27,42,.88) 100%)}
  #valeurs .values-c{position:relative;z-index:1;min-width:0}
  #valeurs .values-t{margin:0;font-family:var(--ep);font-size:clamp(15.5px,4.9vw,19px);font-weight:400;line-height:1.2;color:var(--cream);transform:none}
  #valeurs .values-d{display:none}
  /* chaque valeur garde SA case (sinon les autres glisseraient quand l'une sort du flux) */
  #valeurs .values-list{position:relative}
  #valeurs .values-item:nth-child(1){grid-area:1/1}
  #valeurs .values-item:nth-child(2){grid-area:1/2}
  #valeurs .values-item:nth-child(3){grid-area:2/1}
  #valeurs .values-item:nth-child(4){grid-area:2/2}
  /* retournée, la carte couvre les quatre cases : la description d'origine y tient entière */
  #valeurs .values-item.is-current{grid-area:1/1/-1/-1;position:absolute;inset:0;z-index:4;height:auto;
    align-items:flex-start;padding:22px}
  #valeurs .values-item.is-current::before{background:#1B2436}
  #valeurs .values-item.is-current .values-t{font-size:clamp(19px,5.6vw,22px);color:var(--blue)}
  #valeurs .values-item.is-current .values-d{display:block;margin:14px 0 0;min-height:0;opacity:1;transform:none;
    font-family:var(--mu);font-size:clamp(13.5px,4vw,15px);font-weight:300;line-height:1.6;color:rgba(247,245,243,.82)}

  /* ── 04 · Le mot des fondateurs : deux portraits verticaux côte à côte ; chaque
     portrait est le bouton de son associé (le nom y est posé), la citation dessous ── */
  #fondateurs{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(140px,1fr) auto;
    grid-template-areas:"num" "title" "media" "quote";text-align:left}
  #fondateurs .fdr-panel,#fondateurs .fdr-inner{display:contents}
  #fondateurs .hb-num{grid-area:num;justify-content:flex-start;justify-self:start}
  #fondateurs .hb-title{grid-area:title;text-align:left;margin-left:0;margin-right:0}
  #fondateurs .fdr-photo{grid-area:media;align-self:stretch;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);gap:10px;
    width:auto;height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:24px 0 0;padding:0;border-radius:0;overflow:visible}
  #fondateurs .fdr-photo picture{position:relative;display:block;height:100%;min-height:0;border-radius:14px;overflow:hidden}
  #fondateurs .fdr-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;clip-path:none;
    transition:filter .45s var(--ease)}
  #fondateurs .fdr-pic[data-who="alix"]{object-position:36.3% 18%}
  #fondateurs .fdr-pic[data-who="julien"]{object-position:48.1% 18%}
  #fondateurs .fdr-pic:not(.is-active){filter:grayscale(1) brightness(.5)}
  #fondateurs .fdr-tabs{grid-area:media;align-self:stretch;position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);gap:10px;
    margin:24px 0 0;padding:0;border:0;border-radius:0;background:none}
  #fondateurs .fdr-pick{height:100%;box-sizing:border-box;margin:0;padding:14px;border:0;border-radius:14px;display:flex;
    align-items:flex-end;justify-content:flex-start;text-align:left;background:linear-gradient(180deg,rgba(19,27,42,0) 55%,rgba(19,27,42,.82) 100%);
    font-family:var(--ep);font-size:clamp(14px,4.2vw,16px);font-weight:400;letter-spacing:0;text-transform:none;color:rgba(247,245,243,.6);
    transition:color .3s}
  #fondateurs .fdr-pick::before,#fondateurs .fdr-pick::after{display:none}
  #fondateurs .fdr-pick.is-active{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(247,245,243,.28)}
  #fondateurs .fdr-quote{grid-area:quote;margin:22px 0 0;padding:0;max-width:none}
  #fondateurs .fdr-mark{display:none}
  #fondateurs .fdr-text{margin:0;font-family:var(--ep);font-size:clamp(14px,min(4.3vw,2.2svh),16.5px);font-weight:300;line-height:1.45;color:var(--cream)}
  #fondateurs .fdr-text::before{content:'“ ';color:var(--accent)}

  /* ── 05 · Dernières publications : rail, étiquette sur la photo, contour fin ── */
  .hblock--pubs .pubs-inner{flex:1 1 auto;padding:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:none}
  .hblock--pubs .hb-head--row{margin:0;padding:0}
  .hblock--pubs .pub-grid{flex:1 1 0;min-height:250px;align-items:stretch}
  .hblock--pubs .hb-head--row .hb-link{display:none}
  .hblock--pubs .pub-grid>*{opacity:1}
  .hblock--pubs .pub-card--soon{display:none}
  .hblock--pubs .pub-cover,.hblock--pubs .pub-card,.hblock--pubs .pub-all{position:relative;flex:0 0 min(292px,78vw);
    height:auto;min-height:0;box-sizing:border-box;margin:0;padding:0;border-radius:16px;overflow:hidden;
    border:1px solid rgba(247,245,243,.16);background:none;display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;grid-row:auto}
  .hblock--pubs .pub-cover-img,.hblock--pubs .pub-card-img{position:relative;inset:auto;flex:0 0 46%;width:100%;height:auto;min-height:0;
    object-fit:cover;transform:none;filter:none}
  .hblock--pubs .pub-cover-scrim,.hblock--pubs .pub-card-scrim,.hblock--pubs .pub-cover-bottom,.hblock--pubs .pub-card-line{display:none}
  .hblock--pubs .pub-card-label{top:14px;left:14px}
  .hblock--pubs .pub-cover-content{position:static;margin:0;padding:18px 20px 20px;transform:none;display:flex;flex-direction:column;gap:10px;background:none}
  .hblock--pubs .pub-card-cat{margin:0;padding:18px 20px 0}
  .hblock--pubs .pub-card-date{font-family:var(--mu);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,243,.6)}
  .hblock--pubs .pub-cover-title,.hblock--pubs .pub-card-title{margin:0;font-family:var(--ep);font-size:clamp(16px,4.9vw,19px);font-weight:400;
    line-height:1.3;color:var(--cream);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
  .hblock--pubs .pub-card-title{padding:10px 20px 20px}
  .hblock--pubs .pub-all{justify-content:flex-end;padding:26px;font-family:var(--ep);font-size:clamp(22px,7vw,28px);font-weight:300;line-height:1.15;color:var(--cream)}
  .hblock--pubs .pub-all em{font-style:normal;color:var(--blue)}

  /* ── Fin de page : « Échangeons » sans bouton, coordonnées étiquetées ── */
  .site-end{min-height:100svh;display:flex;flex-direction:column}
  /* la photo prend tout l'espace libre ; le titre reste sous la barre du haut (60 px) */
  .site-end .cta-prefooter{flex:1 1 0;min-height:210px;padding:72px var(--pad) 30px;box-sizing:border-box;display:flex;align-items:flex-end}
  .cta-pf-heading{font-size:clamp(28px,9vw,36px)}
  .cta-pf-overlay{background:linear-gradient(180deg,rgba(19,27,42,.40) 0%,rgba(19,27,42,.30) 35%,rgba(19,27,42,.88) 80%,#131B2A 100%)}
  .cta-prefooter a.cta-pf-btn{display:none}
  .site-end .footer{flex:0 0 auto}
  .footer{padding:20px var(--pad) 30px;display:flex;flex-direction:column}
  .footer-top{display:block;padding:0;margin:0;border:0}
  .footer-brand,.footer-col,.footer-col-title{display:none}
  .footer-col:has(.footer-col-contact){display:block;margin:0;padding:0}
  .footer-col-contact{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(247,245,243,.1)}
  .footer-col-contact a{display:flex;align-items:center;gap:16px;padding:14px 0;margin:0;border-bottom:1px solid rgba(247,245,243,.1);
    font-family:var(--mu);font-size:16px;font-weight:400;line-height:1.35;color:var(--cream)}
  .footer-col-contact a:not(:has(.footer-val)){display:none}
  .footer-ico{display:block;flex:none;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.4}
  .footer .footer-col-contact .footer-val{display:flex;flex-direction:column;gap:5px;color:var(--cream)}
  .footer .footer-col-contact .footer-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,243,.55)}
  .footer-bottom{margin-top:auto;padding:20px 0 0;border:0;display:flex;flex-direction:column-reverse;align-items:center;gap:4px;text-align:center}
  .footer-bottom>span{font-size:12.5px;color:rgba(247,245,243,.6)}
  .footer-bottom-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:0}
  .footer-bottom-links a{min-height:40px;display:flex;align-items:center;font-size:12.5px;color:rgba(247,245,243,.6)}
  .footer-app{display:none!important}
}

/* Écrans de téléphone COURTS (< 700 px visibles : iPhone SE, 12 Mini, petits
   Android) : la fin de page — « Échangeons » + coordonnées — doit tenir en un
   écran, photo comprise ; on resserre les lignes des coordonnées. */
@media(max-width:600px) and (max-height:700px){
  .site-end .cta-prefooter{min-height:200px;padding-bottom:22px}
  .footer{padding:14px var(--pad) 18px}
  .footer-col-contact a{padding:10px 0;gap:14px}
  .footer .footer-col-contact .footer-val{gap:3px}
  .footer-bottom{padding-top:12px}
  .footer-bottom-links a{min-height:34px}
}
@media(max-width:600px) and (max-height:600px){
  .site-end .cta-prefooter{min-height:176px;padding-top:66px}
}