/**------- ivars&ballet - remaster BENIA. Noir / blanc / bleu, une page, zéro dépendance. -------*/
:root {
  --blue: #2196F3;            /* bandeaux + accents (bleu du logo) */
  --neon: #4FC3F7;            /* survols néon + laser */
  --bg: #000;
  --panel: #0d0f12;
  --nav-h: 0px;                        /* plus de barre en bas (menu passe en haut) */
  --hd-h: calc(74px * var(--k, 1));    /* hauteur VISUELLE du menu (74 design, comme en bas) */
  /* ARTBOARD : écran géant → site centré à 1920 max (bandes noires) ; petit écran → plein écran */
  --site-w: 1920px;
  --gut: max(0px, calc((100vw - var(--site-w)) / 2));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(74px * var(--k, 1)); scroll-snap-type: y proximity; }   /* bandes bleues a fleur du BAS du menu + aimant doux */
body {
  background: var(--bg); color: #fff;
  font-family: 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/**------- LOADING : logo + porte silhouettes + ligne % -------*/
#loading {
  position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
.ld-box { text-align: center; }
.ld-door { height: min(52vh, 480px); width: auto; margin: 0 auto 18px; }
.ld-logo { font-size: clamp(38px, 6vw, 64px); font-weight: 600; letter-spacing: 1px; }
.ld-logo span { color: var(--blue); }
#mTiles, .ld-sil, #mFoot, #cmViewer, .ct-form-t, #mFilter { display: none; }
.al-head .lb-cat, .al-head .lb-dept, .al-head .lb-city, .al-head .lb-year { display: none !important; }   /* tout est dans le popup FILTRE (bat .al-head label) */
#mFilterBtn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff;
  padding: 6px 18px; border-radius: 4px; font-size: 15px; letter-spacing: 1px; }
#mFilterBtn svg { width: 17px; height: 17px; }
#mFilter.show { display: flex; flex-direction: column; position: fixed; z-index: 60;
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(940px, 92vw); height: min(700px, 76vh);
  background: #101317; border: 1px solid var(--blue); border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
#mFilterBody { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 10px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px; align-items: start; }
.mf-t { color: var(--blue); font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.mf-c { display: flex; align-items: center; gap: 10px; color: #fff; padding: 5px 2px; font-size: 14.5px; }
.mf-c input { width: 17px; height: 17px; accent-color: var(--blue); }
.mf-foot { display: flex; gap: 12px; padding: 12px 16px; background: #0a0d10; border-radius: 0 0 8px 8px; }
.mf-foot button { flex: 1; padding: 11px; font-size: 15px; letter-spacing: 1px; border-radius: 4px; }
#mfReset { background: #1c232b; color: #cfd6dd; }
#mfOk { background: var(--blue); color: #fff; }
.ld-logo img { height: 48px; width: auto; display: block; margin: 0 auto; }   /* png 39px natif : upscale limite pour rester net */
.ld-track { position: relative; height: 4px; background: #16181c; margin-top: 10px; }
.ld-bar { height: 100%; width: 0; background: var(--blue); transition: width .18s ease; box-shadow: 0 0 12px var(--blue); }
.ld-pct { position: absolute; right: -8px; top: 8px; transform: translateX(100%); font-size: 13px; color: #cfd6dd; }

/**------- artboard centré : contenu + éléments fixes calés sur la planche -------*/
#snap { margin: 0 var(--gut); }   /* même référence vw que navbar/topbar (pas de décalage scrollbar) */
.ov { max-width: var(--site-w); margin: 0 auto; left: var(--gut); right: var(--gut); }

/**------- barre haute réseaux -------*/
/* bande NOIRE fixe du haut : élément de la page - les ancres s'arrêtent dessous, les icônes restent dessus */
#topstrip { position: fixed; top: 0; left: var(--gut); right: var(--gut); height: 54px; background: #000; z-index: 39; }
#topbar { display: none; }
.soc { width: 38px; height: 38px; background: var(--blue); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.soc svg { width: 20px; height: 20px; fill: #fff; }
.soc img { width: 20px; height: 20px; display: block; }
.soc:hover { filter: brightness(1.15); }

/**------- sections plein écran + snap -------*/
/* hauteur = max(design, écran) : layout stable calé en haut, l'excédent part en noir en bas →
   la section suivante ne dépasse JAMAIS dans l'écran courant */
.screen { min-height: max(calc(1100px * var(--k, 1)), 100vh); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; padding-bottom: var(--nav-h); overflow: hidden; }
#accueil.screen { min-height: max(calc(1150px * var(--k, 1)), 100vh); }
#communication.screen { min-height: max(calc(1050px * var(--k, 1)), 100vh); }
/* le contenu reste calé en HAUT (base fixe), jamais redistribué par la hauteur d'écran */
#communication.screen, #contact.screen { justify-content: flex-start; }
.cm-team { flex: none; height: calc(560px * var(--k, 1)); }
.cm-press { flex: none; height: calc(230px * var(--k, 1)); }
.ct-map { flex: none; height: calc(454px * var(--k, 1)); }
.ct-grid { flex: none; }
.band {
  background: var(--blue); color: #fff; font-size: 20px; letter-spacing: 1px;
  padding: 6px 14px; font-weight: 600; flex: none;
}
.band .b1 { color: #0b2545; }

/**------- ACCUEIL : hero slider -------*/
#accueil { padding-bottom: 0; }
#heroSlides { position: absolute; left: 0; right: 0; top: var(--hd-h); bottom: 0; margin: auto; overflow: hidden; }   /* sous le header, jusqu'en bas */
.hs { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.hs.on { opacity: 1; }
/* voile discret : adoucit les photos upscalées plein écran (réglable) */
#heroSlides::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .38) 100%); }
#heroDots { position: absolute; transform: translateX(-50%); display: flex; gap: 26px; z-index: 5; }   /* collé au haut du carrousel (JS) */
#heroDots .d { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .85; }
#heroDots .d.on { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
#heroCaption {
  position: absolute; z-index: 5;
  background: rgba(0, 0, 0, .55); padding: 8px 16px; font-size: clamp(15px, 1.8vw, 22px);
}   /* collé au bas du carrousel (JS) */

/**------- PROJETS : menu + mosaïque -------*/
.pj-wrap { flex: 1; display: grid; grid-template-columns: 1fr; gap: 4px; padding: 4px; min-height: 0; grid-template-rows: auto 1fr; }
/* 3 liens à l'HORIZONTALE : 1er à gauche, dernier à droite (même distance en miroir = celle
   entre le 1er lien et la barre bleue, 18px), celui du centre au milieu */
.pj-menu { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 18px 6px; }   /* barre bleue↔liens↔images : resserre (demande Redha) */
.pj-menu .pj-link:nth-child(1) { justify-self: start; }
.pj-menu .pj-link:nth-child(2) { justify-self: center; }   /* pile au MILIEU, quelle que soit la largeur des voisins */
.pj-menu .pj-link:nth-child(3) { justify-self: end; }
.pj-link { color: #fff; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: 1px; padding: 6px 2px; border-bottom: 1px solid #1c2733; text-align: center; transition: color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pj-link::first-letter { color: var(--blue); }
/* hover = INVERSION : texte bleu, 1re lettre blanche, trait du bas néon très fin */
.pj-link:hover { color: var(--blue); border-bottom-color: var(--neon); box-shadow: 0 6px 10px -8px var(--neon); }
.pj-link:hover::first-letter { color: #fff; }
/* CANEVAS ABSOLU : coordonnées fixes dans l'artboard → identiques sur TOUS les écrans
   (la compo précédente dépendait de la hauteur du viewport → cassait sur le 2e écran) */
#mosaic { grid-column: 1 / -1; grid-row: 2; position: relative; height: 1000px; }   /* hauteur pilotee par JS (echelle) */
#mosaic .tile { position: absolute; overflow: hidden; background: #0a0c0f; }
#mosaic .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .35s ease; }
#mosaic .tile .cap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font-size: clamp(13px, 1.1vw, 18px); opacity: 0; transition: opacity .35s ease;
  background: rgba(0, 0, 0, .55);
}
#mosaic .tile:hover img { filter: brightness(.45); transform: scale(1.04); }
#mosaic .tile:hover .cap { opacity: 1; }

/**------- COMMUNICATION -------*/
.cm-team { flex: 1.2; overflow: hidden; min-height: 0; }
.cm-team img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cm-press { flex: 1; display: flex; align-items: center; gap: 6px; padding: 12px 6px; min-height: 0; overflow: hidden; }   /* rien ne dépasse (gauche/droite coupées) */
#pressTrack { flex: 1; display: flex; gap: 14px; overflow: hidden; height: 100%; align-items: stretch; }
.pcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }   /* remplit la bande de bout en bout */
.pcard .pv { width: 100%; flex: 1; background: #fff; border: 1px solid #223; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard .pv img { width: 100%; height: 100%; object-fit: cover; object-position: top; }   /* page 1 du PDF */
.pcard figcaption { font-size: 11px; color: #cfd6dd; line-height: 1.35; }
.pr-arrow { color: var(--blue); font-size: 30px; padding: 0 8px; flex: none; }
.pr-arrow:hover { color: var(--neon); text-shadow: 0 0 10px var(--neon); }

/**------- CONTACT -------*/
.ct-map { flex: 1; min-height: 0; overflow: hidden; display: block; }
#ctMap { background: #1a1c1f; }
.map-logo {
  background: #0c0e11; color: #fff; border: 1px solid #2a323c; padding: 6px 12px;
  font-size: 18px; font-weight: 600; white-space: nowrap; transform: rotate(-8deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5); cursor: pointer;
}
.map-logo span { color: var(--blue); }
/* formulaire A DROITE (aligne au bord droit de la carte), coordonnees a gauche */
.ct-grid { flex: 1.2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; padding: 18px 14px 18px 4vw; min-height: 0; }   /* droite 14px = le form demarre au bord de la carte */
#ctForm { display: flex; flex-direction: column; gap: 12px; order: 2; }
#ctForm input, #ctForm textarea {
  background: transparent; color: #fff; border: 2px solid var(--blue); border-radius: 8px;
  padding: 10px 12px; font-size: 15px; font-family: inherit;
}
#ctForm input { width: 100%; }
#ctForm textarea { flex: 1; resize: none; min-height: 110px; }
.ct-foot { display: flex; align-items: center; gap: 12px; }
#ctStatus { flex: 1; font-size: 13px; color: var(--neon); }
.ct-foot button { background: var(--blue); color: #fff; padding: 10px 34px; font-size: 15px; letter-spacing: 1px; }
.ct-foot button:hover { filter: brightness(1.15); }
.ct-info { display: flex; flex-direction: column; gap: 14px; justify-content: center; order: 1;
  border-right: 1px solid rgba(255, 255, 255, .14);   /* séparation verticale très subtile (form à droite) */
  padding-right: 34px; margin-right: 26px; }
.ct-info .ct-addr { font-size: 20px; }        /* graduel : adresse > tél > emails */
.ct-info .ct-tel { font-size: 17.5px; }
.ct-info .ct-mail, .ct-info .ct-tech { font-size: 15.5px; }
.ct-info .ic { width: 20px; height: 20px; fill: #fff; vertical-align: -4px; margin-right: 10px; }
.ct-info .ic-at { display: inline-block; text-align: center; color: #fff; font-size: 20px; font-weight: 600; vertical-align: -2px; height: auto; }
.ct-info .ct-em { color: inherit; }
.ct-info .ct-em:hover { color: var(--neon); }
.ct-info .at { color: var(--blue); font-weight: 600; }   /* le @ au bleu du site */
footer { text-align: center; padding: 12px; color: #cfd6dd; font-size: 14px; flex: none; }
footer .amp { color: var(--blue); }

/**------- NAV FIXE BAS : timeline + néon + laser + sous-menu -------*/
#navbar {
  /* artboard : interieur gele en design 1920px, la barre entiere est scalee -> base flex + offsets
     coherents a TOUTE resolution (le chrome px fixes ne derive plus quand k<1) */
  position: fixed; left: var(--gut); top: 0; width: 1920px; height: 74px; z-index: 50;
  transform-origin: 0 0; transform: scale(var(--k, 1));
  background: rgba(0, 0, 0, .92); display: flex; align-items: center; gap: 18px; padding: 0 18px;
  border-bottom: 1px solid #10151b;
}
.nv-logo { padding: 6px 14px; font-size: 24px; font-weight: 600; flex: none; cursor: pointer; }   /* logo pose sur le noir de la barre (demande Redha) */
.nv-logo span { color: var(--blue); }
.nv-logo img { height: 39px; width: auto; display: block; }
.nv-tools { display: flex; align-items: center; gap: 14px; flex: none; }
#langFlag, #langFlagM { width: 34px; height: 23px; border-radius: 3px; overflow: hidden; line-height: 0; border: 1px solid #2a323c; flex: none; }
#langFlag svg, #langFlagM svg { width: 100%; height: 100%; display: block; }
.nv-ic svg { width: 22px; height: 22px; fill: #fff; }
/* 3 carres du header (meme taille que les anciens .soc 38px) : contour bleu, interieur noir,
   rendus PAR-DESSUS la ligne blanche (la ligne passe dessous) */
.hd-sq { display: flex; gap: 8px; flex: none; position: relative; z-index: 2; align-self: flex-start; margin-top: 7px; }   /* centre des carres = y26 : la ligne passe PILE au centre */
.hd-sq a { width: 38px; height: 38px; border: 1px solid var(--blue); border-radius: 3px; background: #000; display: flex; align-items: center; justify-content: center; transition: background .18s; }
.hd-sq a:hover { background: var(--blue); }
.hd-sq svg { width: 24px; height: 24px; fill: #fff; }
.hd-sq img { width: 24px; height: 24px; display: block; }
/* menu TELEPHONE : glassmorphism identique au sous-menu AGENCE, les 2 numeros dedans */
#telMenu {
  position: fixed; z-index: 49;
  background: rgba(90, 90, 90, .38); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-radius: 8px; padding: 16px 22px 14px; display: none; flex-direction: column; gap: 4px;
}
#telMenu.show { display: flex; }
/* menu telephone : SANS trait blanc (ni ligne interne ni tige) - demande Redha */
#telStem { display: none; }
#telMenu a, #telMenu .tm-fax { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 16px; letter-spacing: 1px; padding: 7px 4px; position: relative; }
#telMenu .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none; }
#telMenu a:hover { color: var(--neon); text-shadow: 0 0 10px var(--neon); }
#telMenu a:hover .dot { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.nv-ic:hover svg { fill: var(--neon); }
.nv-line-wrap { position: static; flex: 1; height: 100%; pointer-events: none; }   /* deplace par la config (x-320) : ne doit JAMAIS avaler les clics logo/tools */
/* la ligne = SVG plein navbar : BLANCHE, sort de l'écran à droite, vire sous le logo à gauche */
#nvSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#nvPath { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .55)); }
#nvLaserPath {
  fill: none; stroke: var(--neon); stroke-width: 5; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 20px var(--neon));
  transition: opacity .2s ease;
}
/* la couche items couvre TOUTE la barre : sans pointer-events none elle avale les clics
   du logo/drapeau/tel/pin situes dessous (zone transparente = piege type parallaxe benia) */
.nv-items { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-start; pointer-events: none; }
.nv-item { pointer-events: auto; }
.nv-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 19px; color: #fff; }
.nv-item .dot { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid #0a0c0f; transition: all .25s ease; }
.nv-item .lbl { font-size: 14px; letter-spacing: 1px; transition: all .25s ease; }
.nv-item:hover .lbl, .nv-item.on .lbl { color: var(--neon); text-shadow: 0 0 12px var(--neon); }
.nv-item:hover .dot, .nv-item.on .dot { background: var(--blue); box-shadow: 0 0 12px var(--neon); }
/* sous-menu AGENCE : glassmorphism au-dessus du point */
#agMenu {
  position: fixed; z-index: 49;
  background: rgba(90, 90, 90, .38); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-radius: 8px; padding: 16px 22px 14px; display: none; flex-direction: column; gap: 4px;
}
#agMenu.show { display: flex; }
/* ligne verticale interne : relie les points du sous-menu… */
#agMenu::before { content: ''; position: absolute; left: 31px; top: 0; bottom: 14px; width: 2px; background: #fff; }   /* touche la tige qui descend du menu (x=32) */
/* …et la TIGE descend du panneau jusqu'au point AGENCE de la nav (continuité, hauteur posée en JS) */
#agStem { position: absolute; left: 31px; bottom: 100%; width: 2px; height: 0; background: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); }   /* la tige MONTE vers le point (menu en haut) */
#agMenu button { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 16px; letter-spacing: 1px; padding: 7px 4px; position: relative; }
#agMenu button .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none; }
#agMenu button:hover { color: var(--neon); text-shadow: 0 0 10px var(--neon); }
#agMenu button:hover .dot { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
/* laser vertical du sous-menu (petit frère du laser horizontal) */
#agLaser {
  position: absolute; left: 29px; width: 6px; height: 36px; border-radius: 3px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 12px var(--neon); pointer-events: none; transition: opacity .2s ease;
}

/**------- POPUP COMMUNICATION SPECIAL (annonces panel admin) -------*/
#ovAnn { background:
  linear-gradient(180deg, #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(0deg,   #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(90deg,  #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(270deg, #000 0, rgba(0,0,0,0) 20%),
  #2a2b2e;
  padding: 26px 3vw 30px; }
#ovAnn .an-head { color: var(--blue); font-size: 20px; font-weight: 700; letter-spacing: 2px; }
#ovAnn h2 { color: #fff; font-size: clamp(26px, 3vw, 44px); margin: 18px 0 22px; }   /* titre article > texte */
#ovAnn .an-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3vw; flex: 1; min-height: 0; }
#ovAnn #anTexte { color: #fff; overflow-y: auto; min-height: 0; font-size: clamp(15px, 1.15vw, 18.5px); line-height: 1.6; }
#ovAnn #anTexte p { margin-bottom: 14px; }
#ovAnn .an-im { min-height: 0; display: flex; align-items: center; justify-content: center; }
#ovAnn .an-im img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* carte annonce dans la piste presse : cliquable, image + titre + date */
.an-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.an-card img { width: 100%; height: 203px; object-fit: cover; display: block; }
.an-card .an-card-t { color: #fff; font-weight: 700; font-size: 15px; margin-top: 8px; }
.an-card .an-card-d { color: var(--neon); font-size: 12.5px; margin-top: 2px; }
.an-card:hover .an-card-t { color: var(--neon); }

/**------- MOYENS (PC) : image en grand en haut, texte en bas centré -------*/
.ag-moy { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ag-moy img { max-width: 100%; max-height: 52vh; width: auto; border: 2px solid #0c0c0e; filter: grayscale(1); }
.ag-moy p { max-width: 1100px; margin: 0 auto; text-align: center; }

/**------- OVERLAYS (agence / tous projets / fiche) -------*/
/* popup ENTRE la bande noire du haut (réseaux) et le menu du bas - les deux restent visibles */
.ov { position: fixed; top: var(--hd-h); bottom: 0; left: var(--gut, 0px); right: var(--gut, 0px); z-index: 45; background: #000; display: none; flex-direction: column; }   /* PLEIN ECRAN sous le nouveau menu */
/* menu du bas : NOIR OPAQUE quand un popup est ouvert */
body.ov-open #navbar { background: #000; }
.ov.show { display: flex; }
.ov-x {
  position: absolute; top: 14px; right: 16px; z-index: 5; width: 40px; height: 40px;
  border: 2px solid #fff; color: #fff; font-size: 18px; border-radius: 4px;
}
.ov-x:hover { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 12px var(--neon); }

/* agence : fond GRIS foncé (mockups), layouts par volet, nav ◀/▶ chaînée */
/* degrade subtil : noir aux 4 bords fondant vers le gris a ~20% (demande Redha, agence only) */
#ovAgence { background:
  linear-gradient(180deg, #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(0deg,   #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(90deg,  #000 0, rgba(0,0,0,0) 20%),
  linear-gradient(270deg, #000 0, rgba(0,0,0,0) 20%),
  #2a2b2e; }
.ag-panel { flex: 1; display: flex; flex-direction: column; padding: 34px 3vw 56px; min-height: 0; }
.ag-panel h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: 1px; margin-bottom: 20px; }
.ag-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 10px; display: flex; flex-direction: column; }
.ag-body > * { margin-top: auto; margin-bottom: auto; width: 100%; }   /* centre vertical TOUS les volets, safe en overflow */
.ag-body::-webkit-scrollbar { width: 6px; }
.ag-body::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 3px; }
#alGrid { scrollbar-color: var(--blue) #14181d; }
#alGrid::-webkit-scrollbar { width: 10px; }
#alGrid::-webkit-scrollbar-track { background: #14181d; }
#alGrid::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 5px; }
.ag-body p { font-size: clamp(14.5px, 1.15vw, 18.5px); line-height: 1.55; margin-bottom: 14px; }
/* layout PRÉSENTATION / MOYENS : texte large + image droite */
/* photo bornee a la hauteur VISIBLE du panneau (jamais coupee, jamais de scroll pour la voir) ;
   le texte scrolle dans SA colonne si besoin */
.ag-cols { display: grid; grid-template-columns: 2.2fr 1fr; gap: 3vw; height: 100%; }
.ag-cols > div:first-child { overflow-y: auto; min-height: 0; padding-right: 8px; display: flex; flex-direction: column; }
.ag-cols > div:first-child > p:first-child { margin-top: auto; }    /* texte centre vertical face a la photo… */
.ag-cols > div:first-child > p:last-child { margin-bottom: auto; }  /* …safe : redevient 0 si le texte deborde */
.ag-cols .im { min-height: 0; display: flex; align-items: center; justify-content: center; }
.ag-cols .im img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); border: 2px solid #0c0c0e; }
/* layout HISTORIQUE : centré verticalement (titre à part), fondateurs cadre bleu à gauche,
   colonne droite = les 2 photos DANS un carré bleu */
.ag-hist { display: grid; grid-template-columns: 2.1fr 1fr; gap: 2.4vw; align-items: center; }
.ag-hist .im-founders { float: left; width: min(30vw, 460px); margin: 0 22px 10px 0; border: 2px solid var(--blue); }
.ag-hist .im-side { display: flex; flex-direction: column; border: 2px solid var(--blue); }   /* cadre COLLE a l'image (demande Redha) */
.ag-hist .im-side img { width: 100%; border: 0; }
/* layout ÉQUIPE : photo pleine largeur + texte dessous */
/* EQUIPE kifkif mockup : cartes grises par fonction, portraits, noms dessous */
.ag-eq { display: flex; flex-direction: column; gap: 26px; padding: 4px 2px 14px; }
.eq-card { background: #b9bcbe; border-radius: 8px; padding: 24px 30px 26px; }
.eq-title { color: var(--blue); font-size: 20px; font-weight: 600; margin-bottom: 20px; }
.eq-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 42px; }
.eq-m { margin: 0; text-align: center; }
.eq-m img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.eq-m figcaption { color: #101214; font-size: 16px; font-weight: 600; margin-top: 12px; line-height: 1.3; }
.eq-role { display: block; font-size: 13px; font-weight: 400; color: #33383c; margin-top: 2px; }
.ag-prev { position: absolute; left: 3vw; bottom: 18px; color: #fff; font-size: 16px; letter-spacing: 1px; }
.ag-next { position: absolute; right: 3vw; bottom: 18px; color: #fff; font-size: 16px; letter-spacing: 1px; }
.ag-prev:hover, .ag-next:hover { color: var(--neon); text-shadow: 0 0 10px var(--neon); }

/* tous les projets */
.al-head { display: flex; align-items: center; gap: 2.4vw; padding: 16px 3vw; flex-wrap: wrap; }
.al-head h2 { font-size: 24px; letter-spacing: 1px; margin-right: auto; }
.al-head .b1 { color: var(--blue); }
.al-head label { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.al-head select { background: #fff; color: #111; border: 0; padding: 6px 8px; font-size: 14px; min-width: 130px; }
#alGrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 3vw; padding: 10px 3vw 30px; align-content: start; }
#alGrid::-webkit-scrollbar { width: 8px; }
#alGrid::-webkit-scrollbar-thumb { background: #2c3742; border-radius: 4px; }
.al-card { text-align: center; }
.al-card .ph { aspect-ratio: 4/3; overflow: hidden; background: #0a0c0f; }
.al-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s ease; }
.al-card:hover img { transform: scale(1.05); filter: brightness(.6); }
.al-card figcaption { padding: 8px 4px 0; font-size: 14px; border-bottom: 1px solid #202832; padding-bottom: 14px; }

/* fiche projet */
.fi-back { position: absolute; top: 18px; left: 3vw; color: var(--blue); font-size: 17px; z-index: 5; }
.fi-back:hover { color: var(--neon); }
.fi-main { flex: 1; display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: 2vw; padding: 64px 3vw 8px; min-height: 0; }
.fi-desc { overflow-y: auto; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55; padding-right: 12px; }
.fi-desc::-webkit-scrollbar { width: 5px; }
.fi-desc::-webkit-scrollbar-thumb { background: var(--blue); }
.fi-photo { position: relative; overflow: hidden; background: #06080b; display: flex; align-items: center; }
.fi-photo img { width: 100%; height: 100%; object-fit: contain; }
/* plein cadre (infos cachees ou clic image) : l'image REMPLIT le panneau - plus de barres noires */
.fi-main.noinfo .fi-photo img, .fi-main.full .fi-photo img { object-fit: cover; }
.fi-wm { position: absolute; top: 12px; left: 14px; background: rgba(10, 12, 15, .65); padding: 3px 10px; font-size: 17px; }
.fi-wm span { color: var(--blue); }
.fi-wm img { height: 24px; width: auto; display: block; }   /* filigrane photo : vrai logo, discret */
.fi-tech { font-size: clamp(13px, 1.05vw, 16px); line-height: 2; overflow-y: auto; }
.fi-tech b { font-weight: 600; }
.fi-toggle { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 15px; padding: 8px 3vw; justify-content: flex-end; margin-right: 22vw; ; margin-left: auto; margin-right: 3vw}   /* sous le coin droit de la photo (mockup) */
.fi-toggle .sq { width: 15px; height: 15px; background: #fff; display: inline-block; position: relative; }
/* vraie checkbox : coche au bleu du site quand les infos sont affichees */
.fi-toggle .sq::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid var(--blue); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.fi-main.noinfo + .fi-toggle .sq::after { display: none; }
.fi-toggle:hover { color: var(--neon); }
/* infos cachees = l'image prend TOUTE la place (meme effet que le clic image) */
.fi-main.noinfo { grid-template-columns: 1fr; gap: 0; }
.fi-main.noinfo .fi-desc, .fi-main.noinfo .fi-tech { display: none; }
/* clic sur l'image : plein cadre - l'image s'etend sur les 3 colonnes */
.fi-main.full { grid-template-columns: 1fr; gap: 0; }   /* photo seule = colonne unique (display:none sort les textes du flux grid) */
.fi-main.full .fi-desc, .fi-main.full .fi-tech { display: none; }
.fi-photo { cursor: zoom-in; }
.fi-main.full .fi-photo { cursor: zoom-out; }
.fi-strip { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; height: 120px; flex: none; }
#fiThumbs { flex: 1; display: flex; gap: 8px; overflow: hidden; height: 100%; }
#fiThumbs img { height: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: .75; cursor: pointer; }
#fiThumbs img.on, #fiThumbs img:hover { opacity: 1; outline: 2px solid var(--blue); }
.fi-strip button { color: var(--blue); font-size: 26px; padding: 0 6px; }

/**------- ÉDITEUR (?edit=1) : sélection, poignées, panneau -------*/
body.editing [data-edit] { outline: 1px dashed rgba(79, 195, 247, .35); outline-offset: -1px; }
body.editing [data-edit]:hover { outline: 2px dashed var(--neon); cursor: move; }
#edSel { position: fixed; z-index: 998; border: 2px solid var(--neon); pointer-events: none; box-shadow: 0 0 14px rgba(79, 195, 247, .35); }
#edSel .h { position: absolute; width: 12px; height: 12px; background: var(--neon); border: 2px solid #000; pointer-events: auto; }
#edSel .h.nw { left: -7px; top: -7px; cursor: nwse-resize; } #edSel .h.ne { right: -7px; top: -7px; cursor: nesw-resize; }
#edSel .h.sw { left: -7px; bottom: -7px; cursor: nesw-resize; } #edSel .h.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
#edSel .h.e { right: -7px; top: calc(50% - 6px); cursor: ew-resize; } #edSel .h.w { left: -7px; top: calc(50% - 6px); cursor: ew-resize; }
#edSel .h.n { top: -7px; left: calc(50% - 6px); cursor: ns-resize; } #edSel .h.s { bottom: -7px; left: calc(50% - 6px); cursor: ns-resize; }
#edPanel {
  position: fixed; top: 12px; left: 12px; z-index: 999; width: 250px;
  background: rgba(13, 15, 18, .96); border: 1px solid var(--blue); border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; color: #dfe6ec;
}
#edPanel h3 { font-size: 14px; color: var(--neon); margin-bottom: 8px; letter-spacing: 1px; }
#edPanel .sel { color: #fff; font-weight: 600; min-height: 18px; margin-bottom: 8px; }
#edPanel .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
#edPanel label { display: flex; align-items: center; gap: 5px; }
#edPanel input { width: 100%; background: #1a2027; border: 1px solid #2c3742; color: #fff; padding: 4px 6px; font-size: 12px; }
#edPanel button { display: block; width: 100%; background: var(--blue); color: #fff; padding: 7px; border-radius: 4px; margin-top: 6px; font-size: 12.5px; }
#edPanel button.ghost { background: #232b34; }
#edPanel .hint { color: #8b93a1; font-size: 11px; line-height: 1.5; margin-top: 8px; }

/**------- header + menu MOBILE (cachés desktop) -------*/
#mhead, #mMenu { display: none; }

@media (max-width: 900px) {
  :root { --nav-h: 0px; }
  #navbar, #topbar { display: none; }
  #mhead {
    display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: calc(var(--mob-head, 54) * 1px);
    background: #000; align-items: center; justify-content: flex-start; padding: 0 0 0 10px;
    border-bottom: calc(var(--mob-trait, 2) * 1px) solid #fff;   /* trait blanc du mockup */
  }
  #mhead .nv-logo { font-size: 19px; padding: 4px 6px; margin-left: 4px; }   /* colle au burger (quelques px) */
  #mhead .nv-logo img { height: calc(var(--mob-logo, 30) * 1px); }
  /* EQUIPE mobile (mockup iPhone-2) : fond noir, titres bleus, 3 colonnes, noms blancs */
  .eq-card { background: transparent; border-radius: 0; padding: 0; }
  .eq-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
  .eq-m figcaption { color: #fff; font-size: 13px; }
  .eq-role { color: #b9bcbe; }
  #mBurger { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
  #mBurger span { width: 24px; height: 3px; background: #fff; }
  /* icones du mockup : cases NOIRES pleine hauteur separees par un trait blanc vertical */
  .mh-ics { display: flex; gap: 0; align-self: stretch; margin-left: auto; }
  .mh-ics a, .mh-ics button { width: calc(var(--mob-case, 52) * 1px); background: #000; border-left: calc(var(--mob-sep, 1) * 1px) solid #fff; display: flex; align-items: center; justify-content: center; }
  .mh-ics #langFlagM { width: calc(var(--mob-case, 52) * 1px); height: auto; border-radius: 0; border: 0; border-left: calc(var(--mob-sep, 1) * 1px) solid #fff; overflow: visible; }   /* bat le style global #id (34px) */
  .mh-ics #langFlagM svg { width: 26px; height: 17px; border: 1px solid #2a323c; }
  .mh-ics svg { width: calc(var(--mob-ic, 21) * 1px); height: calc(var(--mob-ic, 21) * 1px); fill: #fff; }
  .mh-ics img { width: calc(var(--mob-ic, 21) * 1px); height: calc(var(--mob-ic, 21) * 1px); display: block; }
  #mMenu {
    position: fixed; top: calc(var(--mob-head, 54) * 1px); left: 0; right: 0; bottom: 0; z-index: 49; background: #000; padding: 40px 20px 26px;
    flex-direction: column; align-items: flex-start; gap: calc(var(--mob-mgap, 46) * 1px); display: flex;
    border-bottom: calc(var(--mob-lisere, 5) * 1px) solid var(--blue);   /* liseré bleu du mockup */
    /* porte de garage : glisse depuis le haut, fluide ; z 49 = passe DERRIERE le header
       (burger toujours visible pour refermer) */
    transform: translateY(-102%); transition: transform .5s cubic-bezier(.25, .9, .3, 1);
    pointer-events: none; visibility: hidden;
  }
  #mMenu.show { transform: none; pointer-events: auto; visibility: visible; }
  #mMenu { transition: transform .5s cubic-bezier(.25, .9, .3, 1), visibility 0s linear .5s; }
  #mMenu.show { transition: transform .5s cubic-bezier(.25, .9, .3, 1), visibility 0s; }
  #mMenu button { color: #fff; font-size: calc(var(--mob-mfs, 21) * 1px); letter-spacing: 2px; }
  #mMenu button[data-go] { text-align: left; }
  /* HOME mobile = tuiles + footer SEULEMENT (mockup) ; les autres sections = pages a la demande */
  #projets, #communication, #contact { display: none; }
  #projets.m-solo, #communication.m-solo, #contact.m-solo { display: flex; }   /* id bat les classes : selecteurs id requis */
  body.m-page #accueil { display: none; }
  #mFoot { display: block; padding: 18px 12px 24px; font-size: 14px; color: #cfd6dd; }
  #mFoot .amp { color: var(--blue); }
  /* carres du mockup : bordures claires partagees, colles au coin haut-droit,
     pin blanc, X/LinkedIn au bleu du site */
  .mm-ics { position: absolute; top: calc(var(--mob-mtop, 0) * 1px); right: calc(var(--mob-mright, 0) * 1px); display: flex; flex-direction: column; align-items: flex-end; gap: 0; width: auto; }
  .mm-ics #langFlagM { width: calc(var(--mob-carre, 50) * 1px); height: calc(var(--mob-carre, 50) * 1px); border: calc(var(--mob-carre-b, 1) * 1px) solid #b9b9b9; margin: -1px 0 0; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: visible; }
  .mm-ics #langFlagM svg { width: 28px; height: 19px; border: 1px solid #2a323c; }
  .mm-ics a { width: calc(var(--mob-carre, 50) * 1px); height: calc(var(--mob-carre, 50) * 1px); border: calc(var(--mob-carre-b, 1) * 1px) solid #b9b9b9; margin: 0; background: #000; display: flex; align-items: center; justify-content: center; }
  .mm-ics svg { width: 22px; height: 22px; fill: #fff; }
  .mm-ics a[aria-label="X"] svg, .mm-ics a[aria-label="LinkedIn"] svg { fill: var(--blue); }
  .screen { min-height: auto; padding-top: calc(var(--mob-head, 54) * 1px); }
  /* HOME mobile = 4 tuiles-photos vers l'agence (mockup home.png) ; le carrousel desktop disparait */
  #accueil { min-height: auto; padding-top: calc(var(--mob-head, 54) * 1px); }
  #heroSlides, #heroDots, #heroCaption { display: none; }
  #mTiles { display: flex; flex-direction: column; gap: 10px; padding: 10px 6px; }
  .mtile { position: relative; height: 176px; overflow: hidden; display: block; width: 100%; }
  .mtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mtile span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.85); background: rgba(0,0,0,.14); }
  /* LOADING mobile (mockup Loading.png) : silhouettes + gros logo en bas */
  .ld-door { display: none; }
  .ld-sil { display: block; width: min(82vw, 340px); margin: 0 auto; }
  .ld-logo img { height: 52px; }
  #heroCaption { bottom: 18px; font-size: 15px; }
  #heroDots { top: 66px; gap: 14px; }
  .pj-wrap { grid-template-columns: 1fr; }
  #mosaic { grid-template-columns: repeat(2, 1fr); }
  #mosaic .t0, #mosaic .t1, #mosaic .t2 { grid-column: span 2; }
  .cm-team { max-height: 34vh; }
  .pcard { flex: 0 0 44vw; }
  .ct-grid { grid-template-columns: 1fr; }
  #ctForm input { width: 100%; }
  .ag-flex { grid-template-columns: 1fr; }
  .ag-img { max-height: 30vh; }
  .fi-main { grid-template-columns: 1fr; padding-top: 58px; overflow-y: auto; display: flex; flex-direction: column; }
  .fi-photo { min-height: 38vh; }
  #alGrid { grid-template-columns: repeat(2, 1fr); }
  /* ---- POPUPS mobiles kifkif mockups : X carre DANS la bande bleue ---- */
  #ovMob .ov-x { top: 4px; right: 8px; width: 31px; height: 31px; font-size: 14px; }    /* centre dans la bande (39px) */
  #ovAll .ov-x { top: 7px; right: 8px; width: 31px; height: 31px; font-size: 14px; }    /* centre dans la bande h2 (45px) */
  #ovMobBody .band { width: 100%; }
  .al-head h2 { background: var(--blue); color: #fff; padding: 8px 44px 8px 12px; font-size: 22px; letter-spacing: 1px; margin: 0; }
  .al-head h2 .b1 { color: #0b2545; }
  /* ---- CONTACT mobile : carte -> coordonnees -> formulaire (mockup Contact.png) ---- */
  #ovMobBody #contact { padding: 0 0 26px; }
  #ovMobBody #contact .ct-map { height: 42vh; width: 100% !important; }
  #ovMobBody #contact .ct-grid { display: flex; flex-direction: column; gap: 20px; padding: 18px 12px 0; }
  #ovMobBody #contact .ct-info { order: 0; border-left: 0; padding-left: 0; margin-left: 0; }
  #ovMobBody #contact #ctForm { order: 1; display: flex; flex-direction: column; gap: 12px; }
  #ovMobBody #contact .ct-form-t { order: 1; display: block; color: #fff; font-size: 19px; margin-top: 4px; }
  #ovMobBody #contact #ctForm input, #ovMobBody #contact #ctForm textarea {
    width: 100%; background: transparent; color: #fff; border: 2px solid var(--blue); border-radius: 8px; padding: 10px 12px; }
  #ovMobBody #contact #ctForm textarea { min-height: 34vh; }
  #ovMobBody #contact .ct-foot { justify-content: center; }
  #ovMobBody #contact .ct-foot button { background: var(--blue); color: #fff; border: 0; border-radius: 4px; padding: 10px 26px; font-size: 16px; }
  #ovMobBody footer { display: none; }
  /* ---- COMMUNICATION mobile : photo equipe -> VIEWER -> carrousel fleches (mockup) ---- */
  #ovMobBody #communication { padding: 0 0 20px; }
  #ovMobBody #communication .cm-team { width: 100% !important; height: auto !important; max-height: none; }
  #ovMobBody #communication .cm-team img { width: 100%; height: auto; }
  #cmViewer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 8px; }
  .cmv-wrap { position: relative; display: inline-block; }
  #cmvImg { max-width: 62vw; max-height: 44vh; border: 2px solid var(--blue); background: #fff; display: block; }
  #cmvTitre { color: #fff; font-size: 19px; text-align: center; }
  #cmvDl { position: absolute; top: 6px; right: 6px; line-height: 0; }   /* icone PDF au coin haut-droit de la photo */
  #cmvDl svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
  #ovMobBody .cm-press { display: flex; align-items: center; padding: 14px 2px 0; }
  #ovMobBody .pr-arrow { color: var(--blue); font-size: 30px; padding: 6px; flex: none; }
  /* 4 petits rectangles verticaux par ecran, glisse au doigt */
  #ovMobBody #pressTrack { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; touch-action: pan-x; min-width: 0; flex: 1; }
  #ovMobBody .pcard, #ovMobBody .an-card { flex: 0 0 calc((100vw - 104px) / 4); min-width: 0; }
  #ovMobBody .pcard .pv img { width: 100%; height: auto; border: 2px solid var(--blue); }
  #ovMobBody .an-card img { width: 100%; height: calc((100vw - 104px) / 4 * 1.35); object-fit: cover; border: 2px solid var(--blue); }
  #ovMobBody .pcard figcaption, #ovMobBody .an-card .an-card-t { font-size: 11px; }
  #ovMobBody .an-card .an-card-d { font-size: 10px; }
  /* filmstrip fiche : glisse au doigt aussi */
  #fiThumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
  /* COMMUNICATION SPECIAL mobile : image au-dessus, texte dessous */
  #ovAnn .an-cols { grid-template-columns: 1fr; overflow-y: auto; }
  #ovAnn .an-im { order: -1; max-height: 34vh; }
  #ovAnn h2 { font-size: 24px; }
  .an-card { flex: 0 0 60vw; }
  /* POPUP mobile generique : la section PC deplacee dedans redevient visible */
  #ovMobBody { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
  #ovMobBody #communication, #ovMobBody #contact { display: flex; min-height: auto; padding: 0 0 24px; }   /* bande bord a bord, collee au trait blanc */
  /* PRESENTATION mobile : PAS d'image - le texte prend tout l'espace (PC inchange) */
  .ag-cols { grid-template-columns: 1fr; }
  .ag-cols .im { display: none; }
  /* AGENCE mobile : historique + moyens en colonne, texte pleine largeur */
  .ag-hist2, .ag-moy { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .ag-hist2 p, .ag-moy p { align-self: stretch; margin-bottom: 0; }
  .ag-hist2 .h2-img { max-width: 100%; max-height: 44vh; width: auto; border: 2px solid var(--blue); }
  .ag-moy img { max-width: 100%; max-height: 42vh; width: auto; border: 2px solid #0c0c0e; filter: grayscale(1); }
  .al-head { padding: 0 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .al-head h2 { margin: 0 -10px 4px; }                           /* bande bord a bord malgre le padding des filtres */
  .al-head h2 { grid-column: 1 / -1; }
  #mFilterBtn { display: flex; grid-column: 1 / -1; justify-content: center; margin: 4px 10px 0; padding: 9px; }
  #mFilter.show { left: 0; top: calc(var(--mob-head, 54) * 1px); right: 0; bottom: 0; transform: none;
    width: auto; height: auto; border: 0; border-radius: 0; }
  #mFilterBody { grid-template-columns: 1fr; padding: 14px 14px 8px; }
  .mf-t { margin-top: 14px; }
  .mf-group:first-child .mf-t { margin-top: 0; }
  .mf-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 0; }
  .al-head label { font-size: 13px; }
}