/* =========================================================================
   MENU « Nos solutions » + pied de page — CSS PARTAGE PAR LES 22 PAGES
   Il etait recopie dans le <style> de chaque page : une page qui l'oubliait
   affichait le panneau deplie en permanence, avec des icones geantes.
   Un seul fichier, charge partout : le bug ne peut plus se reproduire.

   🔴 15/08 — DEUXIEME correction, sur signalement de PO.
   Ce fichier contenait DEUX fois la mise en page du panneau : la v2 en tete
   (5 colonnes, ancree a la barre) et la v1 en pied (4 colonnes, ancree au
   bouton). En CSS, a specificite egale, c'est la DERNIERE qui gagne : toutes
   les pages affichaient donc la v1, avec la cinquieme colonne rejetee sur une
   deuxieme ligne. L'accueil y echappait par accident, parce qu'il portait
   encore la v2 dans son <style> inline, charge apres la feuille.
   🔑 Une regle vit a UN seul endroit. Le fichier est desormais ordonne :
   d'abord l'apparence (ce qui ne bouge pas), ensuite la disposition (ce qui
   a change). Plus aucune propriete n'est declaree deux fois.
   ========================================================================= */

/* ── LE BOUTON DE LA BARRE ─────────────────────────────────────────────── */
.ong>button{font-family:inherit;font-size:inherit;font-weight:600;color:var(--ink);cursor:pointer;
            background:transparent;border:0;padding:8px 12px;border-radius:9px;
            display:inline-flex;align-items:center;gap:7px}
.ong>button:hover,.ong.ouvert>button{background:var(--sand-lite)}
.ong>button svg{width:12px;height:12px;stroke:var(--ink-soft);fill:none;stroke-width:2.4;
                stroke-linecap:round;transition:transform .18s;flex:0 0 auto}
.ong.ouvert>button svg{transform:rotate(180deg)}

/* ── LE CONTENU D'UNE COLONNE ──────────────────────────────────────────── */
/* icones bicolores : la structure en noir, l'accent en corail, comme deux
   objets superposes. Les couleurs vivent dans le SVG, on ne les force pas. */
.pc-ic svg{width:100%;height:100%;display:block;overflow:visible}
.pc-ic .tr{stroke:var(--ink);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pc-ic .pl{fill:var(--ink);stroke:none}
.pc-ic .ac{fill:var(--corail);stroke:none}
.pc-ic .ac-tr{stroke:var(--corail);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* 🔴 18/08 — Les regles des liens de liste sont scopees aux ENFANTS DIRECTS
   (« .pc>a »). Elles etaient ecrites « .pann .pc a », qui attrape AUSSI le
   lien contenu dans le <h4> du titre. Or « .pann .pc a » pese deux classes
   quand « .pc h4 a » n'en pese qu'une : a ce jeu la regle generique gagne.
   🔑 Resultat invisible mais total : le titre de chaque colonne s'affichait
   en 13,76 px graisse 500 gris, c'est-a-dire exactement comme les liens
   au-dessous. Le <h4> etait bien en 800, mais son texte n'est pas DANS le
   h4, il est dans le <a>. Le panneau n'a jamais eu de niveau de titre.
   ⚠️ Un descendant (espace) ratisse plus large qu'on ne croit : des qu'un
   element imbrique porte la meme balise, il est pris au passage. */
.pann .pc>a:hover{color:var(--corail)}
.pann .pc>a.off{color:#b0a292;pointer-events:none}
.pann .pc>a em{font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
               background:#dcefee;color:#006a68;padding:2px 7px;border-radius:999px;margin-left:5px}
.pann .pc>a.off em{background:#f0e9de;color:#8d7c68}
/* le titre d'une colonne mene a sa page dediee : il herite du h4, sans plus */
.pc h4 a{color:inherit;text-decoration:none;font:inherit}
.pc h4 a:hover{color:var(--corail)}

/* ── LE PIED DU PANNEAU ────────────────────────────────────────────────── */
.pann-pied{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;
           align-items:center;gap:14px;font-size:.85rem;color:var(--ink-soft);flex-wrap:wrap}
.pann-pied b{color:var(--ink)}
.pp-go{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--corail);text-decoration:none;white-space:nowrap}

/* ── LA DISPOSITION : ancree a la barre, cinq colonnes sur une ligne ─────
   Le panneau se cale sur la LARGEUR DE LA BARRE (left:0;right:0 dans un
   header en position:relative), et non sur le bouton : il commence donc au
   bord gauche du contenu, aligne avec le logo. C'est la seule facon de tenir
   cinq colonnes sans que la derniere sorte de l'ecran. */
header .wrap.nav{position:relative}
.ong{position:static}
.pann{position:absolute;top:calc(100% + 14px);left:0;right:0;width:auto;max-width:none;
      background:var(--paper);border-radius:20px;border:1px solid var(--line);
      box-shadow:0 24px 62px rgba(36,26,18,.19);padding:32px 34px;display:none;z-index:60}
.ong.ouvert .pann{display:block}
/* 18/08 — Les cinq solutions ne « sortaient » pas du panneau, sur comparaison
   avec Overfull demandee par PO. Le gras etait pourtant deja la (800) :
   🔑 le defaut n'etait pas le POIDS, c'etait l'ECART. Titre 15 px sur des
   liens de 13 px, l'oeil ne percoit pas deux niveaux et lit une liste plate.
   Overfull tient ~19 px sur ~16 px, avec des icones de ~46 px et non 36.
   On reprend l'ECHELLE, pas leur violet : l'accent reste le corail MiamOS. */
.pann-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;align-items:start}
.pc-ic{width:46px;height:46px;margin-bottom:15px}
.pc h4{font-size:1.1rem;font-weight:800;letter-spacing:-.35px;line-height:1.22;
       margin:0 0 16px;color:var(--ink)}
/* Le titre menait deja a sa page dediee, mais rien ne le disait. Un chevron,
   comme chez Overfull : il annonce le clic sans ajouter un mot. Dessine en
   CSS et non ajoute au HTML, pour ne pas rouvrir les 22 pages. */
.pc h4 a::after{content:'';display:inline-block;width:6px;height:6px;margin-left:8px;
                border-right:2.2px solid var(--corail);border-bottom:2.2px solid var(--corail);
                transform:translateY(-2px) rotate(-45deg);transition:transform .18s}
.pc h4 a:hover::after{transform:translateY(-2px) translateX(3px) rotate(-45deg)}
.pann .pc>a{display:block;font-size:.86rem;color:var(--ink-soft);text-decoration:none;padding:5px 0;
            line-height:1.4;font-weight:500}

/* Sous 1200 px les cinq colonnes deviennent illisibles : on passe a trois,
   assume, plutot que de laisser la cinquieme tomber toute seule. */
@media(max-width:1200px){.pann-cols{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(max-width:900px){
  header .wrap.nav{position:static}
  .pann{position:static;display:none;box-shadow:none;border:0;padding:14px 0}
  .ong.ouvert .pann{display:block}
  .pann-cols{grid-template-columns:1fr;gap:20px}
  .pann-pied{display:none}
}

/* ── LE BOUTON CONTACT DE LA BARRE ─────────────────────────────────────── */
.btn-tel{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-tel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
             stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* Le mot « Contact » ne disparait que faute de place. Il etait masque a
   TOUTES les tailles, et le bouton se lisait comme une icone orpheline. */
@media(max-width:900px){.btn-tel span{display:none}}

/* ── PIED DE PAGE : la signature Aikiro Lab ────────────────────────────────
   Refaite le 15/08 sur la remarque de PO : « mal ajuste en bas, c'est pas
   premium ». C'etait un logo PNG carre de 26 px pose a cote d'un texte sur
   deux lignes, avec un alignement approximatif.
   🔑 Le pied de miamali.re fait mieux avec moins : une seule ligne, petites
   capitales espacees, et le kanji 合 en or comme unique ornement. On reprend
   ce parti ici.
   ⚠️ Le lien reste un vrai <a href> SANS rel="nofollow" : c'est tout
   l'interet de la mention pour le referencement d'aikirolab.re. */
.foot-aikiro{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(245,236,224,.13);
  text-decoration:none;line-height:1}
.foot-aikiro .fa-txt{font-size:.62rem;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(245,236,224,.42);transition:color .18s}
.foot-aikiro .fa-txt b{color:var(--gold);font-weight:800}
.foot-aikiro .fa-kanji{font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  font-size:1.15rem;color:var(--gold);line-height:1;opacity:.9}
.foot-aikiro:hover .fa-txt{color:rgba(245,236,224,.72)}
.foot-aikiro:hover .fa-kanji{opacity:1}