/* ---- Barre de navigation : CSS autonome, independant du build Tailwind ----
   Items groupes a gauche avec un pas regulier, recherche poussee a droite.
   Rayons a .25rem pour suivre la regle du theme (body .rounded-*). ---------- */
.ccbar{position:relative;z-index:60;margin-top:1.25rem;border-radius:.25rem;
 background:oklch(var(--b3));border:1px solid rgba(255,255,255,.08)}
.ccbar__in{display:flex;align-items:stretch;gap:.15rem;padding:0 .6rem}

/* la nav ne s'etire plus : les items se suivent a pas constant */
.ccnav{display:flex;align-items:stretch;gap:.15rem;margin:0;padding:0;list-style:none}
.ccnav>li{display:flex;position:relative}
.ccnav>li>a{display:flex;align-items:center;gap:.45rem;padding:.9rem 1rem;
 color:rgba(232,236,233,.86);text-decoration:none;font-weight:500;font-size:.9375rem;
 white-space:nowrap;border-bottom:2px solid transparent;
 transition:color .15s ease,border-color .15s ease}
.ccnav>li>a:hover,.ccnav>li:focus-within>a{color:#fff;border-bottom-color:oklch(var(--p))}
.ccnav>li>a:focus-visible{outline:2px solid oklch(var(--p));outline-offset:-2px}
/* page courante */
.ccnav>li>a[aria-current="page"]{color:#fff;border-bottom-color:oklch(var(--p))}

.ccnav__c{width:.38rem;height:.38rem;border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);
 opacity:.55;transition:transform .2s ease,opacity .2s ease}
.ccnav>li:hover>a .ccnav__c,.ccnav>li:focus-within>a .ccnav__c{
 transform:rotate(225deg) translate(-1px,-1px);opacity:1}

.ccmega{position:absolute;left:0;top:100%;z-index:70;margin-top:1px;
 transform:translateY(6px);width:max-content;max-width:min(92vw,1040px);
 background:oklch(var(--b1));border:1px solid rgba(255,255,255,.1);border-radius:.25rem;
 box-shadow:0 24px 56px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .16s ease,transform .16s ease,visibility .16s}
.ccnav>li:hover>.ccmega,.ccnav>li:focus-within>.ccmega{
 opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.ccnav>li:last-child>.ccmega{left:auto;right:0}
.ccmega__in{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);padding:1.4rem .4rem}
.ccmega__col{padding:0 1.4rem;border-left:1px solid rgba(255,255,255,.07)}
.ccmega__col:first-child{border-left:none}
.ccmega__t{margin:0 0 .3rem;font-size:.8125rem;font-weight:600;color:rgba(242,245,243,.55);
 line-height:1.3;letter-spacing:.07em;text-transform:uppercase}
.ccmega__u{display:block;width:1.5rem;height:2px;margin-bottom:.85rem;
 background:oklch(var(--p));border-radius:2px}
.ccmega__l{display:block;padding:.42rem 0;color:rgba(232,236,233,.78);text-decoration:none;
 font-size:.875rem;line-height:1.4;transition:color .13s ease}
.ccmega__l:hover,.ccmega__l:focus-visible{color:oklch(var(--p));outline:none}

/* recherche : hauteur alignee sur les entrees du menu, largeur fixe.
   Elle s'elargissait au focus, ce qui decalait toute la barre au clic. */
.ccsearch{position:relative;display:flex;align-items:center;align-self:center;
 margin-left:auto;margin-right:.25rem}
/* selecteur avec l'attribut : le theme applique "form input[type=text]"
   avec un margin-top de 4px et width:100%, plus specifique que ".ccsearch input".
   C'est ce qui desaxait le champ dans la barre. */
.ccsearch input[type=text]{margin-top:0;width:14rem;height:2.25rem;padding:0 .8rem 0 2.1rem;font-size:.875rem;
 line-height:2.25rem;color:#e8ece9;background:rgba(255,255,255,.035);
 border:1px solid rgba(255,255,255,.12);border-radius:.25rem;outline:none;
 transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.ccsearch input[type=text]::placeholder{color:rgba(232,236,233,.45)}
.ccsearch input[type=text]:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.ccsearch input[type=text]:focus{background:rgba(255,255,255,.08);border-color:oklch(var(--p));
 box-shadow:0 0 0 2px oklch(var(--p)/.18)}
.ccsearch button{position:absolute;left:0;top:0;height:100%;width:2.1rem;
 display:grid;place-items:center;background:none;border:0;padding:0;
 color:rgba(232,236,233,.45);cursor:pointer;transition:color .15s ease}
.ccsearch button:hover{color:oklch(var(--p))}
.ccsearch button:focus-visible{outline:2px solid oklch(var(--p));outline-offset:-2px;border-radius:.25rem}
.ccsearch button svg{width:1rem;height:1rem;stroke-width:2.2}

/* entre 1024 et 1200px : on resserre plutot que de casser la ligne */
@media (max-width:1200px){
 .ccnav>li>a{padding:.9rem .7rem;font-size:.9rem}
 .ccsearch input[type=text]{width:10.5rem}
}
@media (max-width:1023px){.ccbar{display:none}}
@media (prefers-reduced-motion:reduce){
 .ccmega,.ccnav>li>a,.ccsearch input{transition:none}
}

/* ---- Tiroir mobile ---- */
#menu{background:oklch(var(--b2))}
.ccm{display:flex;flex-direction:column;min-height:100dvh;margin:0;padding:0 0 3rem;
 list-style:none;background:oklch(var(--b2))}
.ccm__bar{display:flex;align-items:center;justify-content:flex-end;padding:.5rem .5rem 0}
.ccm__s{margin:1.5rem 1.25rem .2rem;font-size:.8125rem;font-weight:600;
 color:rgba(242,245,243,.55);letter-spacing:.07em;text-transform:uppercase}
.ccm__u{display:block;width:1.5rem;height:2px;margin:0 1.25rem .6rem;
 background:oklch(var(--p));border-radius:2px}
.ccm__l{display:block;padding:.85rem 1.25rem;min-height:50px;text-decoration:none;
 color:rgba(232,236,233,.82);font-size:.9375rem;border-bottom:1px solid rgba(255,255,255,.06)}
.ccm__l:active{background:rgba(255,255,255,.06)}
.ccm__l[aria-current="page"]{color:oklch(var(--p));font-weight:600}
.ccm__l--top{background:rgba(255,255,255,.05);color:oklch(var(--p));font-weight:600;
 font-size:1.0625rem;border-bottom:none;margin-top:.75rem}