/* ============================================================
   BALIMANA — site.css
   Chrome & layout partagés par toutes les pages.
   À charger APRÈS balimana-ds.css.
   ============================================================ */

body{margin:0;background:var(--white);overflow-x:hidden}

/* ---- Layout primitives ---- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-6)}
.wrap--narrow{max-width:var(--container-narrow)}
/* Rythme vertical : valeur mobile en base, respiration desktop à partir de
   900 px — c'est là que la page passe d'une colonne à plusieurs. */
.section{padding:var(--space-16) 0}
.section--tight{padding:var(--space-16) 0}
.section--subtle{background:var(--neutral-50)}
.section--dark{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}

.sec-head{max-width:60ch}
/* Taille reprise du token fluide : l'ancien clamp(28px,4vw,…) atteignait déjà
   exactement --text-4xl dès 1200 px, le rendu desktop est donc inchangé. */
.sec-head h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-4xl);color:var(--navy);letter-spacing:-.015em;line-height:1.05;margin-top:var(--space-4)}
.sec-head h2 em{font-style:italic;color:var(--blue-500)}
.sec-head p{margin-top:var(--space-4);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section--dark .sec-head h2{color:#fff}
.section--dark .sec-head h2 em{color:var(--cyan-300)}
.section--dark .sec-head p{color:var(--text-ondark-muted)}

/* shared topo backdrop for dark sections */
.topo-bg{position:absolute;inset:0;opacity:.4;pointer-events:none}
.grid-bg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.1) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(100% 80% at 50% 0,#000,transparent)}

/* ---- Skip link ---- */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--radius-sm)}
.skip:focus{left:8px}

/* ---- Header (sticky, shrinks on scroll) ---- */
.site-header{position:sticky;top:0;z-index:60;transition:box-shadow var(--dur-base),background var(--dur-base)}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
/* Base mobile : la navigation est portée par le panneau, pas par l'en-tête.
   La barre horizontale et le bouton d'appel réapparaissent à 900 px. */
.site-header .ds-nav,.site-header .ds-header__cta .btn{display:none}
/* 44×44 px : cible tactile minimale. La marge négative ne déplace pas la
   cible, elle réaligne le GLYPHE sur le retrait du conteneur. */
.mnav-toggle{display:grid;place-items:center;background:none;border:none;cursor:pointer;width:44px;height:44px;margin-right:-7px;color:var(--navy)}
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--navy-900);color:#fff;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);display:flex;flex-direction:column;padding:var(--space-6)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-10)}
.mobile-menu a.m-link{color:#fff;text-decoration:none;font-family:var(--font-display);font-size:var(--text-2xl);padding:var(--space-4) 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu a.m-link:hover,.mobile-menu a.m-link.is-active{color:var(--orange)}
.mobile-menu .m-close{background:none;border:none;color:#fff;cursor:pointer;width:44px;height:44px;margin-right:-6px}

/* ---- Bouton flottant WhatsApp ----
   Fixé en bas à droite, sous le menu mobile (z-index 80) pour ne pas le
   recouvrir quand il est ouvert. Vert de marque WhatsApp. Sur mobile : pastille
   ronde (icône seule) ; à partir de 900 px : pilule avec libellé. */
.wa-float{position:fixed;right:clamp(16px,4vw,28px);bottom:clamp(16px,4vw,28px);z-index:70;display:inline-flex;align-items:center;gap:var(--space-2);background:#25d366;color:#fff;text-decoration:none;padding:14px;border-radius:var(--radius-full);box-shadow:var(--shadow-md);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.wa-float:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}
.wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.wa-float__ico{width:26px;height:26px;flex:none}
.wa-float__label{display:none;font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);padding-right:var(--space-1)}
@media(min-width:900px){.wa-float{padding:12px 18px}.wa-float__label{display:inline}}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* ---- Marque : logo graphique Balimana ----
   L'image se dimensionne par sa hauteur ; le ratio 572×167 fait la largeur.
   Couleur (fond clair) dans l'en-tête, blanc (fond sombre) dans le menu et le
   footer — cf. balimana_brand($logo_class, $variant). */
.ds-logo--img{padding:0;flex:none;line-height:0}
.ds-logo--img img{display:block;height:42px;width:auto}
.mobile-menu__top .ds-logo--img img{height:36px}
.ds-footer .f-brand--img{display:inline-block;line-height:0}
.ds-footer .f-brand--img img{display:block;height:54px;width:auto}
@media (max-width:600px){.ds-logo--img img{height:38px}.ds-footer .f-brand--img img{height:46px}}

/* ---- Interior page hero ---- */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 100% -20%,#eef3fb 0,var(--white) 60%);padding:var(--space-12) 0 var(--space-16);border-bottom:1px solid var(--border)}
.page-hero__topo{position:absolute;top:0;right:0;width:55%;height:100%;opacity:.5;pointer-events:none}
.page-hero .breadcrumbs{margin-bottom:var(--space-6);position:relative}
/* Idem : clamp(34px,5vw,…) valait déjà --text-5xl dès 1200 px. */
.page-hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-5xl);line-height:1.02;letter-spacing:-.02em;color:var(--navy);max-width:18ch;position:relative;margin-top:var(--space-3)}
.page-hero h1 em{font-style:italic;color:var(--blue-500)}
.page-hero__lead{margin-top:var(--space-5);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600);max-width:56ch;position:relative}
.page-hero__cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4);position:relative}

/* ---- CTA band (contact) ---- */
/* Base mobile : texte et formulaire empilés. Les deux colonnes n'apparaissent
   qu'à 900 px — en deçà, le formulaire n'a pas la place d'être lisible. */
/* minmax(0,1fr) et non 1fr : une piste `1fr` a un plancher implicite de
   min-content, que le formulaire (champs, boutons) porte a ~259 px. A 320 px,
   la piste debordait donc de 3 px le remplissage de la bande — masque par
   l'overflow:hidden ci-dessus, donc invisible a l'oeil mais bien reel. */
.cta-band{background:var(--navy-900);border-radius:var(--radius-lg);overflow:hidden;position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-10);align-items:center}
.cta-band__topo{position:absolute;inset:0;opacity:.4;pointer-events:none}
.cta-band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,var(--text-4xl));color:#fff;line-height:1.05;letter-spacing:-.015em;position:relative}
.cta-band h2 em{font-style:italic;color:var(--cyan-300)}
.cta-band p{color:var(--text-ondark-muted);margin-top:var(--space-4);line-height:var(--leading-relaxed);position:relative;max-width:42ch}
.cta-form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:var(--space-8);position:relative;display:flex;flex-direction:column;gap:var(--space-5)}
.cta-form .field-label{color:#e7e6f2}
.cta-form .input,.cta-form .select{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.cta-form .input::placeholder{color:#8f8cc4}
.cta-form .input:focus,.cta-form .select:focus{border-color:var(--cyan-400)}
.cta-form .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2387d6f6' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
.cta-form .select option{background:var(--navy-800);color:#fff}

/* Grille des champs du formulaire de contact (cta-band ET page /contact/).
   Elle vit ici, dans le chrome partagé — pas dans contact.css — parce que le
   cta-band apparaît sur TOUTES les pages : sans grille chargée globalement, les
   champs s'empilaient un par ligne partout sauf sur /contact/. auto-fit est sûr
   (nombre de champs fixe, gabarit codé, jamais piloté par le back-office) :
   .full (Domaine, message) prend toute la largeur, les champs courts s'apparient
   (Nom|Entreprise, E-mail|Téléphone). */
.form-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-6)}
.form-rows .full{grid-column:1/-1}

/* ---- Partenaires ----
   Grille FLUIDE : le nombre de partenaires est piloté par le back-office, on ne
   fige donc jamais trois colonnes. auto-fit + minmax laisse la rangée se
   recomposer seule de 320 à 1920 px.
   Les trois logos livrés ont des ratios (1,28 / 2,57 / 1,75) et des fonds
   (un PNG transparent, deux JPEG sur fond blanc) incompatibles. On les
   normalise par la mise en forme, jamais par retouche : zone de logo de
   hauteur commune, object-fit:contain pour préserver chaque ratio sans
   déformation, et fond blanc uniforme — identique à celui des deux JPEG, si
   bien que leur bord blanc devient invisible et que le PNG transparent se pose
   sur le même blanc. La rangée se lit alors comme un ensemble. */
/* auto-fit, et non auto-fill.
   Le passage à auto-fill visait à empêcher un partenaire unique de s'étirer
   sur toute la largeur ; il l'a payé trop cher : auto-fill maintient les
   pistes vides, si bien qu'à 1400 px trois partenaires occupaient 300 px
   chacun au lieu de 408, laissaient ~325 px de vide à droite et voyaient
   leurs listes d'activités passer sur deux lignes.
   La borne haute est portée par la CARTE (`.partner{max-width}`), pas par la
   piste. `minmax(260px,420px)` aurait paru plus direct mais compte ses
   répétitions sur la borne MAXIMALE quand celle-ci est définie : à 1200 px il
   n'aurait donné que deux colonnes de 420 px sur 1152 px disponibles — un
   défaut pire que celui corrigé. Avec `1fr`, le nombre de pistes se calcule
   sur les 260 px du minimum, auto-fit escamote les pistes réellement vides
   (la rangée reste donc pleine à trois partenaires) et le plafond de 420 px
   sur la carte empêche l'étirement quand il n'y en a qu'un. */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);margin-top:var(--space-12)}
.partner{max-width:420px;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;min-width:0}
/* Seules les cartes porteuses d'une URL sont des liens : on ne suggère un
   survol cliquable que dans ce cas. */
a.partner{transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
a.partner:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
/* Hauteur imposée (et box-sizing) : elle prime sur les attributs width/height
   intrinsèques portés par le <img>, qui restent là pour réserver la place
   avant chargement. */
.partner__logo{width:100%;height:88px;object-fit:contain;object-position:center;background:var(--white);padding:var(--space-2) 0;box-sizing:border-box;border-bottom:1px solid var(--border);margin-bottom:var(--space-2)}
.partner__name{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--navy)}
.partner__signature{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--blue-500)}
.partner__list{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.partner__list li{position:relative;padding-left:var(--space-5);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--neutral-600)}
.partner__list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:var(--radius-full);background:var(--cyan-500)}

/* ---- Reveal (with fail-open) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Responsive (mobile-first) ----
   Palier unique à 900 px : c'est le seuil où l'en-tête peut porter sa
   navigation horizontale ET où la bande de contact tient sur deux colonnes.
   L'ancien seuil de 760 px a été remonté au palier autorisé le plus proche ;
   entre 760 et 899 px on reste donc en présentation mobile. */
@media(min-width:900px){
  .site-header .ds-nav{display:flex}
  .site-header .ds-header__cta .btn{display:inline-flex}
  .mnav-toggle{display:none}
  .section{padding:var(--space-24) 0}
  /* Redéclaré car la règle .section ci-dessus, portée par une media query,
     l'emporterait autrement sur .section--tight de la cascade de base. */
  .section--tight{padding:var(--space-16) 0}
  .cta-band{grid-template-columns:1fr 1fr;gap:var(--space-12);padding:var(--space-16)}
}