/* ============================================================
   D360 NAVBAR PRODUITS — CSS commun (pilules colorées)
   Chargé dans layout_new.blade.php sur toutes les pages
   ============================================================ */
:root {
    --d360-teal:       #1a9a72;
    --d360-teal-light: #e8f7f2;
    --d360-teal-dark:  #0f6e52;
    --d360-blue:       #1a6aad;
    --d360-blue-light: #e6f1fb;
    --d360-blue-dark:  #114d80;
    --d360-coral:      #d85a30;
    --d360-coral-light:#faece7;
    --d360-coral-dark: #a94322;
    --d360-amber:      #ba7517;
    --d360-amber-light:#faeeda;
    --d360-amber-dark: #8a5510;
    --d360-gray-50:    #f8f9fa;
    --d360-gray-100:   #f1f3f4;
    --d360-gray-200:   #e9ecef;
    --d360-gray-400:   #adb5bd;
    --d360-gray-600:   #6c757d;
    --d360-gray-800:   #343a40;
    --d360-text:       #1a2332;
    --d360-radius:     12px;
    --d360-radius-sm:  8px;
    --d360-shadow:     0 2px 16px rgba(0,0,0,.07);
    --d360-shadow-md:  0 4px 24px rgba(0,0,0,.11);

    /* D360 feedback Aug-2026 F03: "unifier la taille de police sur tout le
       site (parties anciennes et nouvelles)". Shared type scale, additive
       only -- introduced here for new/updated components to converge on
       (this file, header, footer already use it below); intentionally NOT
       force-applied across every existing template in one pass, per the
       explicit "pas de search/replace CSS destructif" rule for this task. */
    --d360-fs-small:      0.8rem;   /* 12.8px -- helper text, badges, small print */
    --d360-fs-body:       0.95rem;  /* 15.2px -- paragraph / default body copy */
    --d360-fs-nav:        0.86rem;  /* 13.76px -- nav links, pills, buttons */
    --d360-fs-card-title: 1rem;     /* 16px -- card/feature titles (h4-ish) */
    --d360-fs-h3:         1.3rem;   /* 20.8px */
    --d360-fs-h2:         1.75rem;  /* 28px */
    --d360-fs-h1:         2.25rem;  /* 36px */
}

.navbar-center-links .nav-link {
    font-size: var(--d360-fs-nav);
    font-weight: 600;
    color: var(--d360-text);
    padding: 7px 14px;
    border-radius: 20px;
    transition: background .15s, color .15s;
}
.navbar-center-links .nav-link:hover { background: var(--d360-gray-100); }
.navbar-center-links .nav-link.active { background: var(--accent-light, #e8f7f2); color: var(--accent-dark, #0f6e52); }
.navbar-center-links .nav-item { margin: 0 2px; }
.nav-brandtag {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--d360-gray-600);
    line-height: 1;
    margin-top: 2px;
}
.btn-main-blue {
    background: var(--d360-blue); color: #fff; font-weight: 600;
    border-radius: var(--d360-radius-sm);
}
.btn-main-blue:hover { background: var(--d360-blue-dark); color: #fff; }
.btn-patient-access {
    background: var(--d360-teal); color: #fff; font-weight: 600;
    border-radius: var(--d360-radius-sm);
}
.btn-patient-access:hover { background: var(--d360-teal-dark); color: #fff; }
.dropdown-menu {
    border: 1px solid var(--d360-gray-200);
    border-radius: var(--d360-radius-sm);
    box-shadow: var(--d360-shadow-md);
    padding: 6px;
}
.dropdown-item {
    font-size: .86rem; font-weight: 500; border-radius: 6px; padding: 8px 12px;
}
.dropdown-item small { display: block; color: var(--d360-gray-600); font-weight: 400; font-size: .74rem; }
.dropdown-item:hover { background: var(--d360-gray-100); }
/* ── Navbar : pilules colorées permanentes (variante B) ── */
/* D360 feedback Aug-2026 F01: pills measured at inconsistent heights
   (34px vs 52px) in production -- root cause was long labels ("CareFlow
   Domicile", "Gestion de cabinet") wrapping to 2 lines inside the pill
   while short ones ("Tarifs", "Télémédecine") stayed on 1. nowrap keeps
   every pill the same single-line height; flex-wrap on the row lets the
   whole row drop to a second line at narrower desktop widths instead of
   overflowing the viewport horizontally (same fix pattern already used
   for the footer social icons row). */
.navbar-center-links { gap: 10px; row-gap: 8px; flex-wrap: wrap; }
.navbar-center-links .nav-item { margin: 0; }
.navbar-center-links .nav-link {
    border-radius: 12px; padding: 8px 16px; font-size: var(--d360-fs-nav); line-height: 1.25;
    white-space: nowrap;
}
/* D360 feedback Aug-2026 F02: CareFlow used to share the exact same teal
   token as "Gestion de cabinet" (li-cabinet), making the two entries
   visually indistinguishable in the pill row -- exactly the confusion the
   feedback described. CareFlow now gets its own amber treatment (defined
   in :root above but previously unused anywhere in this file) so it reads
   as a distinct, branded product entry without removing it from the row. */
.li-careflow > .nav-link {
    background: var(--d360-amber-light); color: var(--d360-amber-dark); }
.li-cabinet > .nav-link {
    background: var(--d360-teal-light); color: var(--d360-teal-dark); }
.li-tele > .nav-link {
    background: var(--d360-blue-light); color: var(--d360-blue-dark); }
.li-domicile > .nav-link {
    background: var(--d360-coral-light); color: var(--d360-coral-dark); }
.li-tarifs > .nav-link {
    background: var(--d360-gray-100); color: var(--d360-text); }
.navbar-center-links .nav-link:hover { filter: brightness(.955); }
/* D360 feedback Aug-2026 TASK-020: --d360-amber (#ba7517) gives only a
   3.72:1 contrast ratio against white text at this pill's 13.76px size
   (WCAG AA needs 4.5:1 for normal text). --d360-amber-dark (#8a5510)
   passes at 6.20:1 while staying visually amber/branded. Kept scoped to
   the CareFlow pill introduced in TASK-002 -- li-cabinet/li-tarifs below
   reuse the same active/white pattern with teal (3.55:1) and predate
   this run, a pre-existing systemic issue flagged separately rather than
   redesigned here. */
.li-careflow > .nav-link.active { background: var(--d360-amber-dark); color: #fff; }
.li-cabinet > .nav-link.active,
.li-tarifs > .nav-link.active { background: var(--d360-teal); color: #fff; }
.li-tele > .nav-link.active { background: var(--d360-blue); color: #fff; }
.li-domicile > .nav-link.active { background: var(--d360-coral); color: #fff; }
.navbar-center-links .nav-link.active .nav-brandtag { color: rgba(255,255,255,.85); }
.nav-brandtag { color: inherit; opacity: .75; }
/* Boutons d'accès : même gabarit que les pilules.
   V1.2 RUN 2+3 -- Chaima C2: "Accès Médecin"/"Accès Patient" rendered
   with different shapes in production. Root cause: resources/scss/style.scss
   has its own `.btn-main-blue { border-radius: 5px !important }` (used
   legitimately across ~30 other pages -- register forms, dashboards --
   left untouched here), compiled into the main app bundle which loads
   AFTER this file. Two `!important` rules of equal specificity resolve
   by source order, so that later, unrelated rule was silently winning
   for "Accès Médecin" (.btn-main-blue) but not "Accès Patient"
   (.btn-patient-access, which style.scss never touches) -- confirmed via
   getComputedStyle() showing 5px vs 10px on the live page. Scoping the
   selector to `header` raises its specificity above the bare class
   selector, which wins regardless of load order. */
header .btn-access { font-size: .82rem !important; font-weight: 600;
    padding: 8px 16px !important; border-radius: 10px !important; line-height: 1.25; }
/* Bouton de changement de langue FR <-> AR */
.lang-switch {
    border-radius: 999px !important;
    font-weight: 700;
    white-space: nowrap;
}
/* Logo: FR and AR wordmarks have different aspect ratios (600x184 vs
   1024x216) -- fix the height instead of the width so both occupy the
   same vertical space in the header regardless of source proportions.
   43px matches the FR logo's previous rendered size (width:140 at its
   own 184/600 ratio) so the French navbar is visually unchanged. */
.navbar-logo { height: 43px; width: auto; display: block; }
@media (max-width: 480px) {
    /* The AR wordmark is proportionally wider (1024x216 vs 600x184) --
       ease off a little on very small phones so logo + lang pill +
       burger keep a comfortable gap instead of crowding the edge. */
    .navbar-logo { height: 34px; }
}

/* Mobile-only lang switch beside the logo -- the full .lang-switch button
   inside the accordion below isn't reachable without opening the menu
   first below the lg breakpoint. Plain text on purpose: an earlier
   flag-emoji-only badge here rendered as literal "DZ"/"FR" fallback text
   on a real device without color-flag glyphs, worse than no icon. */
.lang-switch-mobile {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 10px;
    padding: 6px 13px;
    border: 1.5px solid var(--d360-blue);
    border-radius: 999px;
    color: var(--d360-blue);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.lang-switch-mobile:hover { background: var(--d360-blue-light); color: var(--d360-blue); }

/* Mobile-only persistent product strip -- the full nav above lives inside
   the collapsed accordion and isn't reachable without opening the menu
   first below the lg breakpoint. Promotes CareFlow, Télémédecine,
   CareFlow Domicile, Gestion de cabinet and Tarifs out of it, always
   visible, no tap required. */
.mobile-product-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 12px;
}
/* V1.2 RUN 2+3 -- Rayene R10 / mission section 9.1: "menu ouvert : masquer
   la bande persistante et afficher une seule navigation". This file's own
   original comment assumed the strip and the accordion were never visible
   together, but nothing actually enforced that -- confirmed live via
   Playwright (menu opened, the CareFlow/Télémédecine/CareFlow Domicile
   pills stayed on screen underneath the open dropdown, i.e. the exact
   duplication Rayene reported). Bootstrap adds `.show` to the collapse
   element when open; hide the persistent strip for as long as that class
   is present. */
header:has(#collapsibleNavId.show) .mobile-product-strip {
    display: none;
}
.mobile-product-strip::-webkit-scrollbar { display: none; }
.mps-pill {
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}
.mps-pill:hover { filter: brightness(.96); }
.mps-teal  { background: var(--d360-teal-light);  color: var(--d360-teal-dark); }
.mps-blue  { background: var(--d360-blue-light);  color: var(--d360-blue-dark); }
.mps-coral { background: var(--d360-coral-light); color: var(--d360-coral-dark); }
.mps-amber { background: var(--d360-amber-light); color: var(--d360-amber-dark); }
.mps-gray  { background: var(--d360-gray-100);    color: var(--d360-text); }
@media (max-width: 991px) {
    .navbar-center-links { gap: 8px; padding: 10px 0; }
    .navbar-center-links .nav-item { width: fit-content; }
}