/* =====================================================================
   madly — ajustements responsive partagés
   Chargé en DERNIER sur toutes les pages : il corrige des problèmes
   mesurés à 375px et 768px, sans toucher au desktop.
   ===================================================================== */

/* ═══ 1. OMBRES À L'ÉCHELLE ═══════════════════════════════════════════
   Les box-shadow sont réglées pour des éléments larges (desktop). Quand
   l'élément rétrécit sur mobile, le flou garde sa taille en pixels et
   devient un halo gris énorme en proportion. Mesuré : stk-shadow à 16%
   de la largeur de la card à 375px (contre 3.6% en desktop), pa-card
   jusqu'à 57%. On réduit le flou sur petit écran — on ne le supprime pas.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* la pile services */
  .stk-shadow{
    box-shadow: 0 8px 20px rgba(11,4,25,.14), 0 -5px 14px rgba(11,4,25,.10) !important;
  }
  /* cards projet (works) */
  .pa-card{
    box-shadow: 0 8px 20px rgba(11,4,25,.16) !important;
  }
  /* aperçu du menu plein écran */
  .menu-preview, .menu-preview-img{
    box-shadow: 0 8px 22px rgba(11,4,25,.18) !important;
  }
  /* about : grille bureaux + cartes tornade */
  .dt-tile, .tor-card{
    box-shadow: 0 8px 20px rgba(11,4,25,.14) !important;
  }
  /* services / pôles : bloc de détail */
  .svc-detail-inner{
    box-shadow: 0 10px 26px rgba(11,4,25,.12) !important;
  }
  /* pôles : flèches et menu de bascule */
  .pole-nav-arrow, .pole-switch-menu{
    box-shadow: 0 4px 12px rgba(11,4,25,.16) !important;
  }
  /* bannières partagées (langue, cookies) — petites pilules ~190px,
     un flou de 24px y faisait encore 13% : on descend à 14px (~7%). */
  .madly-lang-banner, .madly-cookie-banner{
    box-shadow: 0 6px 14px rgba(11,4,25,.24) !important;
  }
}

@media (max-width: 480px){
  /* encore un cran plus discret sur les très petits écrans */
  .stk-shadow{
    box-shadow: 0 6px 16px rgba(11,4,25,.13), 0 -4px 11px rgba(11,4,25,.09) !important;
  }
  .pa-card, .dt-tile, .menu-preview, .menu-preview-img{
    box-shadow: 0 6px 15px rgba(11,4,25,.15) !important;
  }
  /* petits éléments : cartes tornade (~145px) et flèches pôle (~44px) —
     le flou doit rester petit en absolu, sinon il domine l'élément. */
  .tor-card{ box-shadow: 0 5px 12px rgba(11,4,25,.14) !important; }
  .pole-nav-arrow, .pole-switch-menu{ box-shadow: 0 3px 7px rgba(11,4,25,.18) !important; }
}

/* ═══ 2. ZONES TACTILES ═══════════════════════════════════════════════
   Norme d'accessibilité : 44px minimum sous le doigt. Les liens sociaux
   du pied de page mesuraient 94×19px — on rate la cible. On leur donne
   de la hauteur cliquable SANS changer la taille du texte (padding
   vertical + zone d'interaction), pour ne pas déranger la mise en page.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .menu-social a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══ 2b. ZONES TACTILES — ELARGISSEMENT (24/07/2026) ══════════════════
   La regle ci-dessus ne couvrait QUE .menu-social ET uniquement sous 768px :
   un iPad en paysage (1024px, donc tactile) n'etait jamais concerne.
   On bascule sur `pointer: coarse`, qui cible le DOIGT quelle que soit la
   largeur, et on etend aux cibles reellement mesurees sous 44px :
   bouton Menu (20px de haut), liens et mentions du pied de page (18px),
   selecteur de pole, fleches du carrousel et de la tornade.
   On n'agrandit PAS le texte : seulement la surface tactile.
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 1024px){
  .menu-btn,
  .menu-nav a,
  .menu-social a,
  footer a,
  .ft-col a,
  .pole-switch-btn{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* boutons ronds : on garantit les 44px dans les deux dimensions */
  .pole-nav-arrow,
  .tor-arrow,
  .dt-arrow,
  .hero__iconbtn{
    min-width: 44px;
    min-height: 44px;
  }
}


/* ===== MENU OVERLAY MOBILE (audit 27/07/2026) =====
   Bug tactile transverse : a l'ouverture, la page defilait derriere l'overlay
   (scroll-chaining) et, sur ecran court/paysage, le haut du menu etait coupe et
   inatteignable (overlay centre sans scroll interne). */
body.menu-open{ overflow: hidden !important; }          /* stoppe le scroll de fond */
@media (max-width: 768px){
  .menu-overlay{
    overflow-y: auto;                                   /* scroll interne du menu */
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;                            /* plus de contenu coupe en haut */
  }
  .menu-overlay-inner{ margin: auto 0; }                /* recentre quand le contenu est court */
}

/* ===== MENU MOBILE : IMAGE EN HAUT, TEXTES DESSOUS (demande alex 27/07/2026) =====
   Le menu desktop est en row-reverse ; sur les pages home/pole/services/projet il
   restait tel quel sur mobile (image de cote). On empile ici pour tout le site :
   ordre DOM [menu-col, menu-preview] + column-reverse -> l'image (preview) passe
   EN HAUT, la colonne de liens EN DESSOUS. */
@media (max-width: 768px){
  .menu-overlay-inner{ flex-direction: column-reverse !important; gap: 24px !important;
                       align-items: stretch !important; max-width: 100% !important; }
  .menu-preview{ display: block !important; width: 100% !important; max-width: 100% !important;
                 aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important;
                 border-radius: 10px; overflow: hidden; perspective: none !important; flex-shrink: 0; }
  .menu-preview-img{ border-radius: 10px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   BANDE SOUS LE LOGO + MENU (demande alex 14/09/2026)
   Sur telephone, le contenu passait DERRIERE un logo et un menu sans fond :
   illisible des qu'une image claire arrivait dessous. On remet la bande
   translucide de la page contact sur TOUTES les pages, et on l'accorde au
   fond : bande sombre sur section sombre (classe .fond-sombre posee par
   logo-contrast.js), bande champagne sinon.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body nav#mainNav, body nav.nav, body nav.sb-nav {
    transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease !important;
  }
  body nav#mainNav.scrolled, body nav.nav.scrolled, body nav.sb-nav.scrolled,
  body nav#mainNav.bande-mobile, body nav.nav.bande-mobile, body nav.sb-nav.bande-mobile {
    /* verre iOS : on voit le contenu a travers, c'est le flou qui fait la lisibilite
       (demande alex 14/09/2026 : « comme iOS, transparent ») */
    background: rgba(255,254,247,.52) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    box-shadow: 0 .5px 0 rgba(11,4,25,.06) !important;
  }
  body nav#mainNav.scrolled.fond-sombre, body nav#mainNav.bande-mobile.fond-sombre,
  body nav.nav.scrolled.fond-sombre, body nav.nav.bande-mobile.fond-sombre,
  body nav.sb-nav.scrolled.fond-sombre, body nav.sb-nav.bande-mobile.fond-sombre {
    background: rgba(11,12,79,.28) !important;
    box-shadow: 0 .5px 0 rgba(255,254,247,.08) !important;
  }
  /* le menu suit la bande */
  body nav#mainNav.scrolled.fond-sombre .menu-btn-label, body nav#mainNav.bande-mobile.fond-sombre .menu-btn-label,
  body nav.nav.scrolled.fond-sombre .menu-btn-label, body nav.nav.bande-mobile.fond-sombre .menu-btn-label { color: #FFFEF7 !important; }
  body nav.scrolled.fond-sombre .menu-btn-lines span, body nav.bande-mobile.fond-sombre .menu-btn-lines span { background: #FFFEF7 !important; }
  body nav.scrolled:not(.fond-sombre) .menu-btn-label { color: #0B0419 !important; }
  body nav.scrolled:not(.fond-sombre) .menu-btn-lines span { background: #0B0419 !important; }
  body.menu-open nav#mainNav.scrolled, body.menu-open nav.nav.scrolled,
  body.menu-open nav#mainNav.bande-mobile, body.menu-open nav.nav.bande-mobile {
    background: transparent !important; -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important; box-shadow: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   BANDE MENU PERMANENTE (demande alex 15/09/2026)
   « sur toutes les pages on laisse finalement une bande menu top ios glass,
   et la bande reste toujours accrochee en haut ».
   Avant : la bande n'existait qu'au telephone, et seulement apres 60 px de
   defilement. Elle devient permanente, a toutes les largeurs, des le haut de
   page. Le verre s'accorde au fond : sombre sur section sombre (.fond-sombre
   pose par logo-contrast.js), champagne sinon.
   ══════════════════════════════════════════════════════════════════ */
body nav#mainNav, body nav.nav, body nav.sb-nav {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  background: rgba(255,254,247,.52) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  box-shadow: 0 .5px 0 rgba(11,4,25,.06) !important;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease !important;
}
body nav#mainNav.fond-sombre, body nav.nav.fond-sombre, body nav.sb-nav.fond-sombre {
  background: rgba(11,12,79,.28) !important;
  box-shadow: 0 .5px 0 rgba(255,254,247,.08) !important;
}
/* menu ouvert : la bande s'efface pour laisser le plein ecran respirer */
body.menu-open nav#mainNav, body.menu-open nav.nav, body.menu-open nav.sb-nav {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
/* le libelle et les trois traits du menu suivent la bande, a toutes les largeurs */
body nav.fond-sombre .menu-btn-label { color: #FFFEF7 !important; }
body nav.fond-sombre .menu-btn-lines span { background: #FFFEF7 !important; }
body nav:not(.fond-sombre) .menu-btn-label { color: #0B0419 !important; }
body nav:not(.fond-sombre) .menu-btn-lines span { background: #0B0419 !important; }

/* ANNEES RETIREES DES CARTES PROJET (demande alex 15/09/2026) : le portfolio ne date plus
   les projets. Filet CSS en plus du nettoyage du HTML (cartes generees par le CMS). */
.card-head-year, .card-tags .year, .work-card-tags .year { display: none !important; }
.card-tags .sep + .sep { display: none !important; }

/* MEDIAS NON TELECHARGEABLES (demande alex 15/09/2026) : plus de glisser-deposer d'une
   image vers le bureau, plus de panneau « Enregistrer l'image » a l'appui long sur iOS.
   Le clic droit et le menu du lecteur video sont neutralises par anti-telechargement.js. */
img, video, picture, .wk-img, .pj-hero-media {
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}


/* ══════════════════════════════════════════════════════════════════
   BANDE MENU EN VERRE FLOTTANT — TOUTES LES PAGES (alex 17/09/2026)
   Validee en test sur la home puis etendue : plaque de verre depolie detachee
   des bords, liseré 1 px en degrade presque invisible (meme reflet discret en
   haut a gauche et en bas a droite), ombre douce, coins = cartes du site (12 px).
   Passe devant « BANDE MENU PERMANENTE » ci-dessus : le double id / la double
   classe gagnent sur leurs regles !important.
   RESPONSIVE : marge et rembourrage se resserrent par palier ; sur iPhone la
   plaque descend sous l'encoche (safe-area) ; en paysage telephone elle s'aplatit.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bande-rayon: 12px;
  --bande-marge: 16px;
  --bande-pad-v: 12px;
  --bande-pad-h: 44px;
  --bande-h: 72px;          /* hauteur commune a toutes les pages : logo 48 px + rembourrage */
  --bande-lisere: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.03) 65%, rgba(255,255,255,.14) 100%);
}
@media (max-width: 1024px) { :root { --bande-marge: 12px; --bande-pad-v: 10px; --bande-pad-h: 20px; --bande-h: 64px; } }
@media (max-width: 720px)  { :root { --bande-marge: 10px; --bande-pad-v: 8px;  --bande-pad-h: 16px; --bande-h: 60px; } }

html body nav#mainNav#mainNav, html body nav.nav.nav, html body nav.sb-nav.sb-nav {
  top: max(var(--bande-marge), env(safe-area-inset-top, 0px)) !important;
  left: var(--bande-marge) !important;
  right: var(--bande-marge) !important;
  width: auto !important;
  padding: var(--bande-pad-v) var(--bande-pad-h) !important;
  /* meme hauteur partout : certaines pages (projets, services) laissaient le logo deborder */
  min-height: var(--bande-h) !important; height: auto !important;
  display: flex !important; align-items: center !important;
  box-sizing: border-box !important;
  border-radius: var(--bande-rayon) !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  box-shadow: 0 10px 30px rgba(11,4,25,.09), 0 1px 2px rgba(11,4,25,.05) !important;
  transition: background .35s ease, box-shadow .35s ease !important;
}
/* le liseré : anneau de 1 px masque (un border CSS ne sait pas faire de degrade avec des coins arrondis) */
html body nav#mainNav#mainNav::before, html body nav.nav.nav::before, html body nav.sb-nav.sb-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: var(--bande-lisere);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .35s ease;
}
/* sur une section sombre : verre plus fume, liseré encore plus discret */
html body nav#mainNav#mainNav.fond-sombre, html body nav.nav.nav.fond-sombre, html body nav.sb-nav.sb-nav.fond-sombre {
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.26) !important;
}
html body nav#mainNav#mainNav.fond-sombre::before, html body nav.nav.nav.fond-sombre::before,
html body nav.sb-nav.sb-nav.fond-sombre::before { opacity: .7; }
/* menu plein ecran ouvert : la plaque s'efface */
html body.menu-open nav#mainNav#mainNav, html body.menu-open nav.nav.nav, html body.menu-open nav.sb-nav.sb-nav {
  background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body.menu-open nav#mainNav#mainNav::before, html body.menu-open nav.nav.nav::before,
html body.menu-open nav.sb-nav.sb-nav::before { opacity: 0; }
/* pages projet : le bouton « retour aux projets » se cale sur le rembourrage de la plaque */
html body nav.nav.nav .nav-back { right: var(--bande-pad-h) !important; }
/* telephone en paysage : peu de hauteur, la plaque s'aplatit */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --bande-marge: 6px; --bande-pad-v: 4px; --bande-pad-h: 16px; --bande-h: 44px; }
}


/* ══════════════════════════════════════════════════════════════════
   BOUTON « RETOUR AUX PROJETS » EN VERRE (alex 17/09/2026)
   Remplace la pilule au degrade madly : le bouton se fond dans la barre de verre,
   un reflet blanc monte de gauche (quasi transparent) vers la droite (plus lumineux),
   meme liseré en degrade presque invisible que la barre. Le texte suit le verdict de
   la barre : clair sur verre fume, encre sur verre clair.
   ══════════════════════════════════════════════════════════════════ */
html body nav.nav.nav .nav-back.nav-back {
  /* verre SANS couleur (alex 17/09/2026) : seulement un reflet blanc qui s'eclaircit vers la droite */
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.50) 100%) !important;
  color: #0B0419 !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(11,4,25,.10) !important;
  overflow: visible !important;
  transition: background .3s ease, box-shadow .3s ease, color .3s ease !important;
}
html body nav.nav.nav .nav-back.nav-back::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,.30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* le texte suit la zone SOUS LE BOUTON (classe .sur-sombre posee par logo-contrast.js),
   pas celle sous le logo : a gauche et a droite, le fond peut differer */
html body nav.nav.nav .nav-back.nav-back.sur-sombre { color: #FFFEF7 !important; }
html body nav.nav.nav .nav-back.nav-back svg { color: currentColor !important; stroke: currentColor !important; }
html body nav.nav.nav .nav-back.nav-back:hover,
html body nav.nav.nav .nav-back.nav-back:focus-visible {
  background: linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.66) 100%) !important;
  box-shadow: 0 10px 26px rgba(11,4,25,.16) !important;
}


/* « retour aux projets » (alex 17/09/2026) : le libelle etait coupe en deux blocs dans un
   inline-flex -> l'ecart du flex s'ajoutait a l'espace et doublait le blanc entre « retour »
   et « aux ». Un seul bloc desormais, et en minuscules. */
html body nav.nav.nav .nav-back.nav-back { text-transform: none !important; letter-spacing: .01em !important; }