/*═══════════════════════════════════════════════════════════
  IK'ART — couche mobile (chargée après le CSS de chaque page)
  Une seule source pour le tiroir de navigation, la barre
  d'action du bas et l'hygiène tactile. Bleu #004AAD ·
  Montserrat : rien de nouveau côté identité, que du confort.
  --hdr-h est posé par le JS (hauteur réelle du header).
═══════════════════════════════════════════════════════════*/

/*──────── HYGIÈNE TACTILE (tous écrans) ────────*/
/* `clip` et non `hidden` : coupe le débordement latéral (marquee, blobs)
   sans créer de conteneur de défilement — position:sticky de l'en-tête tient. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
*{-webkit-tap-highlight-color:rgba(0,74,173,.10)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* Le survol colle au doigt sur mobile : on ne le joue que sur les vrais pointeurs. */
@media (hover:none){
  .btn:hover,.feat:hover,.proj:hover,a.card:hover,.plan:hover,.lead:hover,
  .ct-soc a:hover,.foot-soc a:hover,.rel:hover,.marquee a.item:hover img{transform:none;box-shadow:inherit}
  .marquee:hover .track{animation-play-state:running}
}

/*──────── CIBLES TACTILES ────────
  44 px pour les commandes, ~34 px pour les listes de liens :
  un pied de page de 40 liens à 44 px devient un couloir. */
@media (max-width:920px){
  .lang-btn{min-height:44px;padding-inline:14px}
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .foot-soc a,.ct-soc a{width:44px;height:44px}
  .foot-col a,.foot-col span,.foot-bot .legal a{min-height:34px;display:flex;align-items:center}
  .pgn a,.pgn span{min-height:44px}
  .skip:focus{min-height:44px;display:flex;align-items:center}
}

/*──────── SAISIE : jamais de zoom iOS ────────
  Safari zoome dès qu'un champ est sous 16 px. Le zoom déplace la page,
  casse le header fixe et donne l'impression d'un site cassé. */
@media (max-width:820px){
  /* :not() sert ici à égaler la spécificité des règles de page (.field select…) :
     ce fichier étant chargé après, il l'emporte. */
  input:not([type=checkbox]):not([type=radio]),
  select:not([hidden]),
  textarea:not([hidden]){font-size:16px}
  .field input,.field textarea,.field select{padding:14px 15px}
  .field textarea{min-height:130px}
}

/*═══════════════════════════════════════════════════════════
  TIROIR DE NAVIGATION
  Une feuille pleine hauteur sous le header. La liste et le
  bouton d'appel sont dans le flux : plus aucun décalage
  calculé à la main, donc plus de chevauchement.
═══════════════════════════════════════════════════════════*/
@media (max-width:920px){
  .burger{display:flex;flex-direction:column;gap:5px;position:relative;z-index:60}
  .burger span{display:block;width:24px;height:2px;margin:0;background:var(--black);border-radius:2px;
               transition:transform .3s var(--ease),opacity .2s}
  .menu[data-open="true"] ~ .burger span:nth-child(1),
  .menu.open ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu[data-open="true"] ~ .burger span:nth-child(2),
  .menu.open ~ .burger span:nth-child(2){opacity:0}
  .menu[data-open="true"] ~ .burger span:nth-child(3),
  .menu.open ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menu{
    position:fixed;top:var(--hdr-h,72px);left:0;right:0;bottom:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:14px clamp(20px,5vw,28px) calc(28px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--border);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease),transform .3s var(--ease),visibility .3s;
    z-index:55;box-shadow:none
  }
  .menu[data-open="true"],.menu.open{opacity:1;visibility:visible;transform:none}
  .menu nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu nav a{
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 2px;font-size:1.05rem;font-weight:700;color:var(--black);text-align:start;
    border-bottom:1px solid var(--border-2);border-radius:0
  }
  .menu nav a::after{content:"›";font-size:1.3rem;font-weight:600;color:var(--body-2);line-height:1}
  html[dir="rtl"] .menu nav a::after{content:"‹"}
  .menu nav a[aria-current="page"]{color:var(--primary)}
  .menu nav a:hover{background:none}
  .menu .btn{display:inline-flex;position:static;inset:auto;
             margin-top:22px;width:100%;justify-content:center;padding-block:16px;font-size:1rem}
  /* le tiroir ouvert masque le reste : rien ne doit passer par-dessus */
  body.nav-open{overflow:hidden}
  /* l'en-tête est transparent en haut de l'accueil : il doit rejoindre le blanc du tiroir */
  body.nav-open .hdr{background:#fff;box-shadow:none}
  body.nav-open .ikbot,body.nav-open .mbar{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .menu{transition:none}
  .burger span{transition:none}
}

/*═══════════════════════════════════════════════════════════
  BARRE D'ACTION DU BAS (≤ 720 px)
  Au Bénin la conversion passe par WhatsApp et l'appel direct.
  Elle remplace la bulle flottante sur mobile : une seule
  zone d'action au pouce, pas deux objets qui se disputent
  le coin de l'écran.
═══════════════════════════════════════════════════════════*/
.mbar{display:none}
@media (max-width:720px){
  .mbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:80;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 24px -14px rgba(13,32,74,.5);
    transition:opacity .25s,transform .3s var(--ease)
  }
  .mbar-i{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:58px;padding:9px 4px;background:none;border:0;cursor:pointer;
    font-family:var(--ff);font-size:.72rem;font-weight:700;color:var(--body);
    transition:color .2s,background .2s
  }
  .mbar-i+.mbar-i{border-inline-start:1px solid var(--border-2)}
  .mbar-i svg{width:21px;height:21px;flex:none}
  .mbar-i:active{background:var(--primary-soft);color:var(--primary)}
  .mbar-wa{color:var(--primary)}
  /* le contenu ne doit jamais finir sous la barre */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* la bulle cède la place à la barre : voir _chatbot.html */
}

/*═══════════════════════════════════════════════════════════
  RESPIRATION & LISIBILITÉ MOBILE
═══════════════════════════════════════════════════════════*/
@media (max-width:720px){
  /* Le hero collait 150 px de vide sous le header : on cale sur sa hauteur réelle. */
  .hero{padding-top:calc(var(--hdr-h,72px) + 26px);padding-bottom:56px}
  .hero-pill{font-size:.74rem;line-height:1.45;padding:9px 15px;margin-bottom:20px;text-align:start}
  .hero h1{max-width:none;font-size:clamp(2rem,8.4vw,2.5rem);text-wrap:balance}
  /* Le sous-titre fait 8-9 lignes sur un téléphone : centré il devient
     un mur. Bloc centré, texte aligné à gauche — on garde la composition
     du hero et on retrouve un bord de lecture. */
  .hero p{font-size:.99rem;line-height:1.62;margin-top:18px;text-align:start;max-width:40ch;text-wrap:pretty}
  .hero-actions{margin-top:28px;gap:10px}
  .hero-actions .btn,.ctab .hero-actions .btn,.proj-more .btn{width:100%;justify-content:center;padding-block:16px}
  .hero-trust{margin-top:20px;font-size:.82rem;line-height:1.55;text-wrap:pretty}

  .sec{padding:56px 0}
  .st{margin-bottom:32px}
  .st p{font-size:.97rem;text-wrap:pretty}
  .brands{padding:38px 0}
  .brands .lbl-sub{margin-bottom:22px;font-size:.9rem}

  /* Expertise : l'icône passe à gauche du titre. Une carte empilée
     mangeait un écran entier ; en ligne elle en prend un tiers. */
  .feat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:15px;row-gap:9px;
        padding:22px 20px;align-items:center}
  .feat-ic{width:50px;height:50px;margin-bottom:0;border-radius:12px;grid-row:1}
  .feat-ic svg{width:24px;height:24px}
  .feat-ic .emo{font-size:1.4rem}
  .feat h3{grid-column:2;font-size:1.08rem;margin-bottom:0}
  /* la description reprend toute la largeur : sous l'icône, la colonne
     serait vide et le texte gagnerait deux lignes pour rien */
  .feat p{grid-column:1/-1;font-size:.92rem;line-height:1.6;text-wrap:pretty}

  /* Réalisations : 7 cartes empilées = 3 200 px. En rail glissant,
     la carte suivante dépasse — l'affordance suffit, pas de flèches. */
  .proj-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;
             scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
             margin-inline:calc(-1 * clamp(20px,5vw,40px));
             padding:2px clamp(20px,5vw,40px) 8px}
  .proj-grid::-webkit-scrollbar{display:none}
  .proj{flex:0 0 82%;scroll-snap-align:start}
  .proj-more{margin-top:26px}

  /* FAQ : 20 questions d'affilée sur un téléphone, c'est un mur. */
  .faq-wrap[data-collapsed="true"] .faq-i:nth-child(n+7){display:none}
  .faq-toggle{width:100%;justify-content:center;margin-top:18px}
  .faq-toggle[hidden]{display:none}

  .about-vis{padding:30px 24px}
  .about-stats{gap:14px;margin-top:24px}
  .about-stats .s-n{font-size:1.7rem}

  .penato{padding:30px 24px;border-radius:16px}
  .faq-q{padding:18px 18px;font-size:.98rem}
  .faq-a div{padding:0 18px 18px}
  .form{padding:24px 20px;border-radius:14px}
  .ct-direct a,.ct-direct .ct-item{min-height:48px}

  .foot{padding-top:48px}
  .foot-grid{padding-bottom:32px;gap:30px}
  .foot-bot{padding-bottom:26px}
}

/* Très petits écrans : on récupère la marge latérale. */
@media (max-width:380px){
  .wrap{padding-inline:16px}
  .hero h1{font-size:1.92rem}
  .btn{padding-inline:20px;font-size:.9rem}
}

/*──────── PAGES SECONDAIRES ────────
  Le CSS propre a chaque page est charge apres celui-ci : on ne
  redeclare ici que ce qu'il ne fixe pas lui-meme. */
@media (max-width:720px){
  .acts .btn,.cta-acts .btn,.plan .btn,.void .btn,.empty .btn,.pgn .end{width:100%;justify-content:center}
  .lb-x{width:44px;height:44px;display:grid;place-items:center}
  /* Barre de tri du blog : catégories empilées, recherche pleine largeur. */
  .bar-in{flex-direction:column;align-items:stretch}
  .chips{min-width:0;max-width:100%}
  .find{width:100%;min-width:0;flex:1 1 auto;justify-content:stretch}
  .find input{flex:1 1 auto;width:100%;min-width:0;min-height:46px}
  .chip{min-height:40px;display:inline-flex;align-items:center;max-width:100%}
  .faq-more,.back,.share .chip,.fact dd a,.recap-row dd a,.deploy-go{min-height:40px;display:inline-flex;align-items:center}
  .faq summary{padding-block:18px}
}