/* Ajustements nallis.fr sur le thème BlakeD */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter_18pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-size: 15px;
  line-height: 1.7;
  /* le gris d'origine (#a4a7a8) n'atteint pas le contraste WCAG AA */
  color: #4f5456;
}

#content p,
#content dd,
#content address,
#footer p {
  font-size: 15px;
}

/* Hero : portrait dessiné (format portrait), calé en bas à droite sur toute la hauteur */
.hero-image-light {
  background: #ffffff url("../../images/olivier-nallis-dessin-v2.jpg") no-repeat right bottom;
  /* fondu blanc à gauche : les traits du dessin ne passent pas sous le texte */
  background-image: linear-gradient(to right, #ffffff 50%, rgba(255, 255, 255, 0) 62%),
    url("../../images/olivier-nallis-dessin-v2.webp");
  background-position: 0 0, right 15% center;
  background-size: 100% 100%, auto 50%;
}

#hero .hero-name {
  margin: 0 0 10px;
  font-weight: 600;
  color: #222222;
}

/* Sur ordinateur, l'en-tête du thème (z-index 0) passait sous le bandeau blanc :
   on le remonte, sans qu'il bloque les clics hors du menu */
@media (min-width: 992px) {
  header {
    z-index: 2;
    pointer-events: none;
  }

  header .logo,
  header .sidebar {
    pointer-events: auto;
  }
}

.sidebar li:before {
  background-color: #c62828;
  border-color: #c62828;
}

.sidebar > li > a {
  color: #5f6466;
}

.sidebar > li.active > a,
.sidebar > li > a:hover,
.sidebar > li > a:focus {
  color: #c62828;
}

/* Le menu latéral occupe la place du logo du bandeau sur grand écran */
@media (min-width: 1200px) {
  #hero .logo {
    visibility: hidden;
  }
}

/* Titres de section numérotés : le numéro n'est pas un titre */
.section-num {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Livres : couvertures entières */
.book-cover {
  background: #f5f5f5;
  text-align: center;
}

.book-cover img {
  display: inline-block;
  max-height: 420px;
  width: auto;
}

.book-thumb img {
  height: 180px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Expertises */
.expertise dt {
  color: #c62828;
  white-space: normal;
}

.expertise dd {
  margin-bottom: 12px;
}

/* Questions fréquentes */
.faq h3 {
  font-size: 18px;
  margin-top: 25px;
}

.contact-links .btn {
  margin: 0 6px 12px 0;
}

/* Pied de page sur une seule ligne : réseaux, liens, copyright */
#footer .float-left {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
}

#footer .footer-links a {
  color: #6b7072;
}

#footer .footer-links a:hover {
  color: #c62828;
}

#footer .float-right {
  display: none;
}

#footer .float-left > * {
  margin: 0;
}

#footer p.footer-links,
#footer p.copyright {
  font-size: 13px;
}

.footer-links a {
  margin-right: 10px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* mobile : portrait entier en haut, texte en dessous */
  .hero-image-light {
    background-image: url("../../images/olivier-nallis-dessin-v2.webp");
    background-size: auto 19vh;
    background-position: center 50px;
    height: auto;
    padding-bottom: 30px;
  }

  #hero .col-md-2 {
    display: none;
  }

  #hero .h-225 {
    height: auto;
  }

  /* le bandeau est en display:table : sans largeur fixe, il s'élargit au mot animé le plus long */
  #hero .vert-middle {
    display: block;
    width: 100%;
    height: auto;
    padding-top: calc(19vh + 60px);
  }

  #hero .vert-middle > div {
    display: block;
  }

  #hero .h1 {
    font-size: 38px;
  }

  #hero .h3 {
    font-size: 15px;
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
  }

  .expertise dt,
  .expertise dd {
    text-align: left;
  }
}

/* pied de page : tenir sur une ligne malgré les liens Moodle et Cours */
#footer .float-left { gap:6px 12px; }
#footer .footer-links a { margin-right:6px; }
#footer p.footer-links, #footer p.copyright { font-size:12.5px; }
#footer .social span a { margin-right:-4px; }

/* À propos : photo recadrée à la hauteur du texte, alignée sur son haut */
@media (min-width: 768px) {
  .about-row { display: flex; }
  .about-photo { display: flex; }
  .about-photo img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    object-position: 68% 30%;
  }
}

/* Bandeau sur grand écran : dessin ancré au centre de la page, juste à droite du texte,
   au lieu d'être calé sur le bord de la fenêtre (décentrage sur les écrans larges) */
@media (min-width: 1200px) {
  .hero-image-light {
    background-image: linear-gradient(to right, #ffffff calc(50vw + 60px), rgba(255, 255, 255, 0) calc(50vw + 90px)),
      url("../../images/olivier-nallis-dessin-v2.webp");
    background-position: 0 0, calc(50vw + 80px) center;
  }

  /* colonne de texte resserrée pour laisser la place au dessin */
  #hero .col-md-6 {
    width: 460px;
  }
}

/* écrans moyens (1200 à 1599 px) : le menu latéral occupe déjà la gauche, on garde un peu d'air */
@media (min-width: 1200px) and (max-width: 1599px) {
  .hero-image-light {
    background-image: linear-gradient(to right, #ffffff calc(50vw + 100px), rgba(255, 255, 255, 0) calc(50vw + 130px)),
      url("../../images/olivier-nallis-dessin-v2.webp");
    background-position: 0 0, calc(50vw + 130px) center;
  }
}

/* Indication de défilement en bas du bandeau */
#hero {
  position: relative;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 1px solid rgba(198, 40, 40, 0.45);
  border-radius: 50%;
  color: #c62828;
  font-size: 26px;
  line-height: 42px;
  text-align: center;
  animation: hint-bounce 2.2s ease-in-out infinite;
}

.scroll-hint:hover,
.scroll-hint:focus {
  color: #ffffff;
  background-color: #c62828;
  text-decoration: none;
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
}

/* Note de confidentialité discrète, en bas à droite */
.pv-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 16px 40px 16px 18px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-left: 3px solid #c62828;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 1.55;
  color: #4f5456;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pv-toast.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pv-toast p {
  margin: 0;
  font-size: 13px;
}

.pv-toast p + p {
  margin-top: 6px;
  font-style: italic;
}

.pv-toast strong {
  color: #222222;
}

.pv-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #f3f3f3;
  color: #6b7072;
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}

.pv-toast-close:hover,
.pv-toast-close:focus {
  background: #c62828;
  color: #ffffff;
}

/* Centrage vertical du bandeau : la zone du titre animé réservait 225 px pour un texte
   de 2 ou 3 lignes (vide en haut), et la hauteur minimale de 700 px dépassait la fenêtre des portables */
@media (min-width: 768px) {
  #hero .h-225 {
    height: 170px;
  }

  .hero-image {
    min-height: 580px;
  }
}

/* Dans la presse */
.press-name {
  margin: 0 0 6px;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c62828;
}