/* =========================================================================
   L'EN-TETE COMMUN DES SITES OURAYA (25/10/2026)

   Johann : « Le menu en haut, aucune coherence d'une page a l'autre, tout
   change ». Un seul en-tete pour ouraya.org, ouraya.solutions,
   social.ouraya.org et modbot.ouraya.org : meme logo, memes entrees, meme
   ordre, meme comportement sur telephone.

     sites/_commun/entete.html  le balisage, avec ses emplacements {{...}}
     sites/_commun/entete.css   ce fichier
     sites/_commun/entete.js    le menu du telephone et la liste des outils
     scripts/entete.py          pose l'en-tete dans chaque page, entre les
                                reperes « entete » et « /entete »
     resources/views/components/nav.blade.php
                                le meme en-tete pour modbot.ouraya.org, qui
                                ajoute ses entrees propres (Tarifs, Connexion)

   Ce qui change d'un site a l'autre, et rien d'autre : le mot apres
   « OURAYA » (ou l'on est), l'entree marquee comme courante, et pour ModBot
   ses entrees de produit.

   🚨 TOUT EST PREFIXE « oy- » ET DOUBLEMENT QUALIFIE (.oy-entete .oy-x).
   La feuille vit a cote de quatre feuilles qui ne la connaissent pas :
   « .nav a » d'un site a deja repeint un bouton (piege n° 2 du CLAUDE.md),
   et ModBot prefixe ses classes en « f- ». Une regle de site ne doit jamais
   gagner contre l'en-tete, ni l'inverse.

   Sans JavaScript, les liens restent visibles sous le logo au telephone. Le
   bouton « Menu » n'apparait que si entete.js tourne.
   ========================================================================= */

.oy-entete{
  --oy-ink:#070C17; --oy-ink2:#0B1424; --oy-ink3:#12213A; --oy-line:#1E2B42; --oy-line2:#2C3B57;
  --oy-tx:#F3EBDD; --oy-tx2:#A9B3C4; --oy-tx3:#8794A8; --oy-peach:#FFB648; --oy-on-peach:#0B1424;
  --oy-disp:Bricolage,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --oy-mono:JetBrains,ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--oy-tx);font-family:var(--oy-disp);
  /* Largeur alignee sur le contenu du site : 1180 px partout, ModBot la
     porte a 1240 px pour suivre sa propre grille. */
  --oy-largeur:1180px
}
/* Au-dessus du contenu, pour que la liste des outils et le panneau du
   telephone passent devant la page. Le selecteur pese (0,2,1) : les sites
   posent « .page > *:not(.lumiere) { z-index: 1 } », qui pese (0,2,0) et
   ramenait l'en-tete au niveau du contenu, sous lequel la liste disparaissait. */
html .oy-entete[data-oy-site]{position:relative;z-index:30}
/* Sur une page claire (les sections cachees d'ouraya.org), l'en-tete garde
   son fond d'encre : c'est le meme bandeau partout. */
.oy-entete.oy-entete-plein{background:var(--oy-ink);border-bottom:1px solid var(--oy-line)}

.oy-entete .oy-cadre{max-width:var(--oy-largeur);margin-inline:auto;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.oy-entete a{text-decoration:none}
.oy-entete .oy-marque,.oy-entete .oy-marque:visited{display:inline-flex;align-items:center;gap:10px;color:var(--oy-tx);font-size:20px;line-height:1;letter-spacing:.01em}
.oy-entete .oy-marque img{width:32px;height:32px;display:block}
.oy-entete .oy-marque b{font-weight:800}
.oy-entete .oy-marque span{font-weight:300;color:var(--oy-peach)}

/* Les liens. Sans JavaScript, au telephone, ils passent sous le logo. */
.oy-entete .oy-panneau{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;flex-basis:100%}
.oy-entete .oy-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.oy-entete .oy-lien,.oy-entete .oy-lien:visited{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;
  font:400 13px/1.2 var(--oy-mono);color:var(--oy-tx2);cursor:pointer;background:none;border:0;white-space:nowrap}
.oy-entete .oy-lien:hover,.oy-entete .oy-lien[aria-current]{color:var(--oy-tx)}
.oy-entete .oy-lien[aria-current]{text-decoration:underline;text-decoration-color:var(--oy-peach);text-decoration-thickness:2px;text-underline-offset:6px}
.oy-entete .oy-lien:focus-visible,.oy-entete .oy-contact:focus-visible,.oy-entete .oy-action:focus-visible,
.oy-entete .oy-marque:focus-visible,.oy-entete .oy-menu:focus-visible,.oy-entete .oy-sous a:focus-visible{outline:2px solid var(--oy-peach);outline-offset:3px;border-radius:6px}

/* La liste des outils, depliee sur place : details et summary, donc elle
   s'ouvre aussi sans JavaScript. */
.oy-entete .oy-outils{position:relative}
.oy-entete .oy-outils summary{list-style:none}
.oy-entete .oy-outils summary::-webkit-details-marker{display:none}
.oy-entete .oy-outils summary::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.oy-entete .oy-outils[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.oy-entete .oy-sous{margin:0;padding:8px;list-style:none;display:grid;gap:2px;min-width:290px;border-radius:16px;
  border:1px solid var(--oy-line2);background:rgba(18,33,58,.97);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.oy-entete .oy-sous a,.oy-entete .oy-sous a:visited{display:grid;gap:2px;padding:10px 12px;border-radius:10px;color:var(--oy-tx);border-left:2px solid transparent}
.oy-entete .oy-sous a:hover{background:rgba(243,235,221,.06)}
.oy-entete .oy-sous a[aria-current]{border-left-color:var(--oy-peach);background:rgba(255,182,72,.08)}
.oy-entete .oy-sous b{font-size:15px;font-weight:700}
.oy-entete .oy-sous span{font:400 12px/1.4 var(--oy-mono);color:var(--oy-tx3)}

/* Les entrees propres a un site (ModBot : Tarifs, Connexion, l'appel). */
.oy-entete .oy-local{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.oy-entete .oy-contact,.oy-entete .oy-contact:visited,.oy-entete .oy-action,.oy-entete .oy-action:visited{display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:9px 18px;border-radius:999px;font:500 13px/1.2 var(--oy-mono);white-space:nowrap}
.oy-entete .oy-contact,.oy-entete .oy-contact:visited{color:var(--oy-tx);border:1px solid var(--oy-line2)}
.oy-entete .oy-contact:hover{border-color:var(--oy-tx3);color:var(--oy-tx)}
.oy-entete .oy-action,.oy-entete .oy-action:visited{background:var(--oy-peach);color:var(--oy-on-peach);font-weight:700;border:0}
.oy-entete .oy-action:hover{color:var(--oy-on-peach);box-shadow:0 12px 40px rgba(255,182,72,.28)}

/* Le bouton « Menu » : invisible tant que le script ne tourne pas. */
.oy-entete .oy-menu{display:none}

/* ---- Telephone, avec JavaScript : un bouton, un panneau ------------------- */
@media (max-width:899px){
  .oy-entete.oy-js .oy-cadre{flex-wrap:nowrap;justify-content:space-between}
  .oy-entete.oy-js .oy-menu{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:9px 16px;border-radius:999px;
    border:1px solid var(--oy-line2);background:transparent;color:var(--oy-tx);font:500 13px/1.2 var(--oy-mono);cursor:pointer}
  .oy-entete.oy-js .oy-menu::before{content:"";width:14px;height:10px;
    background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
  .oy-entete.oy-js.oy-ouvert .oy-menu::before{background:linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%)}
  .oy-entete.oy-js .oy-panneau{display:none;position:absolute;left:12px;right:12px;top:calc(100% - 6px);flex-direction:column;align-items:stretch;gap:6px;
    padding:12px;border-radius:20px;border:1px solid var(--oy-line2);background:var(--oy-ink2);box-shadow:0 30px 80px rgba(0,0,0,.55)}
  .oy-entete.oy-js.oy-ouvert .oy-panneau{display:flex}
  .oy-entete.oy-js .oy-nav,.oy-entete.oy-js .oy-local{flex-direction:column;align-items:stretch;gap:0}
  .oy-entete.oy-js .oy-lien{min-height:48px;padding:0 10px;font-size:15px;border-radius:10px}
  .oy-entete.oy-js .oy-lien[aria-current]{background:rgba(255,182,72,.08)}
  .oy-entete.oy-js .oy-sous{min-width:0;margin:2px 0 6px;box-shadow:none;background:var(--oy-ink3)}
  .oy-entete.oy-js .oy-contact,.oy-entete.oy-js .oy-action{min-height:48px;margin-top:4px;font-size:14px}
}

/* ---- Ecran large ----------------------------------------------------------- */
@media (min-width:640px){
  .oy-entete .oy-cadre{padding-inline:28px}
}
@media (min-width:900px){
  .oy-entete .oy-cadre{flex-wrap:nowrap;padding:26px 32px}
  .oy-entete .oy-marque{font-size:24px}
  .oy-entete .oy-marque img{width:36px;height:36px}
  .oy-entete .oy-panneau{flex-basis:auto;flex:1;flex-wrap:nowrap;gap:22px}
  .oy-entete .oy-nav{flex-wrap:nowrap;gap:26px;margin-right:auto}
  .oy-entete .oy-local{flex-wrap:nowrap}
  .oy-entete .oy-sous{position:absolute;left:-14px;top:calc(100% + 6px)}
}

/* modbot.ouraya.org porte trois entrees de plus (Tarifs, Connexion, l'appel) :
   entre 900 et 1199 px, la ligne debordait de 70 px et les libelles passaient
   sur deux lignes (25/10/2026). On resserre, et « Contact » attend 1200 px :
   il reste au pied de page. */
@media (min-width:900px) and (max-width:1199px){
  .oy-entete[data-oy-site="modbot"] .oy-cadre{padding-inline:20px}
  .oy-entete[data-oy-site="modbot"] .oy-marque{font-size:20px}
  .oy-entete[data-oy-site="modbot"] .oy-panneau{gap:12px}
  .oy-entete[data-oy-site="modbot"] .oy-nav{gap:14px}
  .oy-entete[data-oy-site="modbot"] .oy-local{gap:4px 12px}
  .oy-entete[data-oy-site="modbot"] .oy-contact{display:none}
}

@media (prefers-reduced-motion:reduce){
  .oy-entete .oy-outils summary::after{transition:none}
}