/* CSS du header COPILOF — centralisé depuis contenu-des-pages-optimisees/accueil/index.html
   Source de vérité unique. Modifier ici, pas dans les pages.
   Dépend des variables définies dans le :root inline de chaque page
   (--navy, --teal, --teal-ink, --line, --muted, --fb, --container, etc.)
   et des tokens de assets/css/brand.css.

   Refonte visuelle du menu (charte) :
     bleu marine principal  #14304C  (rangée 1 — var --navy)
     bleu marine secondaire #0e2438  (rangée 2 — valeur littérale : le token
                                      --navy-deep des pages vaut #0e2439)
     turquoise texte/icônes #28AEC5  (var --teal)
   Les valeurs littérales servent de repli si une page ne déclare pas encore
   le token correspondant. */

/* ===== HEADER (partial officiel COPILOF) ===== */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);transition:.3s}
header.scrolled{box-shadow:0 6px 20px rgba(20,48,76,.14)}
.header-top{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:13px 24px;transition:.3s}
header.scrolled .header-top{padding:8px 24px}
.logo{flex-shrink:0}
.logo img{height:48px;width:auto;display:block}
.logo .logo-fonce{display:none}
header.scrolled .logo img{height:40px}
.header-cta{display:flex;align-items:center;gap:16px}

/* ===== MESSAGE COMPTE A REBOURS V10 (dans .header-top, pas de bandeau) =====
   Place a l'interieur de <header> pour que sync-header-footer.js le REMPLACE
   au lieu de l'empiler (il ne remplace que <header>...</header>).
   Couleurs : navy #14304C (12:1 sur blanc) et teal-ink #17798B (5.07:1),
   toutes deux conformes WCAG AA. Ne PAS utiliser --teal #28AEC5 ici : 2.2:1.
   A retirer (ce bloc + le <p class="header-v10"> et son <script> dans
   assets/partials/header.html) apres le 1er novembre 2026. */
.header-v10{flex:1 1 auto;min-width:0;margin:0;padding:0 18px;text-align:center;font-family:var(--fb);font-size:1.08rem;font-weight:700;line-height:1.25;color:var(--navy,#14304C)}
.header-v10 strong{font-weight:800;color:var(--teal-ink,#17798B);white-space:nowrap}
.header-v10 a{color:var(--navy,#14304C);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap}
.header-v10 a:hover{color:var(--teal-ink,#17798B)}
/* Menu mobile ouvert : .header-top passe en navy, le texte navy y serait illisible. */
header.is-open .header-v10{display:none}
@media(max-width:1240px){.header-v10{font-size:.93rem;padding:0 12px}}
/* Sous 1040px la barre est saturee en largeur (logo + telephone + burger, le
   bouton RDV ayant deja bascule dans le menu) : le message passe donc sur sa
   propre ligne, en pleine largeur, sous le logo. Il ne s'affiche qu'en haut de
   page et disparait des que l'utilisateur scrolle, pour que le header collant
   reste compact pendant toute la navigation. */
@media(max-width:1040px){
  .header-top{flex-wrap:wrap}
  .header-v10{order:3;flex:0 0 100%;width:100%;margin:9px 0 0;padding:8px 0 0;font-size:.82rem;line-height:1.35;border-top:1px solid var(--line,#e3ebf2)}
  header.scrolled .header-v10{display:none}
}

/* Bloc « Nous appeler » — pastille arrondie + icône téléphone turquoise */
.phone-link{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 7px;border-radius:999px;background:#f1f6fa;border:1px solid var(--line);line-height:1.15;transition:.25s}
.phone-link:hover{background:var(--teal-soft);border-color:rgba(40,174,197,.4)}
/* Icône en turquoise de charte #28AEC5. Le trait est épaissi (1.75 -> 2.1)
   parce qu'à 16px ce turquoise sur fond clair est peu contrasté : c'est la
   masse du trait, pas la teinte, qui le rend lisible. L'information reste
   portée par le texte « Nous appeler » et le numéro, jamais par l'icône. */
.phone-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#fff;color:var(--teal,#28AEC5);box-shadow:0 1px 3px rgba(20,48,76,.1)}
.phone-icon svg{width:16px;height:16px;stroke-width:2.1}
.phone-text{display:flex;flex-direction:column;text-align:left}
.phone-label{font-size:.7rem;color:var(--muted)}
.phone-number{font-weight:700;color:var(--navy);font-family:var(--fb);font-size:.95rem}

/* Bouton « Prendre RDV » — ombre portée turquoise */
.btn-rdv{background:var(--teal);color:var(--navy);padding:11px 22px;border-radius:999px;font-family:var(--fb);font-weight:700;transition:.25s;white-space:nowrap;box-shadow:0 6px 18px rgba(40,174,197,.45)}
.btn-rdv:hover{background:var(--teal-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(40,174,197,.5)}

/* Hamburger — 3 traits turquoise dans un carré bleu marine arrondi */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:12px;background:var(--navy,#14304C);position:relative;cursor:pointer;transition:.25s}
.nav-toggle:hover{background:#1c4066}
/* left:0 sur ::before/::after — ils se positionnent par rapport au <span>,
   lui-même absolu : reprendre son left:12px les décalerait de 12px de plus
   (les traits du haut et du bas débordaient à droite du carré). */
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;width:20px;height:2px;background:var(--teal,#28AEC5);border-radius:2px;transition:.25s}
.nav-toggle span{left:12px;top:21px}
.nav-toggle span::before{left:0;top:-6px}
.nav-toggle span::after{left:0;top:6px}
header.is-open .nav-toggle span{background:transparent}
header.is-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
header.is-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

/* ===== NAVIGATION — deux rangées bleu marine ===== */
nav{display:block}
.nav-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;padding:0 12px;background:var(--navy,#14304C)}
.nav-row--sub{background:#0e2438;border-top:1px solid rgba(255,255,255,.08)}

/* Même taille, même graisse et même turquoise sur les deux rangées — et la
   même à TOUTES les largeurs desktop : .87rem/padding 9px fait tenir la
   rangée 1 en 1228px, donc sur une seule ligne dès le seuil de 1240px.
   Un palier intermédiaire ferait sauter la typo au redimensionnement. */
.nav-row>a,.dropdown-trigger{display:inline-flex;align-items:center;gap:7px;padding:13px 9px;font-weight:700;font-size:.87rem;line-height:1.3;color:var(--teal,#28AEC5);cursor:pointer;border-radius:10px;transition:color .2s,background .2s}
.nav-row>a:focus-visible,.dropdown-trigger:focus-visible{outline:2px solid var(--teal,#28AEC5);outline-offset:-2px}
.nav-icon{width:15px;height:15px;flex-shrink:0}

/* Onglet actif — pastille pleine turquoise, texte bleu marine */
.nav-row>a.nav-highlight{background:var(--teal,#28AEC5);color:var(--navy,#14304C);border-radius:999px;padding:9px 16px;margin:0 4px;box-shadow:0 4px 14px rgba(40,174,197,.3)}
.nav-row>a.nav-highlight::before{content:none}
.nav-row>a.nav-highlight:hover{background:var(--teal-hover,#4FC3D6);color:var(--navy,#14304C)}

/* Chevrons des sous-menus — turquoise, plus grands et plus visibles */
.chevron{width:16px;height:16px;flex-shrink:0;stroke-width:2.4;transition:transform .25s}
.has-dropdown{position:relative}
.dropdown-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 54px rgba(20,48,76,.22);padding:12px;min-width:290px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:60}
.dropdown-panel a{padding:9px 12px;border-radius:9px;color:var(--navy);font-size:.9rem;font-weight:500}
.dropdown-panel a:hover{background:var(--teal-soft);color:var(--teal-ink)}
.dropdown-panel.is-mega{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:6px 14px;min-width:740px;left:50%;transform:translateX(-50%) translateY(8px)}
.dropdown-group{display:flex;flex-direction:column;gap:1px}
.dropdown-panel.is-mega a{display:block;white-space:normal}
.dropdown-group-title{margin-bottom:2px}
.dropdown-group-title{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-weight:700;color:var(--teal-ink);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 4px}
.dropdown-group-title svg{width:16px;height:16px}
.dropdown-featured{display:flex;align-items:center;gap:10px;background:var(--teal-soft);border-radius:10px;padding:10px 12px}
.featured-icon svg{width:22px;height:22px;color:var(--teal-ink)}
.featured-label{display:block;font-size:.68rem;color:var(--teal-ink);text-transform:uppercase;font-weight:700}
.dropdown-featured .featured-text{font-weight:600;color:var(--navy);font-family:var(--fb)}
.dropdown-divider{height:1px;background:var(--line);margin:6px 4px}

/* Survol : desktop uniquement. Sur écran tactile, un tap laisse :hover
   collé à l'élément — les règles ci-dessous rouvriraient le panneau et
   réappliqueraient son translateX(-50%), qui décale le méga-menu déplié
   hors de l'écran. Elles sont donc hors de portée du menu mobile. */
@media(min-width:1241px){
  .nav-row>a:hover,.dropdown-trigger:hover{color:var(--teal-hover,#4FC3D6);background:rgba(255,255,255,.07)}
  .has-dropdown:hover .chevron{transform:rotate(180deg)}
  .has-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
  .has-dropdown:hover .dropdown-panel.is-mega{transform:translateX(-50%) translateY(0)}
}

/* CTA épinglé en bas du menu mobile — masqué en desktop */
.nav-mobile-cta{display:none}

@media(max-width:1240px){
  .nav-toggle{display:inline-flex}
  .header-cta{gap:10px}
  /* Le RDV quitte la barre du haut : il est épinglé en bas du menu ouvert */
  .header-cta .btn-rdv{display:none}
  /* Le numéro reste visible à côté du logo : c'est le premier moyen de
     contact des OF, le masquer derrière une icône le rendait invisible.
     Seul le libellé « Nous appeler » saute, faute de place. */
  .phone-link{display:inline-flex;gap:8px;padding:5px 14px 5px 5px;background:var(--teal-soft,#eaf7fa);border-color:transparent}
  .phone-label{display:none}
  .phone-icon{width:34px;height:34px}
  .phone-icon svg{width:17px;height:17px}
  .phone-number{font-size:.95rem;white-space:nowrap}
  /* Menu ouvert : le bandeau passe en marine, le numéro doit suivre */
  header.is-open .phone-number{color:#fff}

  /* Menu ouvert : overlay plein écran, barre du haut comprise. Le logo
     bascule sur sa variante blanche (assets/brand/logo-copilof-blanc.png,
     dérivée du logo officiel : marine -> blanc, turquoise conservé) — le
     PNG d'origine est marine et disparaîtrait sur ce fond. */
  header.is-open{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--navy,#14304C)}
  /* Filet identique à celui de la rangée 2 : sans lui la barre et le premier
     bloc, tous deux #14304C, se confondent en un seul aplat. */
  header.is-open .header-top{background:var(--navy,#14304C);border-bottom:1px solid rgba(255,255,255,.09)}
  header.is-open .logo .logo-clair{display:none}
  header.is-open .logo .logo-fonce{display:block}
  /* Sur marine, le carré marine du hamburger ne se détache plus : on le
     remonte en surbrillance translucide, comme la pastille du téléphone. */
  header.is-open .nav-toggle,header.is-open .phone-link{background:rgba(255,255,255,.12);border-color:transparent}
  header.is-open .nav-toggle:hover,header.is-open .phone-link:hover{background:rgba(255,255,255,.2)}
  header.is-open .phone-icon{color:var(--teal,#28AEC5)}
  body.nav-open{overflow:hidden}

  nav{display:none}
  header.is-open nav{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#0e2438}

  /* Les deux mêmes nuances qu'en desktop, empilées */
  .nav-row{display:block;padding:8px 0}
  .nav-row>a,.dropdown-trigger{display:flex;width:100%;justify-content:flex-start;gap:12px;padding:14px 20px;font-size:.95rem;border-radius:0}
  .has-dropdown.is-expanded>.dropdown-trigger{background:rgba(255,255,255,.07)}
  .nav-icon{width:17px;height:17px}
  /* Icône à gauche, chevron rejeté à droite */
  .nav-row>a .chevron,.dropdown-trigger .chevron{margin-left:auto}
  .nav-row>a.nav-highlight{width:auto;margin:6px 14px;padding:14px 18px;border-radius:12px}

  /* Sous-menus dépliés : lisibles sur le fond marine, structure HTML inchangée */
  .has-dropdown.is-expanded>.dropdown-trigger .chevron{transform:rotate(180deg)}
  .dropdown-panel,.dropdown-panel.is-mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;background:rgba(0,0,0,.22);display:none;min-width:0;grid-template-columns:1fr;padding:4px 0 8px}
  .has-dropdown.is-expanded .dropdown-panel,.has-dropdown.is-expanded .dropdown-panel.is-mega{display:flex;flex-direction:column}
  .dropdown-panel a{color:rgba(255,255,255,.84);padding:11px 20px 11px 49px;border-radius:0}
  .dropdown-panel a:hover{background:rgba(255,255,255,.07);color:#fff}
  .dropdown-group-title{color:var(--teal,#28AEC5);padding:12px 20px 4px 49px}
  .dropdown-group-title svg,.featured-icon svg,.featured-label{color:var(--teal,#28AEC5)}
  .dropdown-featured{background:rgba(255,255,255,.08);margin:4px 16px}
  .dropdown-featured .featured-text{color:#fff}
  .dropdown-divider{background:rgba(255,255,255,.12);margin:6px 16px}

  /* « Prendre RDV » toujours visible, sans scroller */
  header.is-open .nav-mobile-cta{display:block;flex:0 0 auto;padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--navy,#14304C);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -10px 24px rgba(8,24,40,.45)}
  .nav-mobile-cta .btn-rdv{display:block;width:100%;text-align:center;padding:15px 20px;font-size:1rem}
  .nav-mobile-cta .btn-rdv:hover{transform:none}
}

/* Petits téléphones : logo, numéro et hamburger doivent tenir sur une ligne
   sans manger les marges latérales. À 360px, sans ce palier, le hamburger
   sortait de l'écran. Le logo est le seul élément vraiment compressible —
   le numéro et la zone de tap du hamburger, non. */
@media(max-width:480px){
  .header-top{padding:11px 16px}
  header.scrolled .header-top{padding:7px 16px}
  .logo img{height:40px}
  header.scrolled .logo img{height:36px}
  .header-cta{gap:8px}
  .phone-link{gap:6px;padding:4px 11px 4px 4px}
  .phone-icon{width:30px;height:30px}
  .phone-icon svg{width:16px;height:16px}
  .phone-number{font-size:.92rem}
}

/* Écrans étroits (Android 360px) : la pastille et le cercle blanc de l'icône
   coûtent ~25px de décor pour rien. On les retire — le numéro reste en clair,
   seul le fond disparaît. Rapetisser le logo à la place serait pire : sa
   baseline « Partenaire de la conformité… » est dans l'image et deviendrait
   illisible. */
@media(max-width:400px){
  .phone-link{background:transparent;padding:0;gap:5px}
  .phone-link:hover{background:transparent}
  .phone-icon{width:20px;height:20px;background:transparent;box-shadow:none}
  .phone-icon svg{width:20px;height:20px}
}

/* En dessous, plus rien ne tient : le numéro repasse en bouton rond à icône
   seule plutôt que de rogner la marge ou de couper le hamburger. L'appel
   reste à un tap, et le numéro complet est dans le pied de page. */
@media(max-width:340px){
  .phone-link{width:42px;height:42px;padding:0;justify-content:center}
  .phone-text{display:none}
  .phone-icon{width:100%;height:100%;background:transparent;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  .chevron,.btn-rdv,.nav-row>a,.dropdown-trigger,.dropdown-panel{transition:none}
  .btn-rdv:hover{transform:none}
}