/* ════════════════════════════════════════════════════════════════════
   evalab : Chrome de la vitrine (en-tête, pied de page, correctifs)
   ════════════════════════════════════════════════════════════════════

   Ce fichier tient l'habillage commun à toutes les pages publiques et
   les correctifs appliqués au template acheté (style.css, 294 Ko).

   ── Pourquoi il existe ─────────────────────────────────────────────
   Ces règles vivaient dans un <style> de 330 lignes au sommet de
   standard/layout/app.blade.php : renvoyées dans CHAQUE réponse HTML,
   jamais mises en cache, et impossibles à relire. Ici, le navigateur les
   télécharge une fois pour toute la visite.

   ── Sa disparition est l'objectif ──────────────────────────────────
   La section « Correctifs template » ne devrait pas exister. Chaque
   règle y est là parce que style.css impose un style qu'on ne veut pas.
   Quand toutes les pages seront passées aux classes `ev-`, style.css
   pourra être retiré, et cette section avec lui.

   Ordre de chargement imposé :
       ev-tokens.css  →  style.css (template)  →  ev-chrome.css
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1. Typographie globale
   ════════════════════════════════════════════════════════════════════
   `!important` est requis : style.css pose `font-family` sur `body` avec
   une spécificité qu'on ne peut pas dépasser autrement sans réécrire
   chacun de ses sélecteurs.
   ════════════════════════════════════════════════════════════════════ */

body,
p, a, span, label, li,
input, button, select, textarea,
.page-wrapper {
  font-family: var(--ev-ff-body) !important;
}

h1, h2, h3, h4, h5, h6,
.page-wrapper h1, .page-wrapper h2, .page-wrapper h3,
.page-wrapper h4, .page-wrapper h5, .page-wrapper h6 {
  font-family: var(--ev-ff-head) !important;
  letter-spacing: -.02em;
}

/* Font Awesome doit garder sa propre police, sinon les glyphes
   d'icônes sont remplacés par des carrés vides. La règle ci-dessus
   touche `span` et `li`, qui portent souvent les classes d'icône. */
.fa, .fas, .far, .fal { font-family: "Font Awesome 5 Pro" !important; }
.fab { font-family: "Font Awesome 5 Brands" !important; }
.fad { font-family: "Font Awesome 5 Duotone" !important; }

body {
  background: var(--ev-bg) !important;
  color: var(--ev-text);
}

.no-underline { text-decoration: none; }

/* Le template met `list-style: inherit` sur tous les `ul`/`li`, ce qui
   fait apparaître des puces dans les menus et les pieds de page. */
ul, li { list-style: inherit; }
.footer-widget ul, .footer-widget li { list-style: none !important; }

/* ════════════════════════════════════════════════════════════════════
   2. En-tête
   ════════════════════════════════════════════════════════════════════ */

.main-menu .navigation > li > a,
.main-header .menu-btns a,
.main-header .menu-btns button {
  font-family: var(--ev-ff-body) !important;
  font-weight: 600;
}
.main-menu .navbar-collapse li a { font-size: 14px !important; }

/* Menu du compte. Une quinzaine de pages déclarent, chacune dans leur
   propre <style>, une règle qui met en blanc tout <a> sous `.menu-btns`
   pour rester lisible sur un hero sombre, sans prévoir d'exception
   pour ce menu, d'où du texte blanc sur fond blanc.
   `.menu-absolute` et `:not(.theme-btn)` portent la spécificité à
   (0,5,1) contre (0,4,1) côté page : on l'emporte sans dépendre de
   l'ordre de chargement. */
.main-header.menu-absolute .menu-btns .dropdown-menu a:not(.theme-btn) {
  color: var(--ev-text) !important;
}

.main-header .dropdown-menu {
  background-color: var(--ev-surface) !important;
  border: 1px solid var(--ev-divider) !important;
  border-radius: var(--ev-radius-md) !important;
  box-shadow: var(--ev-shadow-lift) !important;
  min-width: 200px !important;
  padding: 8px !important;
  z-index: 99999 !important;
}
.main-header .dropdown-menu .dropdown-item {
  color: var(--ev-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--ev-radius-sm) !important;
  transition: background-color .12s var(--ev-ease) !important;
}
.main-header .dropdown-menu .dropdown-item:hover {
  background: var(--ev-blue-soft) !important;
  color: var(--ev-blue) !important;
}
.main-header .dropdown-menu .dropdown-item.text-danger,
.main-header .dropdown-menu li.text-danger .dropdown-item { color: var(--ev-error) !important; }
.main-header .dropdown-menu .dropdown-item.text-danger:hover { background: var(--ev-error-highlight) !important; }
.main-header .dropdown-menu hr {
  margin: 4px 0 !important;
  border-color: var(--ev-divider) !important;
}

/* Bouton d'appel de la barre de navigation. Le template lui applique un
   dégradé qui jure avec le bleu de marque. */
.theme-btn.style-two,
a.theme-btn.style-two {
  background: var(--ev-blue) !important;
  background-image: none !important;
  color: var(--ev-on-blue) !important;
  border-color: var(--ev-blue) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: background-color .2s var(--ev-ease) !important;
}
.theme-btn.style-two:hover,
a.theme-btn.style-two:hover {
  background: var(--ev-blue-hover) !important;
  border-color: var(--ev-blue-hover) !important;
  color: var(--ev-on-blue) !important;
}

/* La bascule de thème et `.ev-sr` sont passées dans ev-controls.css :
   elles servent aussi au gabarit d'authentification, qui ne charge pas
   ce fichier-ci. */

/* ── Bascule de langue ─────────────────────────────────────────── */

/* Langue + thème. Un seul élément de liste, quel que soit l'écran.
   `flex: none` sur les deux enfants : sans lui, la ligne les comprime
   pour tenir dans la largeur disponible et « FR EN » se chevauchent. */
.nav-utils { display: flex; align-items: center; gap: 10px; }
.nav-utils > .lang-pill,
.nav-utils > .ev-theme-toggle { flex: none; }
/* Et sur les deux options elles-mêmes : `flex: none` sur la pastille ne
   suffit pas, puisqu'il la fige à la taille de son contenu, contenu qui
   se comprimait à son tour, réduisant la pastille à 49 px et faisant se
   chevaucher « FR » et « EN ». */
.lang-pill > .lang-opt { flex: none; white-space: nowrap; }
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--ev-surface-offset);
}
.lang-opt {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ev-text-faint);
  text-decoration: none !important;
  transition: color .18s var(--ev-ease), background-color .18s var(--ev-ease);
}
/* `!important` sur la couleur, comme ailleurs dans ce fichier : le
   template applique `var(--heading-color)` (#001726) à ces liens avec
   une spécificité qu'on ne peut pas dépasser autrement. Sans cela, la
   langue active s'affichait en bleu nuit sur bleu nuit en thème sombre,
   un contraste d'environ 1,3:1, donc illisible. */
.lang-opt { color: var(--ev-text-faint) !important; }
.lang-opt.active {
  background: var(--ev-blue-highlight);
  /* --ev-blue-dark plutôt que --ev-blue : sur --ev-blue-highlight,
     le bleu de base tombe à 4,0:1, insuffisant pour du 12 px. Le bleu
     foncé donne ~6:1 en clair et ~8:1 en sombre, où le token s'inverse
     en bleu clair. */
  color: var(--ev-blue-dark) !important;
}
.lang-opt:hover:not(.active) { color: var(--ev-text) !important; }

/* ── Champ de recherche de l'en-tête ───────────────────────────── */

#search-results {
  cursor: pointer;
  max-height: 300px;
  overflow: auto;
  padding: 0 20px;
}

/* ════════════════════════════════════════════════════════════════════
   3. Pied de page
   ════════════════════════════════════════════════════════════════════
   Fond encre fixe, dans les deux thèmes : c'est un aplat identitaire,
   pas une surface. Les valeurs sont donc en blanc translucide et non en
   tokens sémantiques : sinon il deviendrait blanc en mode sombre.
   ════════════════════════════════════════════════════════════════════ */

.main-footer {
  background: var(--ev-ink) !important;
  border-top: none !important;
}

.footer-brand-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .45);
  margin-top: 14px;
  max-width: 280px;
}

.footer-social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .85) !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: background-color .2s var(--ev-ease), border-color .2s var(--ev-ease);
}
.footer-social-btn:hover {
  background: var(--ev-accent) !important;
  border-color: var(--ev-accent) !important;
  color: var(--ev-ink) !important;
}

.main-footer .footer-widget-head { border-bottom: none; }

.footer-title {
  font-family: var(--ev-ff-body) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: rgba(255, 255, 255, .38) !important;
  margin-bottom: 18px !important;
}

.footer-widget.widget-links ul li a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s var(--ev-ease);
}
.footer-widget.widget-links ul li a:hover { color: var(--ev-accent); }

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .07);
  margin: 40px 0 28px;
}

/* Le `<hr>` au-dessus est le seul séparateur voulu ; le template en
   ajoute un second par `border-top`. */
.footer-bottom { border-top: none !important; padding: 0 0 40px !important; }
.footer-bottom .copyright-text p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .32); }
.footer-bottom .copyright-text a { color: rgba(255, 255, 255, .5) !important; }
.footer-bottom .copyright-text a:hover { color: var(--ev-accent) !important; }

.footer-trust-badges { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .38);
}
.footer-trust-badge i { color: var(--ev-accent); font-size: 12px; }

@media (max-width: 767px) {
  .footer-trust-badges { justify-content: center; margin-top: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   4. Retour en haut
   ════════════════════════════════════════════════════════════════════ */

.scroll-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  right: 28px !important;
  bottom: 28px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--ev-ink) !important;
  color: #fff !important;
  font-size: 16px !important;
  box-shadow: var(--ev-shadow-lift) !important;
  transition: background-color .25s var(--ev-ease), transform .25s var(--ev-ease) !important;
}
.scroll-top:hover { background: var(--ev-accent) !important; color: var(--ev-ink) !important; transform: translateY(-3px) !important; }

@media (prefers-reduced-motion: reduce) {
  .scroll-top, .scroll-top:hover { transition: none !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   5. Correctifs template, à supprimer avec style.css
   ════════════════════════════════════════════════════════════════════ */

/* Le template écrit ses couleurs de texte et de fond en dur, calculées
   pour un fond clair : en thème sombre, les liens de navigation passent
   en gris foncé sur fond foncé et deviennent illisibles.

   Le bloc est écrit DEUX FOIS, et ce n'est pas une négligence : la
   première version couvre le choix explicite de l'utilisateur, la
   seconde le mode automatique (aucun choix, préférence système en
   sombre). Un sélecteur ne peut pas être placé sous une media query
   ET hors d'elle en même temps, et `:is()` ne permet pas davantage de
   les fusionner puisque la condition porte sur le média, pas sur le
   document. Toute modification doit être reportée dans les deux. */

:root[data-ev-theme="dark"] .main-header,
:root[data-ev-theme="dark"] .header-upper,
:root[data-ev-theme="dark"] .main-header.menu-absolute {
  background: var(--ev-surface) !important;
}
:root[data-ev-theme="dark"] .main-menu .navigation > li > a,
:root[data-ev-theme="dark"] .main-header .menu-btns a:not(.theme-btn),
:root[data-ev-theme="dark"] .main-header .menu-btns button {
  color: var(--ev-text) !important;
}
:root[data-ev-theme="dark"] .main-header .navigation li .dropdown-menu a {
  color: var(--ev-text) !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-header,
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .header-upper,
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-header.menu-absolute {
    background: var(--ev-surface) !important;
  }
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-menu .navigation > li > a,
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-header .menu-btns a:not(.theme-btn),
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-header .menu-btns button {
    color: var(--ev-text) !important;
  }
  :root[data-ev-theme-auto]:not([data-ev-theme="light"]) .main-header .navigation li .dropdown-menu a {
    color: var(--ev-text) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   6. Menu mobile
   ════════════════════════════════════════════════════════════════════

   En dessous de 992 px, le menu se déplie en colonne sous l'en-tête.
   Le template le rendait ainsi :

     .navbar-collapse > ul   padding: 25px 0
                             box-shadow: inset 0 0 30px rgba(87,95,245,.1)
     li                      border-top: 1px solid
     li a                    padding: 10px 10px
     li.dropdown .dropdown-btn   width: 50px; height: 43px;
                                 border-left: 1px solid

   D'où, dans l'ordre : une bande vide de 25 px en haut ET en bas ; un
   halo violet en creux qui n'appartient à aucune palette du site ; un
   filet au-dessus de CHAQUE ligne, y compris la première, juste sous
   l'en-tête qui en a déjà un ; et un chevron enfermé dans une cellule
   encadrée à gauche, qui coupait la ligne en deux.

   Le décalage de la pastille de langue venait du cumul
   `li { padding: 0 15px }` + `a { padding: 10px }` : le TEXTE commençait
   à 25 px, la pastille, qui n'est pas dans un <a>, à 15.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

  /* Le panneau est une carte posée sur la page, pas un prolongement de
     l'en-tête : un fond franc, un pied arrondi, une ombre portée. Sans
     fond opaque, le contenu de la page transparaît entre les lignes. */
  .main-menu .navbar-collapse > ul {
    padding: 4px 0 8px;
    background: var(--ev-surface);
    box-shadow: 0 18px 40px -12px rgba(10, 23, 34, .22);
    border-radius: 0 0 var(--ev-radius-lg) var(--ev-radius-lg);
    border-block-start: 1px solid var(--ev-divider);
    overflow: hidden;
  }

  /* Le retrait horizontal est porté UNE FOIS, par le <li>. Le <a> ne
     garde qu'un retrait vertical : texte et pastille de langue partent
     ainsi de la même verticale, sans calcul à refaire de part et
     d'autre. */
  .main-menu .navbar-collapse li {
    position: relative;
    padding: 0 20px;
    border-block-start: 0;
  }

  /* `li > a` et non `li a` : les options de langue sont des <a>
     imbriqués dans la pastille, elle-même dans un <li>. Un sélecteur de
     descendance les attrapait, leur retirait leur retrait horizontal et
     les passait en `display: block`, la pastille tombait à 49 px de
     large et « FR » chevauchait « EN ». */
  .main-menu .navbar-collapse li > a {
    display: block;
    padding: 15px 0;
    line-height: 1.35;
    font-size: 15.5px !important;
    font-weight: 600;
  }

  /* Un filet ENTRE les lignes, jamais au-dessus de la première ni sous
     la dernière, et en retrait des bords : une ligne qui s'arrête avant
     le bord se lit comme une séparation, une ligne qui va d'un bord à
     l'autre comme une bordure de tableau. */
  .main-menu .navbar-collapse > ul > li + li::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 20px;
    height: 1px;
    background: var(--ev-divider);
  }
  .main-menu .navbar-collapse > ul > li:last-child { border-block-end: 0; }

  /* Le chevron reprend sa place dans la ligne : plus de cellule
     encadrée, et une cible de 48 px de côté. */
  .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    inset-inline-end: 10px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-inline-start: 0;
    border-radius: var(--ev-radius-sm);
    color: var(--ev-text-faint);
    transition: transform .2s var(--ev-ease), color .2s var(--ev-ease);
  }
  .main-menu .navbar-collapse li.dropdown .dropdown-btn:hover { color: var(--ev-text); }
  /* Le chevron pivote quand le sous-menu est ouvert : l'état se lit sans
     avoir à chercher ce qui a changé plus bas. La classe est posée par
     ev-motion.js, le script du template ouvre le sous-menu sans
     marquer quoi que ce soit. */
  .main-menu .navbar-collapse li.dropdown .dropdown-btn.is-open {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Sous-menus : décalés et posés sur un fond légèrement creusé, pour
     qu'on voie d'un coup d'œil qu'ils dépendent de la ligne du dessus. */
  .main-menu .navbar-collapse li ul {
    background: var(--ev-bg);
    padding-block: 2px;
    margin-block-end: 4px;
    border-radius: var(--ev-radius-sm);
  }
  .main-menu .navbar-collapse li ul li { padding: 0 16px; }
  .main-menu .navbar-collapse li ul li > a {
    padding: 12px 0;
    font-size: 14.5px !important;
    font-weight: 500;
    color: var(--ev-text-muted) !important;
  }
  .main-menu .navbar-collapse li ul li + li::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 16px;
    height: 1px;
    background: var(--ev-divider);
  }

  /* Réglages d'affichage. Détachés de la navigation : ce ne sont pas des
     destinations, ils ne se lisent pas comme les lignes du dessus. */
  .nav-utils {
    gap: 12px;
    margin-block-start: 6px;
    padding-block: 14px 6px !important;
  }
  .main-menu .navbar-collapse > ul > li.nav-utils + li::before,
  .main-menu .navbar-collapse > ul > li.nav-utils::before {
    inset-inline: 0;
  }
}