/* ===== Corrections responsive (chargé en dernier) ===== */

/* Aucune largeur ne doit dépasser l'écran : on coupe tout débordement horizontal au niveau de la page */
html,body{overflow-x:clip}

/* Bouton de langue : même bulle violette que « Réserver un appel » */
.lang-btn{color:var(--fg);border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.22),rgba(255,255,255,.05) 55%,transparent),linear-gradient(90deg,rgba(139,92,246,.45),rgba(244,114,182,.42));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -8px 16px rgba(244,114,182,.15),0 10px 26px -12px rgba(139,92,246,.7)}
.lang-btn:hover,.langs.open .lang-btn{border-color:rgba(255,255,255,.45);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 14px 32px -10px rgba(244,114,182,.65)}
.lang-btn svg{opacity:1}

/* Menu mobile : mêmes majuscules que le menu ordinateur */
.mnav a{text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:500}
.mnav a[aria-current="page"]{color:var(--pink)}

/* Accueil : les 3 chiffres clés restent sur une ligne */
@media (max-width:600px){
  .hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:8px}
  .hero-meta>div{padding:4px 6px;gap:4px}
  .hero-meta strong{font-size:30px}
  .hero-meta>div{font-size:11.5px;line-height:1.3;text-align:center}
}

/* Portail : le téléphone WhatsApp passe sous le tableau de bord sans le recouvrir */
@media (max-width:640px){
  .pt-phone{margin:20px auto 0;width:min(250px,80%)}
}
.wa-msg u{white-space:nowrap}

/* Chiffres clés des pages internes : 2 colonnes sur mobile au lieu d'une longue pile */
@media (max-width:480px){
  .stats,.stats.three{grid-template-columns:1fr 1fr}
  .stats>div{padding:20px 14px}
  .stats>div+div{border-top:0}
  .stats>div:nth-child(even){border-left:1px solid var(--line)}
  .stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .stats strong{font-size:30px}
  .stats span{font-size:12.5px}
  .stats.three>div:last-child{grid-column:1/-1;border-left:0}
}

/* Page IA : schéma d'automatisation plus haut et textes lisibles sur mobile */
@media (max-width:600px){
  .flow-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:11.5px}
  .flow-canvas{aspect-ratio:1/1.08}
  .fnode{padding:2.4cqw;gap:2cqw;border-radius:3cqw}
  .fnode small{font-size:2.5cqw}
  .fnode b{font-size:3cqw;overflow-wrap:anywhere}
  .fnode .fmsg,.fnode .fthink{font-size:2.7cqw}
  .fi{width:6.4cqw;height:6.4cqw;font-size:2.2cqw;border-radius:2.2cqw}
  .fok{width:5cqw;height:5cqw;font-size:2.8cqw}
  .n1{width:29%}.n2{width:30%;left:35%}.n3,.n4,.n5{left:69%;width:30%}
  .flow-foot{font-size:11px;gap:6px 12px}
}

/* Page SEO : le badge de classement ne recouvre plus le titre du résultat */
.serp-list li.you{padding-right:58px}
@media (max-width:600px){.serp-list b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* PC portables 3D : moins inclinés sur mobile pour ne pas sortir de l'écran */
@media (max-width:600px){
  .lap{--ry:-6deg;--rx:4deg}
  .lap3d{padding-inline:6%}
}

/* À propos : bulles « Ingénieurs, Développeurs… » à taille raisonnable */
@media (max-width:600px){.dna span{font-size:19px;padding:6px 14px}}

/* Nuages : pas de flou d'arrière-plan (Safari ne le découpe pas à la forme du nuage → rectangle visible)
   ni de masque (Safari sur iPhone le dimensionne mal et rogne les bords) : la forme vient du SVG */
.bub .glass{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none}
.bub .cl-fill{opacity:.7}
@media (max-width:860px){
  @keyframes cloudFloatM{50%{transform:translateY(-8px)}}
  .bub{animation-name:cloudFloatM}
  /* Safari étire les cases de la grille malgré aspect-ratio : hauteur fixée par un padding (116/160 = 72,5 %) */
  .bubbles{align-items:start}
  .bub{aspect-ratio:auto;height:auto;align-self:start}
  .bub::before{content:"";display:block;padding-top:72.5%}
}

/* Fiche projet sur mobile : plein écran, image en haut puis texte, sans chevauchement */
@media (max-width:860px){
  .pmodal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0;overflow-y:auto;overscroll-behavior:contain}
  .pmodal[open]{display:block;animation:none}
  .pm-gallery{display:block;padding:10px 10px 6px}
  .pm-stage{position:relative;aspect-ratio:4/3;min-height:0;height:auto}
  .pm-stage img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
  .pm-thumbs{margin-top:8px}
  .pm-brief{padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px))}
  .pm-close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;left:auto;z-index:5;background:rgba(9,7,13,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .pm-brief h3{padding-right:0}
  .pm-facts div{grid-template-columns:96px 1fr}
}
[dir="rtl"] .pmodal .pm-close{right:auto;left:12px}