/* ------------------------------------------------------------------
   Sélecteur de langue — custom, hors CSS Webflow
   Fichier séparé pour survivre à un réexport Webflow.
   Charte reprise du site : #3b455a / #f4f2ef / Montserrat / 12px 700 uppercase
   ------------------------------------------------------------------ */

/* Menu et sélecteur de langue vivent dans un panneau commun (.nav-panel),
   pour que le burger n'ait qu'un seul conteneur à ouvrir. Au-delà de 800 px ce
   panneau n'est qu'une rangée calée à droite : l'en-tête est identique à ce
   qu'il était avant l'ajout du burger. */
.nav-panel {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* Webflow masque .div-block-3 sous 479 px (il n'y avait alors aucun burger).
   Le menu vit maintenant dans le panneau, dont l'ouverture est pilotée par le
   bouton : on annule ce masquage, sinon le burger s'ouvrirait sur du vide. */
.nav-panel .div-block-3 {
  display: flex;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 30px;
  padding-left: 30px;
  border-left: 1px solid #cfcfcf;
  font-family: Montserrat, sans-serif;
}

.lang-switch__link {
  color: #3b455a;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 50px;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.lang-switch__link:hover {
  opacity: .5;
}

.lang-switch__link.is-active {
  color: #fff;
  background-color: #3b455a;
}

.lang-switch__link.is-active:hover {
  opacity: 1;
  cursor: default;
}

.lang-switch__link:focus-visible {
  outline: 2px solid #3b455a;
  outline-offset: 2px;
}

/* Tablette : le nav se resserre */
@media screen and (max-width: 991px) {
  .lang-switch {
    margin-left: 20px;
    padding-left: 20px;
  }
}

/* Mobile : le header passe en colonne, le sélecteur se centre */
@media screen and (max-width: 767px) {
  .lang-switch {
    margin-left: 15px;
    padding-left: 15px;
  }

  .lang-switch__link {
    padding: 4px 8px;
  }
}

/* ⚠️ Webflow masque .div-block-3 sous 479px (aucun menu burger).
   Le sélecteur de langue reste visible : c'est justement sur mobile
   qu'un visiteur australien doit pouvoir basculer. */
@media screen and (max-width: 479px) {
  .lang-switch {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-left: none;
    border-top: 1px solid #cfcfcf;
    width: 100%;
    justify-content: center;
  }
}

/* ==================================================================
   SECTION CONTACT
   Ajoutée à la main (elle n'existe pas dans le projet Webflow).
   Reprend les tokens du site : #3b455a / #f4f2ee / Montserrat.

   Fond crème et non blanc : depuis que Ouvrages est passé devant Médias,
   c'est la section Médias (blanche) qui précède le contact. Deux blocs
   blancs collés supprimeraient la séparation visuelle.
   ================================================================== */

.section-contact {
  background-color: #f4f2ee;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 80px 40px;
  display: flex;
}

.contact-intro {
  color: #3b455a;
  max-width: 620px;
  margin-top: 36px;
  margin-bottom: 0;
  line-height: 1.6;
}

.contact-grid {
  grid-column-gap: 60px;
  grid-row-gap: 40px;
  flex-flow: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin-top: 50px;
  display: flex;
}

.contact-item {
  flex-flow: column;
  align-items: flex-start;
  min-width: 200px;
  text-align: left;
  display: flex;
}

.contact-label {
  color: #3b455a;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
}

.contact-value {
  color: #3b455a;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  transition: opacity .2s ease-in-out;
}

a.contact-value:hover {
  opacity: .55;
}

a.contact-value:focus-visible {
  outline: 2px solid #3b455a;
  outline-offset: 3px;
}

.contact-cta {
  margin-top: 50px;
}

@media screen and (max-width: 767px) {
  .section-contact {
    padding: 50px 20px;
  }

  .contact-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 36px;
  }

  .contact-item {
    align-items: center;
    width: 100%;
    text-align: center;
  }
}

/* ==================================================================
   AJUSTEMENTS
   ================================================================== */

/* La couverture du dernier livre est fournie en 2x (720 px) pour rester nette
   sur écran Retina : on la contraint à sa largeur d'affichage, celle de
   l'ancienne book.jpg (376 px). La règle Webflow des 991 px est reproduite
   à l'identique pour ne rien changer au comportement responsive. */
.image-4 {
  width: 376px;
  height: auto;
}

@media screen and (max-width: 991px) {
  .image-4 {
    width: 300px;
  }
}

/* L'affiche de dédicace occupait la troisième colonne du bloc « Dernier livre ».
   Sans elle, le texte s'étirait sur toute la largeur restante : on le borne pour
   garder une longueur de ligne confortable, on le centre dans l'espace laissé
   par la couverture, et on l'écarte du bord droit du cadre.
   Ne cible que la section du livre — .div-block-5 sert aussi de conteneur
   dans la section Médias. */
.section-last .div-block-5 {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 40px;
}

@media screen and (max-width: 991px) {
  .section-last .div-block-5 {
    padding-right: 0;
  }
}

/* Deux lecteurs YouTube se suivent désormais dans la section Médias :
   on les espace, sinon ils se touchent. */
.youtube + .youtube {
  margin-top: 30px;
}

/* La section « Dernier livre » était calée sur min-height: 100vh, une hauteur
   que l'affiche de dédicace remplissait. Sans elle, il restait environ 400 px
   de vide avant la section suivante : on laisse la hauteur suivre le contenu,
   avec un peu d'air en bas. */
.section-last {
  min-height: auto;
  padding-bottom: 80px;
}

/* La section Ouvrages n'a aucun padding bas dans le CSS Webflow : les boutons
   « Découvrir » venaient buter contre la section suivante. Même valeur que la
   respiration ajoutée sous « Dernier livre », pour rester cohérent. */
.section-ouvrages {
  padding-bottom: 80px;
}

/* Traduction anglaise du titre de chaque ouvrage, au-dessus du descriptif
   (page /en/ uniquement). Les livres n'existent qu'en français : cette ligne
   aide le lecteur anglophone à situer l'ouvrage, elle ne remplace pas le titre,
   que porte la couverture. */
.book-title-en {
  /* Bleu relevé au compte-gouttes sur images/LinkedIn_icon.svg.png : #007EBB.
     Sur le crème #f4f2ee son contraste est de 4,0:1, sous le seuil WCAG AA de
     4,5:1 pour du texte courant — d'où les 19 px en gras, qui font passer la
     ligne en « texte large » (seuil 3:1) sans toucher à la couleur demandée. */
  color: #007EBB;
  text-align: left;
  margin: 20px 0 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  /* .book est un flex column avec align-items: center — sans stretch, un titre
     court se retrouve centré alors que le descriptif dessous reste à gauche. */
  align-self: stretch;
}

.book-title-en + .paragraph-2 {
  margin-top: 8px;
}

/* Dans « Latest book », le h3 porte déjà le titre français : la traduction
   se glisse juste en dessous, sans le double espacement. */
.heading-3 + .book-title-en {
  margin-top: 4px;
}

/* ==================================================================
   BLOC « A PROPOS » — bio longue
   La bio du 31/08 compte six paragraphes là où l'export Webflow n'en
   prévoyait qu'un. `.paragraph` n'apporte qu'un `text-align: left` : sans
   interligne ni respiration entre les paragraphes, la colonne de droite
   devenait un pavé de 14 px collé.
   ================================================================== */

.intro-right .paragraph {
  margin-bottom: 14px;
  line-height: 1.65;
}

.intro-right .paragraph:last-of-type {
  margin-bottom: 0;
}

/* ==================================================================
   RUBRIQUE FAQ
   Ajoutée à la main (elle n'existe pas dans le projet Webflow).
   Fond crème + fiches blanches : la section précédente (Médias) est blanche
   pleine largeur, l'inverse marque la rupture sans introduire de couleur
   nouvelle. Mêmes tokens que le reste : #3b455a / #f4f2ee / Montserrat.
   ================================================================== */

.section-faq {
  background-color: #f4f2ee;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 80px 40px;
  display: flex;
}

.faq-list {
  width: 100%;
  max-width: 860px;
  margin-top: 50px;
  /* .body est en text-align: center — sans ça, questions et réponses
     se retrouveraient centrées. */
  text-align: left;
}

.faq-item {
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 12px;
}

.faq-item:last-child {
  margin-bottom: 0;
}

/* Le pliant repose sur <details>/<summary> natif : ouverture au clavier,
   annonce correcte par les lecteurs d'écran, et aucune dépendance à
   webflow.js. display:flex suffit à masquer le marqueur par défaut dans les
   navigateurs modernes ; les deux règles qui suivent couvrent le reste. */
.faq-question {
  color: #3b455a;
  cursor: pointer;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  transition: opacity .2s ease-in-out;
  display: flex;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  opacity: .6;
}

.faq-question:focus-visible {
  outline: 2px solid #3b455a;
  outline-offset: -2px;
  border-radius: 4px;
}

/* Le chevron est un carré tourné à 45°, poussé à droite par margin-left: auto.
   Le margin-top le recale sur le milieu de la PREMIÈRE ligne, pour qu'il ne
   descende pas quand la question se replie sur deux lignes en mobile. */
.faq-question::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  margin-left: auto;
  border-right: 2px solid #3b455a;
  border-bottom: 2px solid #3b455a;
  transform: rotate(45deg);
  transition: transform .2s ease-in-out, margin-top .2s ease-in-out;
}

.faq-item[open] .faq-question::after {
  margin-top: 9px;
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 0 24px 22px;
}

.faq-answer p {
  color: #3b455a;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* La rubrique Contact suivait jusqu'ici la section Médias (blanche). Elle suit
   désormais la FAQ, crème comme elle : sans ce filet, les deux sections se
   fondraient en un seul aplat. Même trait que le footer. */
.section-contact {
  border-top: 1px solid #cfcfcf;
}

@media screen and (max-width: 767px) {
  .section-faq {
    padding: 50px 20px;
  }

  .faq-list {
    margin-top: 36px;
  }

  .faq-question {
    gap: 16px;
    padding: 18px;
    font-size: 15px;
  }

  .faq-answer {
    padding: 0 18px 18px;
  }
}

/* ==================================================================
   ANCRES ET EN-TÊTE COLLANT
   .header est en position: sticky : sans marge de défilement, un clic sur
   une entrée du menu amenait le titre de section sous l'en-tête. Sous 479 px
   l'en-tête repasse en position: relative (règle Webflow) — la marge n'a
   alors plus lieu d'être.
   ================================================================== */

section[id] {
  scroll-margin-top: 84px;
}

/* Avec le burger, l'en-tête garde la même hauteur à toutes les largeurs : le
   panneau se déroule par-dessus la page au lieu de la pousser. Une seule valeur
   suffit donc — sauf sans JavaScript, où l'en-tête reprend ses deux lignes. */
@media screen and (max-width: 800px) {
  html:not(.w-mod-js) section[id] {
    scroll-margin-top: 135px;
  }
}

@media screen and (max-width: 479px) {
  html:not(.w-mod-js) section[id] {
    scroll-margin-top: 0;
  }
}

/* ==================================================================
   MENU BURGER SOUS 800 px
   Webflow ne masquait le menu qu'à 479 px et ne prévoyait aucun burger :
   entre 480 et 800 px, les entrées et le sélecteur de langue ne tenaient plus
   sur une ligne et la page défilait horizontalement ; sous 480 px, le menu
   disparaissait purement et simplement, sans rien pour le remplacer.

   Le bouton reprend les deux cas : sous 800 px, toutes les entrées et le choix
   de langue passent dans un panneau déroulant, ouvert par un burger à droite.

   Amélioration progressive : le CSS n'affiche le bouton que si <html> porte la
   classe `w-mod-js`, posée par le script Webflow en tête de page. Sans
   JavaScript, le panneau reste dans le flux et l'en-tête passe sur deux lignes
   — aucune entrée n'est perdue, le burger serait juste inerte.
   ================================================================== */

.nav-toggle {
  display: none;
  appearance: none;
  color: #3b455a;
  cursor: pointer;
  background: none;
  border: 0;
  /* 44 px : cible tactile minimale recommandée (WCAG 2.5.5). Les trois barres
     n'en font que 22 de large, le reste est de la zone cliquable. */
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  /* La zone tactile fait 44 px pour 22 px de barres : sans ce retrait, le
     bouton s'aligne sur la gouttière par sa boîte, et le glyphe se retrouve
     11 px en retrait du logo et des filets du menu. On sort le rembourrage de
     la gouttière plutôt que d'y renoncer. */
  margin-right: -11px;
  padding: 0;
}

.nav-toggle:focus-visible {
  outline: 2px solid #3b455a;
  outline-offset: 2px;
  border-radius: 4px;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  background-color: currentColor;
  border-radius: 2px;
  width: 22px;
  height: 2px;
  transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

.nav-toggle__bars::before {
  position: absolute;
  top: -7px;
  left: 0;
}

.nav-toggle__bars::after {
  position: absolute;
  top: 7px;
  left: 0;
}

/* Ouvert, les trois barres deviennent une croix : celle du milieu s'efface,
   les deux autres se rejoignent et pivotent. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 800px) {
  /* Gouttière de 20 px dès que l'en-tête passe en version mobile — les 40 px
     de Webflow mangeaient trop de largeur sur un téléphone. Non préfixée par
     .w-mod-js : le repli sans JavaScript s'aligne dessus aussi.
     Le panneau reprend la même valeur plus bas, et le retrait de 11 px du
     bouton continue de poser le glyphe pile sur cette gouttière. */
  .div-block-2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .w-mod-js .nav-toggle {
    display: flex;
  }

  /* Webflow repasse l'en-tête en position: relative sous 479 px. Un burger qui
     défile hors de l'écran n'est plus atteignable une fois qu'on a quitté le
     haut de page : on le garde collant, à toutes les largeurs. C'est aussi ce
     qui maintient le logo et la croix visibles par-dessus le panneau. */
  .w-mod-js .header {
    position: sticky;
    top: 0;
  }

  /* Le panneau couvre tout l'écran. `position: fixed` se cale sur la fenêtre :
     .header n'a ni transform ni filter, donc rien ne vient reprendre le rôle
     de bloc conteneur. */
  .w-mod-js .nav-panel {
    z-index: 1;
    background-color: #f4f2ef;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin-left: 0;
    /* 65 px d'en-tête + 24 px d'air : les entrées démarrent sous le logo, que
     le panneau recouvre sans le masquer (voir le z-index plus bas).
     Les 20 px latéraux sont ceux de .div-block-2 ci-dessus : logo, entrées,
     filets et croix tombent ainsi sur une seule et même gouttière. */
    padding: 89px 20px 40px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Écran court en paysage : six entrées plus le sélecteur peuvent dépasser.
       `contain` empêche le défilement de se propager à la page quand le panneau
       n'a rien à faire défiler — sans quoi on rouvrirait à une autre position
       de lecture que celle qu'on avait quittée.

       C'est ce qui remplace un blocage du défilement sur <html> : `overflow:
       hidden` sur la racine supprime la boîte de défilement, ce qui désactive
       le `position: sticky` de l'en-tête — logo et croix disparaissaient dès
       qu'on ouvrait le menu ailleurs qu'en haut de page. */
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
    /* visibility plutôt que display : display ne s'anime pas, et il faut que le
       panneau fermé sorte de l'ordre de tabulation comme de l'arbre
       d'accessibilité — ce que visibility: hidden fait, opacity non. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease-in-out, visibility .22s;
  }

  .w-mod-js .nav-panel.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* .header ouvre un contexte d'empilement (position: sticky + z-index: 3) :
     le panneau ne peut donc pas passer sous lui. On remonte plutôt le logo et
     le bouton au-dessus du panneau, pour que la croix reste là où était le
     burger et que le logo ne disparaisse pas. */
  .w-mod-js .div-block-2 > .link,
  .w-mod-js .nav-toggle {
    position: relative;
    z-index: 2;
  }

  .w-mod-js .nav-panel .div-block-3 {
    grid-column-gap: 0;
    grid-row-gap: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .w-mod-js .nav-panel .link-2 {
    border-bottom: 1px solid #0000001a;
    padding: 18px 0;
    font-size: 14px;
  }

  /* margin-top: auto pousse le sélecteur en bas de l'écran quand la place le
     permet, et le laisse suivre les entrées quand elle manque.
     Le filet du haut vient de la règle Webflow des 479 px : dans le panneau il
     flotterait loin des entrées, dont la dernière porte déjà un séparateur. */
  .w-mod-js .nav-panel .lang-switch {
    justify-content: flex-start;
    margin: auto 0 0;
    padding: 28px 0 0;
    border-left: none;
    border-top: none;
  }

  /* La pastille de la langue courante a 10 px de padding : sans ce retrait,
     son texte ne s'alignerait pas sur celui des entrées au-dessus. */
  .w-mod-js .nav-panel .lang-switch__link:first-child {
    margin-left: -10px;
  }

  /* Sous 479 px, Webflow passe l'en-tête en colonne : avec le burger, logo et
     bouton tiennent largement sur une ligne. */
  .w-mod-js .div-block-2 {
    flex-flow: row;
    align-items: center;
  }
}

/* Repli sans JavaScript : l'en-tête passe sur deux lignes, logo et sélecteur
   en haut, menu centré en dessous. */
@media screen and (max-width: 800px) {
  html:not(.w-mod-js) .div-block-2 {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  html:not(.w-mod-js) .nav-panel {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }

  html:not(.w-mod-js) .div-block-3 {
    grid-column-gap: 20px;
    grid-row-gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Le mouvement du panneau et de la croix n'apporte rien à qui l'a désactivé. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .w-mod-js .nav-panel {
    transition: none;
  }

  .w-mod-js .nav-panel {
    transform: none;
  }
}

/* ==================================================================
   PHOTO STICKY DANS « A PROPOS »
   Depuis la bio du 31/08, la colonne de texte dépasse la photo de 160 à
   200 px en 1440 px, et jusqu'à 500 px vers 1024 px. La photo tient donc
   pendant que le texte défile, plutôt que de sortir du champ dès le premier
   coup de molette.

   `align-items: flex-start` remplace le `center` de Webflow : centrée, la
   photo démarre déjà à mi-hauteur et perd la moitié de sa course. Elle
   s'aligne désormais sur le haut du titre.

   Uniquement au-dessus de 991 px : en dessous, Webflow empile les deux
   colonnes et une photo collée en haut mangerait tout l'écran.
   ================================================================== */

@media screen and (min-width: 992px) {
  .section-intro {
    align-items: flex-start;
  }

  .intro-left {
    /* 61 px d'en-tête collant + les 80 px de respiration ci-dessous. Caler la
       photo sur sa propre position de repos lui évite le petit saut vers le
       haut qu'on aurait au premier pixel de défilement. */
    position: sticky;
    top: 141px;
  }
}

/* ==================================================================
   RESPIRATION SOUS L'EN-TÊTE
   Webflow calait la section d'intro à 40 px du menu (10 px sous 479 px), ce
   qui collait le titre à la barre de navigation. On double l'écart, en le
   dégressant sur les petits écrans où 80 px mangeraient un tiers de l'écran.

   Ne cible que .section-intro : les sections suivantes sont introduites par un
   titre et n'ont pas le même besoin.
   ================================================================== */

.section-intro {
  padding-top: 80px;
}

@media screen and (max-width: 767px) {
  .section-intro {
    padding-top: 56px;
  }
}

@media screen and (max-width: 479px) {
  .section-intro {
    padding-top: 40px;
  }
}

/* ==================================================================
   LOGO CALÉ À GAUCHE
   `.link` porte déjà text-align: left dans le CSS Webflow, et les deux lignes
   « Kevin » / « Hiridjee » démarrent bien au même pixel — sauf dans un cas :
   le repli en colonne de Webflow sous 479 px (donc sans JavaScript), où
   `.div-block-2 { align-items: center }` centrait la boîte du lien entière.

   L'auto-margin plutôt qu'align-self : elle cale le logo à gauche aussi bien
   dans la rangée de l'en-tête que dans ce repli en colonne, sans toucher au
   centrage vertical du premier cas.
   ================================================================== */

.header .link {
  text-align: left;
  margin-right: auto;
}