/**
 * En-tête — menu flottant (option C, maquette du 15/10/2026)
 *
 * Balisage : inc/nav.php. Comportements : assets/js/cp-nav.js.
 * Chargé à la place de cp-navigation.css quand CP_NAV_V2 vaut true.
 *
 * Sélecteurs toujours préfixés par un conteneur (.cp-nav, .cp-nav-pro,
 * .cp-nav-compte, .cp-nav-panel) : le kit Elementor colore `a` avec une
 * spécificité 0,1,1, et GeneratePress habille tous les `button`.
 *
 * Points de rupture : ≥ 1200 complet · 960–1199 compact · < 960 mobile.
 *
 * @package CalepiParentalite
 */

/* ── Jetons ─────────────────────────────────────────────────────────────────── */

:root {
    --cp-nav-white:       #FFFFFF;
    --cp-nav-glass:       rgba(255, 255, 255, 0.72); /* pilule semi-transparente */
    --cp-nav-glass-solid: rgba(255, 255, 255, 0.95); /* sans backdrop-filter */
    --cp-nav-line:        rgba(44, 44, 42, 0.08);
    --cp-nav-line-strong: rgba(44, 44, 42, 0.18);
    --cp-nav-shadow:      0 10px 30px rgba(59, 42, 36, 0.10), 0 1px 2px rgba(59, 42, 36, 0.06);
    --cp-nav-shadow-pop:  0 18px 40px rgba(59, 42, 36, 0.16);
    --cp-nav-ink-muted:   #6B6A64; /* texte secondaire lisible sur blanc (5,3:1) */
    --cp-nav-ink-faint:   #9A988F; /* chevrons décoratifs */
    --cp-nav-cta:         #C64B31; /* corail assombri : blanc à 4,7:1 (4,1 sur --cp-coral) */
    --cp-nav-cta-hover:   #A83F28;
    --cp-nav-teal-soft:   #E4F2F0;
    --cp-nav-teal-soft-2: #D3EAE6;
    --cp-nav-teal-ink:    #2E6E68; /* turquoise lisible (5,1:1 sur --cp-nav-teal-soft) */
    --cp-nav-coral-soft:  #FBE3DC;
    --cp-nav-coral-ink:   #B8462D;
    --cp-nav-cacao-soft:  #EDE5DF;
    --cp-nav-on-cacao-hi: #E3D9CD; /* texte courant sur cacao */
    --cp-nav-on-cacao-ac: #F0A27F; /* accent sur cacao */
    --cp-nav-badge-bg:    rgba(91, 168, 160, 0.24);
    --cp-nav-badge-ink:   #B9E3DE;
    --cp-nav-hover-dark:  rgba(255, 255, 255, 0.08);
    --cp-nav-backdrop:    rgba(44, 44, 42, 0.45);

    /* Position de la pilule collée, et distance à réserver sous elle
       pour les éléments collants et les ancres (haut + écart + pilule + marge). */
    --cp-nav-top:    0px;  /* hauteur de la barre d'administration */
    --cp-nav-gap:    24px; /* écart entre le bord haut et la pilule */
    --cp-nav-h:      72px; /* hauteur de la pilule */
    --cp-nav-offset: calc(var(--cp-nav-top) + var(--cp-nav-gap) + var(--cp-nav-h) + 12px);
}

/* La barre d'administration est fixe à partir de 601 px. */
html:has(body.admin-bar) { --cp-nav-top: 32px; }
@media (max-width: 782px) {
    html:has(body.admin-bar) { --cp-nav-top: 46px; }
}
@media (max-width: 600px) {
    html:has(body.admin-bar) { --cp-nav-top: 0px; }
}

html { scroll-padding-top: var(--cp-nav-offset); }

/* Éléments collants des autres feuilles, qui visaient 24 px du haut. */
body .cp-gguide__toc { top: var(--cp-nav-offset); }

/* ── Barre pros (pleine largeur, défile avec la page) ───────────────────────── */

.cp-nav-pro {
    background: var(--cp-cacao);
    color:      var(--cp-cream);
    font-family: 'Lato', sans-serif;
}
.cp-nav-pro .cp-nav-pro__inner {
    max-width:  1440px;
    height:     44px;
    margin:     0 auto;
    padding:    0 30px 0 48px;
    box-sizing: border-box;
    display:    flex;
    align-items: center;
    gap:        12px;
}
.cp-nav-pro .cp-nav-pro__ico { display: flex; color: var(--cp-nav-on-cacao-ac); }
.cp-nav-pro .cp-nav-pro__q { font-size: 14px; font-weight: 700; }
.cp-nav-pro .cp-nav-pro__badge {
    font-size:     12px;
    font-weight:   700;
    padding:       4px 10px;
    border-radius: 999px;
    background:    var(--cp-nav-badge-bg);
    color:         var(--cp-nav-badge-ink);
}
.cp-nav-pro .cp-nav-pro__sp { flex: 1; }
.cp-nav-pro .cp-nav-pro__link,
.cp-nav-pro .cp-nav-pro__link:visited {
    padding:         8px 14px;
    border-radius:   999px;
    font-size:       14px;
    color:           var(--cp-nav-on-cacao-hi);
    text-decoration: none;
}
.cp-nav-pro .cp-nav-pro__link:hover,
.cp-nav-pro .cp-nav-pro__link:focus-visible {
    color:      var(--cp-nav-white);
    background: var(--cp-nav-hover-dark);
}
.cp-nav-pro .cp-nav-pro__cta,
.cp-nav-pro .cp-nav-pro__cta:visited {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         7px 16px 7px 18px;
    border-radius:   999px;
    background:      var(--cp-nav-cta);
    color:           var(--cp-nav-white);
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    transition:      background 0.18s ease;
}
.cp-nav-pro .cp-nav-pro__cta:hover { background: var(--cp-nav-cta-hover); color: var(--cp-nav-white); }

/* Version mobile : une seule ligne cliquable. */
.cp-nav-pro .cp-nav-pro__mobile { display: none; }

/* ── Pilule (collante) ──────────────────────────────────────────────────────── */

.cp-nav {
    position:       sticky;
    top:            var(--cp-nav-top);
    z-index:        250; /* au-dessus du collant de calepin-prenoms (200), sous ses surcouches (300+) et celles de relpro (900+) */
    padding:        var(--cp-nav-gap) 24px 0;
    margin-bottom:  12px;
    pointer-events: none; /* les bandes transparentes autour de la pilule laissent cliquer dessous */
    font-family:    'Lato', sans-serif;
}
.cp-nav .cp-nav__pill {
    pointer-events: auto;
    max-width:      1392px;
    height:         var(--cp-nav-h);
    margin:         0 auto;
    padding:        0 12px 0 14px;
    box-sizing:     border-box;
    display:        flex;
    align-items:    center;
    gap:            6px;
    background:     var(--cp-nav-glass);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter:         blur(16px) saturate(160%);
    border:         1px solid var(--cp-nav-line);
    border-radius:  999px;
    box-shadow:     var(--cp-nav-shadow);
    color:          var(--cp-graphite);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cp-nav .cp-nav__pill { background: var(--cp-nav-glass-solid); }
}

.cp-nav .cp-nav__logo { display: flex; align-items: center; margin-right: 14px; flex: none; }
.cp-nav .cp-nav__logo-img,
.cp-nav-panel .cp-nav__logo-img { display: block; height: 54px; width: auto; }
.cp-nav .cp-nav__logo-txt,
.cp-nav-panel .cp-nav__logo-txt { font-weight: 700; font-size: 17px; color: var(--cp-graphite); }

.cp-nav .cp-nav__links ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cp-nav .cp-nav__links li { margin: 0; }
.cp-nav .cp-nav__link,
.cp-nav .cp-nav__link:visited {
    display:         block;
    padding:         11px 16px;
    border-radius:   999px;
    font-size:       15px;
    line-height:     1.4;
    color:           var(--cp-graphite);
    text-decoration: none;
    white-space:     nowrap;
}
.cp-nav .cp-nav__link:hover { background: var(--cp-peach); color: var(--cp-graphite); }
.cp-nav .cp-nav__link.is-current { color: var(--cp-nav-teal-ink); font-weight: 700; }

.cp-nav .cp-nav__sp { flex: 1; }

/* Générateur : le bouton mis en avant */
.cp-nav .cp-nav__gen,
.cp-nav .cp-nav__gen:visited {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 18px;
    border-radius:   999px;
    background:      var(--cp-nav-teal-soft);
    color:           var(--cp-nav-teal-ink);
    font-size:       15px;
    font-weight:     700;
    line-height:     1.2;
    text-decoration: none;
    white-space:     nowrap;
    flex:            none;
}
.cp-nav .cp-nav__gen:hover,
.cp-nav .cp-nav__gen.is-current { background: var(--cp-nav-teal-soft-2); color: var(--cp-nav-teal-ink); }
.cp-nav .cp-nav__gen-m,
.cp-nav .cp-nav__gen-s { display: none; }

.cp-nav .cp-nav__sep { width: 1px; height: 28px; margin: 0 8px; background: var(--cp-nav-line-strong); flex: none; }

/* Mon compte — bouton (menu) ou lien (connecté) */
.cp-nav .cp-nav__compte,
.cp-nav .cp-nav__compte:visited {
    display:         flex;
    align-items:     center;
    gap:             8px;
    min-height:      44px;
    margin:          0;
    padding:         10px 16px 10px 12px;
    box-sizing:      border-box;
    border:          1px solid var(--cp-nav-line-strong);
    border-radius:   999px;
    background:      transparent;
    color:           var(--cp-graphite);
    font:            700 15px/1.2 'Lato', sans-serif;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    flex:            none;
}
.cp-nav .cp-nav__compte:hover,
.cp-nav .cp-nav__compte:focus-visible,
.cp-nav .cp-nav__compte.is-open { background: var(--cp-peach); color: var(--cp-graphite); }

/* CTA pro : n'apparaît dans la pilule qu'une fois la barre pros sortie de l'écran */
.cp-nav .cp-nav__cta { display: none; }
.cp-nav.is-scrolled .cp-nav__cta,
.cp-nav.is-scrolled .cp-nav__cta:visited {
    display:         flex;
    align-items:     center;
    margin-left:     6px;
    padding:         13px 22px;
    border-radius:   999px;
    background:      var(--cp-nav-cta);
    color:           var(--cp-nav-white);
    font-size:       15px;
    font-weight:     700;
    line-height:     1.2;
    text-decoration: none;
    white-space:     nowrap;
    flex:            none;
    animation:       cp-nav-in 0.2s ease;
}
.cp-nav.is-scrolled .cp-nav__cta:hover { background: var(--cp-nav-cta-hover); color: var(--cp-nav-white); }

@keyframes cp-nav-in {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: none; }
}

/* Boutons ronds (mobile) */
.cp-nav .cp-nav__ibtn,
.cp-nav-panel .cp-nav__ibtn {
    width:           44px;
    height:          44px;
    min-height:      44px;
    margin:          0;
    padding:         0;
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid var(--cp-nav-line-strong);
    border-radius:   50%;
    background:      transparent;
    color:           var(--cp-graphite);
    cursor:          pointer;
    flex:            none;
}
.cp-nav .cp-nav__burger { background: var(--cp-graphite); border-color: var(--cp-graphite); color: var(--cp-nav-white); }
.cp-nav .cp-nav__burger:hover,
.cp-nav .cp-nav__burger:focus-visible { background: var(--cp-cacao); color: var(--cp-nav-white); }
.cp-nav .cp-nav__compte-m:hover { background: var(--cp-peach); color: var(--cp-graphite); }
.cp-nav .cp-nav__compte-m,
.cp-nav .cp-nav__burger { display: none; }

.cp-nav-ico { display: block; flex: none; }

/* ── Menu « Mon compte » (popover natif) ────────────────────────────────────── */

/* Masqué par défaut : un navigateur sans popover ignorera la règle d'ouverture. */
.cp-nav-compte { display: none; }
.cp-nav-compte:popover-open {
    position:       fixed;
    inset:          auto;
    top:            calc(var(--cp-nav-top) + var(--cp-nav-gap) + var(--cp-nav-h) + 10px); /* recalculé par cp-nav.js */
    right:          36px;
    margin:         0;
    width:          360px;
    max-width:      calc(100vw - 24px);
    box-sizing:     border-box;
    padding:        10px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    background:     var(--cp-nav-white);
    border:         1px solid var(--cp-nav-line);
    border-radius:  22px;
    box-shadow:     var(--cp-nav-shadow-pop);
    color:          var(--cp-graphite);
    font-family:    'Lato', sans-serif;
}
.cp-nav-compte .cp-nav-compte__row,
.cp-nav-compte .cp-nav-compte__row:visited {
    display:         flex;
    gap:             14px;
    align-items:     flex-start;
    padding:         14px;
    border-radius:   14px;
    color:           var(--cp-graphite);
    text-decoration: none;
}
.cp-nav-compte .cp-nav-compte__row:hover,
.cp-nav-compte .cp-nav-compte__row:focus-visible { background: var(--cp-cream); color: var(--cp-graphite); }
.cp-nav-compte .cp-nav-compte__ico {
    flex:            none;
    width:           40px;
    height:          40px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.cp-nav-compte .cp-nav-compte__ico--parent { background: var(--cp-nav-coral-soft); color: var(--cp-nav-coral-ink); }
.cp-nav-compte .cp-nav-compte__ico--pro    { background: var(--cp-nav-cacao-soft); color: var(--cp-cacao); }
.cp-nav-compte .cp-nav-compte__txt { display: flex; flex-direction: column; gap: 2px; }
.cp-nav-compte .cp-nav-compte__txt strong { font-size: 15px; font-weight: 700; }
.cp-nav-compte .cp-nav-compte__txt span { font-size: 13px; line-height: 1.45; color: var(--cp-nav-ink-muted); }
.cp-nav-compte .cp-nav-compte__note {
    margin:      4px 6px;
    padding:     10px 8px 4px;
    border-top:  1px solid var(--cp-nav-line);
    font-size:   13px;
    line-height: 1.45;
    color:       var(--cp-nav-ink-muted);
}

/* ── Panneau mobile (<dialog>) ──────────────────────────────────────────────── */

.cp-nav-panel {
    position:   fixed;
    inset:      12px;
    width:      auto;
    height:     auto;
    max-width:  none;
    max-height: none;
    margin:     0;
    padding:    10px 12px 12px;
    box-sizing: border-box;
    border:     0;
    border-radius: 30px;
    background: var(--cp-nav-white);
    box-shadow: 0 24px 60px rgba(44, 44, 42, 0.30);
    color:      var(--cp-graphite);
    font-family: 'Lato', sans-serif;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cp-nav-panel[open] { display: flex; flex-direction: column; gap: 14px; }
.cp-nav-panel::backdrop { background: var(--cp-nav-backdrop); }
html:has(.cp-nav-panel[open]) { overflow: hidden; }

.cp-nav-panel p { margin: 0; }
.cp-nav-panel .cp-nav-panel__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-left: 2px; }
.cp-nav-panel .cp-nav__logo { display: flex; align-items: center; }
.cp-nav-panel .cp-nav__logo-img { height: 48px; }
.cp-nav-panel .cp-nav-panel__close { background: var(--cp-peach); border-color: var(--cp-peach); }

.cp-nav-panel .cp-nav-panel__gen,
.cp-nav-panel .cp-nav-panel__gen:visited {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         16px;
    border-radius:   20px;
    background:      var(--cp-nav-teal-soft);
    color:           var(--cp-nav-teal-ink);
    text-decoration: none;
}
.cp-nav-panel .cp-nav-panel__gen:hover { background: var(--cp-nav-teal-soft-2); color: var(--cp-nav-teal-ink); }
.cp-nav-panel .cp-nav-panel__gen-ico {
    flex:            none;
    width:           44px;
    height:          44px;
    border-radius:   14px;
    background:      var(--cp-nav-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.cp-nav-panel .cp-nav-panel__gen-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cp-nav-panel .cp-nav-panel__gen-txt strong { font-size: 17px; color: var(--cp-graphite); }
.cp-nav-panel .cp-nav-panel__gen-txt span { font-size: 13px; }

.cp-nav-panel .cp-nav-panel__list { margin: 0; padding: 0; list-style: none; }
.cp-nav-panel .cp-nav-panel__list li { margin: 0; }
.cp-nav-panel .cp-nav-panel__link,
.cp-nav-panel .cp-nav-panel__link:visited {
    display:         flex;
    align-items:     center;
    gap:             14px;
    min-height:      54px;
    padding:         0 10px;
    border-radius:   14px;
    font-size:       16px;
    font-weight:     700;
    color:           var(--cp-graphite);
    text-decoration: none;
}
.cp-nav-panel .cp-nav-panel__link:hover { background: var(--cp-cream); color: var(--cp-graphite); }
.cp-nav-panel .cp-nav-panel__link[aria-current="page"] { color: var(--cp-nav-teal-ink); }
.cp-nav-panel .cp-nav-panel__link .cp-nav-ico:first-child { color: var(--cp-nav-ink-muted); }
.cp-nav-panel .cp-nav-panel__link span { flex: 1; }
.cp-nav-panel .cp-nav-panel__link .cp-nav-ico:last-child { color: var(--cp-nav-ink-faint); }

.cp-nav-panel .cp-nav-panel__compte { display: flex; flex-direction: column; gap: 8px; }
.cp-nav-panel .cp-nav-panel__label {
    padding-left:   4px;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--cp-nav-ink-muted);
}
.cp-nav-panel .cp-nav-panel__accs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-nav-panel .cp-nav-panel__acc,
.cp-nav-panel .cp-nav-panel__acc:visited {
    display:         flex;
    align-items:     center;
    gap:             10px;
    min-height:      56px;
    padding:         0 14px;
    border:          1px solid var(--cp-nav-line-strong);
    border-radius:   16px;
    font-size:       15px;
    font-weight:     700;
    color:           var(--cp-graphite);
    text-decoration: none;
}
.cp-nav-panel .cp-nav-panel__acc:hover { background: var(--cp-cream); color: var(--cp-graphite); }
.cp-nav-panel .cp-nav-panel__acc--parent .cp-nav-ico { color: var(--cp-nav-coral-ink); }
.cp-nav-panel .cp-nav-panel__acc--pro .cp-nav-ico { color: var(--cp-cacao); }

.cp-nav-panel .cp-nav-panel__pro {
    margin-top:     auto;
    padding:        18px;
    border-radius:  22px;
    background:     var(--cp-cacao);
    color:          var(--cp-cream);
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.cp-nav-panel .cp-nav-panel__pro-k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-nav-on-cacao-ac); }
.cp-nav-panel .cp-nav-panel__pro-t { font-size: 14px; line-height: 1.5; color: var(--cp-nav-on-cacao-hi); }
.cp-nav-panel .cp-nav-panel__pro-cta,
.cp-nav-panel .cp-nav-panel__pro-cta:visited {
    margin-top:      4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    min-height:      50px;
    border-radius:   999px;
    background:      var(--cp-nav-cta);
    color:           var(--cp-nav-white);
    font-size:       16px;
    font-weight:     700;
    text-decoration: none;
}
.cp-nav-panel .cp-nav-panel__pro-cta:hover { background: var(--cp-nav-cta-hover); color: var(--cp-nav-white); }
.cp-nav-panel .cp-nav-panel__pro-link,
.cp-nav-panel .cp-nav-panel__pro-link:visited {
    align-self: center;
    padding:    8px 12px;
    font-size:  14px;
    color:      var(--cp-nav-on-cacao-hi);
    text-decoration: underline;
}

/* Focus clavier visible partout */
.cp-nav a:focus-visible,
.cp-nav button:focus-visible,
.cp-nav-pro a:focus-visible,
.cp-nav-compte a:focus-visible,
.cp-nav-panel a:focus-visible,
.cp-nav-panel button:focus-visible {
    outline:        2px solid var(--cp-teal);
    outline-offset: 2px;
}

/* ── Compact : 960 – 1199 px ────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .cp-nav .cp-nav__gen-l { display: none; }
    .cp-nav .cp-nav__gen-m { display: inline; }
    .cp-nav .cp-nav__link { padding: 11px 12px; }
    .cp-nav .cp-nav__gen { padding: 12px 16px; }
    /* Pas la place pour le CTA : il reste dans la barre pros, en haut de page. */
    .cp-nav.is-scrolled .cp-nav__cta { display: none; }
}
@media (max-width: 1099px) {
    .cp-nav-pro .cp-nav-pro__badge { display: none; }
}

/* ── Mobile : moins de 960 px ───────────────────────────────────────────────── */

@media (max-width: 959px) {
    :root { --cp-nav-gap: 16px; --cp-nav-h: 64px; }

    .cp-nav-pro .cp-nav-pro__inner { display: none; }
    .cp-nav-pro .cp-nav-pro__mobile,
    .cp-nav-pro .cp-nav-pro__mobile:visited {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
        min-height:      44px;
        padding:         0 16px;
        font-size:       14px;
        color:           var(--cp-nav-on-cacao-hi);
        text-decoration: none;
    }
    .cp-nav-pro .cp-nav-pro__mobile strong { color: var(--cp-nav-white); text-decoration: underline; }
    .cp-nav-pro .cp-nav-pro__mobile:hover { color: var(--cp-nav-white); }

    .cp-nav { padding: var(--cp-nav-gap) 12px 0; }
    .cp-nav .cp-nav__pill { padding: 0 8px 0 10px; }
    .cp-nav .cp-nav__logo { margin-right: 0; }
    .cp-nav .cp-nav__logo-img { height: 48px; }

    .cp-nav .cp-nav__links,
    .cp-nav .cp-nav__sep,
    .cp-nav .cp-nav__compte--menu,
    .cp-nav .cp-nav__cta,
    .cp-nav.is-scrolled .cp-nav__cta { display: none; }

    .cp-nav .cp-nav__gen { height: 44px; padding: 0 14px; gap: 6px; font-size: 14px; box-sizing: border-box; }
    .cp-nav .cp-nav__gen-m { display: none; }
    .cp-nav .cp-nav__gen-s { display: inline; }

    /* Connecté : le lien de compte devient un bouton rond */
    .cp-nav a.cp-nav__compte { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
    .cp-nav a.cp-nav__compte .cp-nav__compte-l { display: none; }

    .cp-nav .cp-nav__compte-m,
    .cp-nav .cp-nav__burger { display: flex; }
}

@media (max-width: 359px) {
    .cp-nav .cp-nav__gen-s { display: none; }
    .cp-nav .cp-nav__gen { width: 44px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-nav.is-scrolled .cp-nav__cta { animation: none; }
}