/*
 * Site vitrine : chargé après design_site.css par src/site/template.php et src/site/login.php ; ne
 * change que l'apparence (Verdana et fond blanc gardés, décision du 22/10/2026).
 *
 * Système de couleurs (24/10/2026 : « trop de nuances de bleu, manque de contraste ») :
 *   - un seul bleu de marque (--ep-brand) : bandeau du titre, liens, boutons, icônes ; jamais deux
 *     bleus côte à côte ;
 *   - texte presque noir (--ep-ink), gris pour le secondaire ; titres en noir, pas en bleu ;
 *   - fonds blancs, gris très clair (--ep-surface) pour alterner les sections ;
 *   - pied de page sombre neutre (--ep-footer) : il se détache du bandeau bleu ;
 *   - un seul bouton principal par écran : Connexion dans la barre du haut.
 * Contrastes (texte sur fond) : ink / blanc 16:1, ink-2 / blanc 9:1, muted / blanc 5,9:1,
 * blanc / brand 7,5:1, texte du pied / footer 11:1.
 */

:root {
  --ep-brand: #00598A;
  --ep-brand-dark: #00476E;
  --ep-brand-tint: #EEF4F8;
  --ep-ink: #1B1F23;
  --ep-ink-2: #3D4650;
  --ep-muted: #5B6670;
  --ep-line: #DCE1E5;
  --ep-surface: #F5F7F9;
  --ep-footer: #1E2830;
  --ep-footer-2: #151C22;
  --ep-footer-text: #D5DCE2;
  --ep-font: Verdana, Tahoma, Arial, sans-serif;
  /* Noms gardés pour la page de connexion et les fenêtres */
  --ep-accent: var(--ep-brand);
  --ep-primary: var(--ep-brand);
  --ep-primary-dark: var(--ep-brand-dark);
  --ep-text: var(--ep-ink);
  --ep-text-2: var(--ep-ink-2);
  --ep-border: var(--ep-line);
}

body { background-color: #FFFFFF; font-family: var(--ep-font); color: var(--ep-ink); }

/* ---------- Barre du haut (fixe) : blanche, liens en noir, page en cours soulignée ---------- */
#menu {
  background: #FFFFFF; color: var(--ep-ink); border-bottom: 1px solid var(--ep-line);
  font-family: var(--ep-font); text-transform: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
#menu a { color: var(--ep-ink); font-size: 15px; font-weight: 700; border-radius: 8px; }
#menu a:hover { background-color: var(--ep-brand-tint); color: var(--ep-brand); }
#menu ul a[aria-current="page"] { color: var(--ep-brand); box-shadow: inset 0 -3px 0 var(--ep-brand); border-radius: 0; }
#menu #logo a, #menu #logo a:hover { display: inline-flex; align-items: center; gap: 10px; background-color: transparent; color: var(--ep-ink); }
#menu #logo .ep-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 8px; background: var(--ep-brand); color: #FFFFFF;
}
/* Nom et accroche dans un même bloc (l'espace du flex séparait « E-Plan » de sa virgule) */
#menu #logo a .ep-logo-name { font-size: 24px; font-weight: 700; color: var(--ep-ink); }
#menu #logo a .ep-logo-name span { font-size: 14px; font-weight: 400; color: var(--ep-muted); text-transform: none; }
#menu #seeMenu { color: var(--ep-ink); background-image: none; font-weight: 700; border: 1px solid var(--ep-line); border-radius: 8px; }
#menu #seeMenu:hover, #menu #seeMenu:active { background-color: var(--ep-brand-tint); }
/* Bouton Connexion (ou Mon agenda) : le seul bouton plein de la barre */
#menu li.ep-nav-login a { margin-left: 8px; background: var(--ep-brand); color: #FFFFFF; border-radius: 8px; box-shadow: none; }
#menu li.ep-nav-login a:hover, #menu li.ep-nav-login a:focus-visible { background: var(--ep-brand-dark); color: #FFFFFF; }
#menu li.ep-nav-login a span { font-family: icomoon; font-weight: 400; }
/* Navigation en flex au-dessus du seuil mobile : le layout d'origine en float débordait selon le rendu
   des polices (menu « en désordre » vers 1450 px sur Firefox). Flex = répartition stable et repli propre.
   En dessous de 616 px, le menu replié (#seeMenu piloté en JS) n'est pas touché. */
@media (min-width: 616px) {
  #menu #inner-menu { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #menu #logo { float: none; padding-right: 10px; }
  #menu ul { float: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; margin: 0; }
  #menu ul li { float: none; display: block; padding: 0; }
}

/* ---------- Bandeau du titre : bleu de marque uni, titre aligné sur le contenu ---------- */
#title-page { background-image: none; background: var(--ep-brand); }
#title-page h1 {
  box-sizing: border-box; width: 80%; margin: 0 10%; padding: 26px 0; text-align: left;
  font-family: var(--ep-font); font-weight: 700; font-size: 28px; line-height: 1.3; color: #FFFFFF; letter-spacing: 0;
}
/* L'ancien bouton Connexion du bandeau : remplacé par celui de la barre du haut ; gardé sur
   téléphone, où le menu est replié */
#title-page > a.button { display: none; }
#breadcrumb { background-color: #FFFFFF; color: var(--ep-muted); border-bottom: 1px solid var(--ep-line); font-family: var(--ep-font); font-size: 12px; }
#breadcrumb a { color: var(--ep-brand); }
#breadcrumb a:hover { text-decoration: underline; }
#breadcrumb a.active { color: var(--ep-ink); }

/* ---------- Contenu : texte foncé aligné à gauche, titres en noir, liens bleus soulignés ---------- */
#page { background-color: #FFFFFF; }
#content { font-family: var(--ep-font); font-size: 14px; font-weight: 400; line-height: 1.65; color: var(--ep-ink-2); }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-family: var(--ep-font); font-weight: 700; color: var(--ep-ink); letter-spacing: 0; }
#content h2 { font-size: 20px; margin-top: 28px; }
#content p, #content ul li { text-align: left; }
#content strong, #content b { color: var(--ep-ink); }
#content a:not(.button) { color: var(--ep-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#content a:not(.button):hover, #content a:not(.button):focus-visible { color: var(--ep-brand-dark); text-decoration-thickness: 2px; }
#content img { max-width: 100%; height: auto; }
/* Capture d'accueil (vue semaine, 1616 px) : vignette de 600 px, cadre léger ; sur mobile, ne flotte plus */
#content img[src^="/images/agenda-apercu.png"] { display: block; width: 600px; margin: 8px auto 4px; border: 1px solid var(--ep-line); border-radius: 8px; box-shadow: 0 2px 10px rgba(15, 23, 42, .10); }
#content div:has(> a > img[src^="/images/agenda-apercu.png"]) { margin-bottom: 24px !important; border: 0 !important; }
@media (max-width: 760px) {
  #content div:has(> a > img[src^="/images/agenda-apercu.png"]) { float: none !important; margin: 12px 0 !important; }
}
/* Appel à l'essai de l'accueil : son texte (isolé par template.php) en bouton, la capture en dessous
   restant cliquable ; justifié en ligne du contenu en base neutralisé (grands blancs entre les mots) */
#content a:has(> .ep-cta) { text-decoration: none !important; }
#content .ep-cta { display: inline-block; margin: 0 0 10px; padding: 10px 18px; border-radius: 8px; background: var(--ep-brand); color: #FFFFFF; font-size: 15px; font-weight: 700; }
#content a:has(> .ep-cta):hover .ep-cta, #content a:has(> .ep-cta):focus-visible .ep-cta { background: var(--ep-brand-dark); }
#content [style*="justify"] { text-align: left !important; }

/* Colonne de gauche (sous-pages) : liste sobre, page en cours marquée d'un liseré */
#content ul.subMenus { background-color: #FFFFFF; border: 1px solid var(--ep-line); border-radius: 8px; box-shadow: none; }
#content ul.subMenus li { border-top-color: var(--ep-line); }
#content ul.subMenus li h4 { color: var(--ep-ink); font-size: 15px; text-align: left; }
#content ul.subMenus li a { color: var(--ep-ink-2) !important; font-weight: 400 !important; text-decoration: none !important; border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
#content ul.subMenus li a:hover { background-color: var(--ep-surface); color: var(--ep-brand) !important; }
#content ul.subMenus li a.activ { background-color: var(--ep-brand-tint); border-left-color: var(--ep-brand); color: var(--ep-brand) !important; font-weight: 700 !important; }

/* Cartes de « Notre offre » : cadre gris, titre noir, pastille bleue, lien « En savoir plus » */
.box-offre { border: 1px solid var(--ep-line) !important; border-radius: 8px; background: #FFFFFF; }
.box-offre h3 { color: var(--ep-ink) !important; font-size: 16px; }
.box-offre .button { border-radius: 8px !important; }
.box-offre p.link a { font-weight: 700; }

/* Bandeau à quatre icônes de l'accueil (style en ligne du module) : gris clair, icônes bleues, texte
   noir ; il ne répète plus le bleu du bandeau du titre et du pied de page */
#home-informations { background: var(--ep-surface) !important; border-top: 1px solid var(--ep-line) !important; border-bottom: 1px solid var(--ep-line); box-shadow: none !important; }
#home-informations .home-informations-box { color: var(--ep-ink) !important; }
#home-informations .home-informations-box span { color: var(--ep-brand); font-size: 56px !important; }
#home-informations .home-informations-box h3 { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; margin: 6px 0 0; font-family: var(--ep-font) !important; font-size: 16px !important; font-weight: 700; color: var(--ep-ink); border-bottom: 2px solid var(--ep-brand) !important; box-shadow: none !important; }
#home-informations .home-informations-box p { font-family: var(--ep-font) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--ep-ink-2) !important; }

/* ========== Accueil : hero (bandeau), intro texte+capture, bande d'icônes, avantages ==========
   Contenu réécrit en code (src/site/template.php + pages/accueil.php). La mise en page de la bande à
   quatre icônes et la police icomoon étaient dans un <style> inline du contenu en base, désormais
   remplacé : on les redonne ici. */
/* Hero de l'accueil : texte à gauche, capture de l'agenda à droite (dans le bandeau bleu). */
#title-page .ep-hero { display: flex; align-items: center; gap: 34px; width: 80%; margin: 0 auto; padding: 26px 0; box-sizing: border-box; }
#title-page .ep-hero-text { flex: 1 1 0; min-width: 0; }
#title-page .ep-hero-text h1 { width: auto; margin: 0 0 10px; padding: 0; }
#title-page .ep-hero-sub { margin: 0; padding: 0; max-width: 620px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; text-align: left; }
#title-page .ep-hero-cta { display: inline-block; margin: 18px 0 0; padding: 12px 22px; border-radius: 8px; background: #FFFFFF; color: var(--ep-brand); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
#title-page .ep-hero-cta:hover, #title-page .ep-hero-cta:focus-visible { background: var(--ep-brand-tint); }
#title-page .ep-hero-visual { flex: 0 0 auto; width: 42%; max-width: 470px; }
#title-page .ep-hero-visual img { width: 100%; display: block; border-radius: 8px; border: 4px solid #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .30); }
@media (max-width: 820px) {
  #title-page .ep-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  #title-page .ep-hero-visual { width: 100%; max-width: none; }
}
/* Intro de l'accueil : la capture étant passée dans le hero, l'intro est en pleine largeur. */
.ep-home-intro { margin: 22px 0 10px; }
#home-informations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 30px; margin: 18px 0 6px; padding: 22px 24px 12px; box-sizing: border-box; }
#home-informations .home-informations-box { max-width: none; text-align: center; }
#home-informations .home-informations-box span { font-family: "icomoon"; }
@media (max-width: 760px) { #home-informations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 450px) { #home-informations { grid-template-columns: 1fr; } }
/* Préfixe #content : nécessaire pour battre design_site.css (#content ul{padding} et
   #content ul li{list-style-type:disc}), sinon la puce disque s'ajoutait sous la coche. */
#content ul.ep-adv { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
#content ul.ep-adv li { list-style: none; position: relative; padding: 0 0 0 24px; margin: 0; text-align: left; }
#content ul.ep-adv li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ep-brand); font-weight: 700; }
@media (max-width: 680px) { #content ul.ep-adv { grid-template-columns: 1fr; } }

/* ========== Essai gratuit : formulaire ========== */
.ep-form .ep-field { margin: 0 0 12px; }
.ep-form .ep-field label { display: block; margin: 0 0 4px; }
.ep-form .ep-field input, .ep-form .ep-field select, .ep-form .ep-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; }
.ep-form select { border: 1px solid #A9B4BE; border-radius: 6px; font-family: var(--ep-font); font-size: 14px; color: var(--ep-ink); background: #FFFFFF; }
.ep-form .ep-field textarea { min-height: 90px; }
.ep-form .ep-field-row { display: flex; gap: 16px; }
.ep-form .ep-field-row .ep-field { flex: 1 1 0; min-width: 0; }
.ep-req { color: #C0392B; }
.ep-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; font-weight: 400; font-size: 13px; color: var(--ep-ink-2); }
.ep-check input { margin-top: 2px; }
.ep-legal { font-size: 11px; color: var(--ep-muted); margin-top: 12px; }
.ep-form .g-recaptcha { cursor: pointer; }
/* Pot de miel : hors écran (pas display:none, détecté par les robots) et jamais vu par un humain. */
.ep-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .ep-form .ep-field-row { flex-direction: column; gap: 0; } }

/* ========== Bloc d'appel à l'essai (bas des pages de contenu) ========== */
.ep-cta-band { background: var(--ep-brand); }
.ep-cta-band-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 80%; margin: 0 auto; padding: 26px 0; box-sizing: border-box; }
.ep-cta-band-txt h2 { margin: 0 0 4px; color: #FFFFFF; font-family: var(--ep-font); font-weight: 700; font-size: 22px; }
.ep-cta-band-txt p { margin: 0; color: rgba(255, 255, 255, .92); font-size: 15px; }
.ep-cta-band-btn.button { background: #FFFFFF; color: var(--ep-brand); border-color: #FFFFFF; padding: 12px 22px; font-size: 15px; white-space: nowrap; }
.ep-cta-band-btn.button:hover { background: var(--ep-brand-tint); color: var(--ep-brand-dark); }
@media (max-width: 680px) { .ep-cta-band-in { flex-direction: column; align-items: flex-start; } }

/* ========== FAQ (accordéon natif <details>) ========== */
.ep-faq { margin: 16px 0; }
.ep-faq-item { border: 1px solid var(--ep-line); border-radius: 8px; margin: 0 0 10px; background: #FFFFFF; }
.ep-faq-item > summary { cursor: pointer; padding: 14px 44px 14px 18px; font-weight: 700; color: var(--ep-ink); list-style: none; position: relative; }
.ep-faq-item > summary::-webkit-details-marker { display: none; }
.ep-faq-item > summary::after { content: "+"; position: absolute; right: 16px; top: 12px; color: var(--ep-brand); font-weight: 700; font-size: 22px; line-height: 1; }
.ep-faq-item[open] > summary::after { content: "\2212"; }
.ep-faq-item[open] > summary { color: var(--ep-brand); }
.ep-faq-item > summary:hover { background: var(--ep-surface); border-radius: 8px; }
.ep-faq-item > div { padding: 0 18px 16px; color: var(--ep-ink-2); text-align: left; }
.ep-faq-item > div a { color: var(--ep-brand); font-weight: 700; }

/* ========== « Compatible avec » (page synchronisation) ========== */
.ep-compat { margin: 18px 0 6px; }
.ep-compat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ep-compat-badge { display: inline-block; padding: 8px 16px; border: 1px solid var(--ep-line); border-radius: 999px; background: #FFFFFF; color: var(--ep-ink); font-weight: 700; font-size: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

/* ---------- Formulaires et boutons ---------- */
form label { text-transform: none; color: var(--ep-ink); font-weight: 700; font-size: 13px; }
form input[type=text], form input[type=email], form input[type=tel], form input[type=password], form input[type=number], form textarea, input.anInput {
  border: 1px solid #A9B4BE; border-radius: 6px; font-family: var(--ep-font); font-size: 14px; color: var(--ep-ink); background: #FFFFFF;
}
form input[type=text]:focus, form input[type=email]:focus, form input[type=tel]:focus, form input[type=password]:focus, form input[type=number]:focus, form textarea:focus {
  border-color: var(--ep-brand); outline: 2px solid rgba(0, 89, 138, .25); outline-offset: 0;
}
form input[type=submit], a.button {
  background-color: var(--ep-brand); border: 1px solid var(--ep-brand); border-radius: 8px;
  font-family: var(--ep-font); font-weight: 700; font-size: 14px; color: #FFFFFF;
}
form input[type=submit]:hover, a.button:hover, form input[type=submit]:active, a.button:active { background-color: var(--ep-brand-dark); border-color: var(--ep-brand-dark); box-shadow: none; }

/* Tableaux (tarifs) */
table { box-shadow: none; border: 1px solid var(--ep-line); border-radius: 6px; overflow: hidden; font-family: var(--ep-font); }
table tr th { background: var(--ep-brand); font-weight: 700; color: #FFFFFF; }
table tr td { background: #FFFFFF; color: var(--ep-ink); }
table tr:nth-child(odd) td { background: var(--ep-surface); }

/* ---------- Pied de page : sombre neutre, texte clair ---------- */
#first-footer { background-image: none; background: var(--ep-footer); border-top: 0; color: var(--ep-footer-text); }
#first-footer #inner-footer .footer-box h3 { font-family: var(--ep-font); font-weight: 700; font-size: 15px; color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, .18); }
#first-footer #inner-footer .footer-box p, #first-footer #inner-footer .footer-box ul { font-family: var(--ep-font); color: var(--ep-footer-text); font-size: 13px; }
#first-footer #inner-footer .footer-box a { color: #FFFFFF; }
#first-footer #inner-footer .footer-box a:hover { text-decoration: underline; }
#footer { background-color: var(--ep-footer-2); border-top: 1px solid rgba(255, 255, 255, .08); }
#footer #legals { font-family: var(--ep-font); color: var(--ep-footer-text); font-size: 13px; }
#footer #legals a { color: #FFFFFF; font-weight: 700; }
#footer #legals a:hover { text-decoration: underline; }

/* Ancien panneau de connexion latéral (masqué, par sûreté) */
#connect { background: var(--ep-brand); border-color: var(--ep-brand-dark); }
#connect form label, #connect #title-connect h3 { font-family: var(--ep-font); color: #FFFFFF; }
#connect form input[type=submit] { background-color: var(--ep-brand-dark); }

.message, .messageInContent { font-family: var(--ep-font); }

/* ---------- Connexion : page login.php et fenêtre du bouton ---------- */
.ep-login {
  box-sizing: border-box; max-width: 420px; margin: 28px auto 36px; padding: 28px 28px 20px;
  background: #FFFFFF; border: 1px solid var(--ep-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, .10);
  font-family: var(--ep-font); text-align: left;
}
.ep-login h2 { margin: 0 0 6px; font: 700 20px var(--ep-font); color: var(--ep-ink); text-align: left; }
.ep-login .ep-login-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ep-ink-2); text-align: left; }
.ep-login label { display: block; margin: 14px 0 6px; font: 700 13px var(--ep-font); color: var(--ep-ink); }
.ep-login input[type="text"], .ep-login input[type="password"] {
  box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid #A9B4BE; border-radius: 8px; background: #FFFFFF; font: 400 16px var(--ep-font); color: var(--ep-ink);
}
.ep-login input[type="text"]:focus, .ep-login input[type="password"]:focus { border-color: var(--ep-brand); outline: 2px solid rgba(0, 89, 138, .3); outline-offset: 0; }
/* Bouton sur deux lignes plutôt que coupé (« Recevoir un nouveau mot de passe ») */
.ep-login input[type="submit"] { display: block; width: 100%; height: auto; min-height: 46px; margin: 20px 0 0; padding: 8px 12px; font-size: 16px; white-space: normal; }
.ep-login .ep-login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; font-size: 13px; text-align: left; }
.ep-login .ep-login-links a { color: var(--ep-brand); font-weight: 700; text-decoration: none; }
.ep-login .ep-login-links a:hover, .ep-login .ep-login-links a:focus-visible { color: var(--ep-brand-dark); text-decoration: underline !important; }
/* Dans la fenêtre du bouton : la fenêtre fait déjà le cadre */
.fancybox-inner .ep-login { width: 320px; max-width: 100%; margin: 0; padding: 10px 8px 4px; border: 0; box-shadow: none; }
@media (max-width: 480px) { .ep-login { margin: 16px 12px 28px; padding: 22px 18px 16px; } }

/* ---------- Téléphone ---------- */
@media (max-width: 615px) {
  /* Menu replié : le bouton Connexion du bandeau reste le moyen direct de se connecter */
  #title-page > a.button { display: inline-block; position: static; float: none; margin: 14px 0 0 5% !important; background: #FFFFFF; border-color: #FFFFFF; color: var(--ep-brand); }
  #title-page > a.button span { color: inherit; }
  #title-page h1 { width: 90%; margin: 0 5%; padding: 10px 0 14px; font-size: 21px; }
  #menu li.ep-nav-login a { margin: 4px 8px; }
}
@media (max-width: 600px) {
  /* Cartes de « Notre offre » sur une colonne (deux colonnes de 140 px : deux mots par ligne) */
  .box-offre { float: none !important; width: auto !important; margin: 8px 0 !important; }
  #content p, #content ul li { text-align: left !important; }
}
@media (max-width: 615px) {
  /* « Voir tout le menu » : pastille sur une ligne (le cadre de 160 px le coupait en deux) */
  #menu #seeMenu { display: inline-block; width: auto; margin: 2px auto 0; padding: 4px 14px; font-size: 14px; line-height: 1.4; white-space: nowrap; }
}

/* Boutons dans le contenu (« Nous contacter » de la page d'essai…) : texte blanc ; l'ancienne règle
   des liens du contenu (design_site.css) les écrivait en bleu sur leur fond bleu */
#content a.button { display: inline-block; padding: 10px 18px; color: #FFFFFF !important; font-weight: 700; text-decoration: none !important; }
#content a.button:hover, #content a.button:focus-visible { color: #FFFFFF !important; }
/* Page courte : le fond sous le pied de page prolonge sa dernière bande au lieu d'un blanc vide */
body { background-color: var(--ep-footer-2); }