/* =========================================================================
   Bila Designs — socle
   Couleurs, gouttieres, etats de survol, declinaison mobile.
   Les maquettes portent leurs styles en ligne : ce fichier ne fait que
   poser le systeme et rattraper ce que l'inline ne sait pas faire
   (survol, focus, media queries).
   ========================================================================= */

:root {
  /* Gouttiere laterale du contenu et position des filets verticaux.
     Toute la mise en page des maquettes passe par ces deux variables :
     les redefinir ici suffit a decliner le site en tablette et en mobile. */
  --gut: 90px;
  --rail: 64px;

  --fond: #FBFBFA;
  --fond-2: #F6F6F3;
  --encre: #101B33;
  --bleu: #2743E3;
  --bleu-clair: #5D7EFF;
  --bleu-pale: #7C93FF;
  --texte: #4A5163;
  --texte-2: #6B7280;
  --texte-3: #8A8F9C;
  --texte-4: #A0A5B0;
}

/* Pas de reinitialisation globale de box-sizing : les maquettes sont
   dessinees avec le modele par defaut du navigateur (content-box), et
   posent border-box element par element la ou elles en ont besoin. Le
   forcer ici deplacerait toutes les largeurs maximales. */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* L'attribut hidden doit l'emporter : les maquettes posent display en
   ligne, et une declaration inline bat la feuille de style du navigateur.
   Sans ce !important, un bloc masque resterait visible. */
[hidden] { display: none !important; }

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--encre); }

img { max-width: 100%; }

/* Focus visible sur tout ce qui est actionnable — la DA est au trait,
   le contour l'est aussi. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
}

input:focus, textarea:focus { border-bottom-color: var(--bleu) !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: #FFFFFF;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}

/* ── Animations partagees ────────────────────────────────────────────────
   Reprises telles quelles des maquettes. bila-motion.js les reprend en
   JavaScript pour pouvoir les geler ; elles restent ici comme repli si le
   script ne se charge pas. */
@keyframes bila-halo {
  0%   { transform: scale(1);    opacity: 0.9; }
  65%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}
@keyframes bila-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39,67,227,0.32), 0 8px 22px rgba(39,67,227,0.28); }
  50%      { box-shadow: 0 0 0 9px rgba(39,67,227,0),  0 12px 30px rgba(39,67,227,0.42); }
}
@keyframes bila-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes bila-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes bila-breathe {
  0%, 100% { filter: contrast(1.04) saturate(1.02); }
  50%      { filter: contrast(1.06) saturate(1.16) brightness(1.012); }
}

/* ── Etats de formulaire ─────────────────────────────────────────────────*/
.champ-erreur { border-bottom-color: #B3261E !important; }

.form-retour {
  font-size: 14px;
  line-height: 1.6;
  min-height: 1.4em;
}
.form-retour[data-etat="ok"]      { color: #2743E3; }
.form-retour[data-etat="erreur"]  { color: #B3261E; }

/* Le piege a robots : jamais affiche, jamais atteignable au clavier. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[disabled] { opacity: 0.55; cursor: progress; }

/* Les pastilles a choix unique de la page contact sont de vraies radios :
   on masque le bouton natif et on garde l'apparence de la maquette. */
.pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille { cursor: pointer; }

/* ── Declinaison tablette et mobile ──────────────────────────────────────
   Regle absolue de la DA conservee ici : aucun filet ne croise du texte.
   En dessous de 900px les filets verticaux se rapprochent des bords en
   meme temps que la gouttiere, et sous 640px ils disparaissent — le texte
   occupe alors toute la largeur utile et les croiserait. */
@media (max-width: 1180px) {
  :root { --gut: 56px; --rail: 40px; }
}

@media (max-width: 900px) {
  :root { --gut: 32px; --rail: 22px; }

  /* Les grilles a plusieurs colonnes s'empilent. */
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .g-2 > *, .g-3 > *, .g-4 > * { margin-top: 0 !important; }

  /* Le trait de separation central d'une grille a deux colonnes n'a plus
     de colonne a separer une fois la grille empilee. */
  .g-2 > div[style*="left: calc(50%"] { display: none !important; }

  /* Les cartes en position sticky restent collantes : c'est l'effet
     d'empilement de « Notre expertise », et il fonctionne aussi bien au
     pouce qu'a la souris. Seuls les intervalles de defilement sont
     raccourcis, un ecran de telephone etant bien plus court. */
  main div[style*="height: 42vh"],
  main div[style*="height: 30vh"] { height: 30vh !important; }

  /* Les separateurs verticaux d'une grille a trois colonnes restent a un
     tiers et deux tiers de la largeur une fois la grille empilee : ils
     traversent alors le texte. Regle de la DA : aucun trait sur du texte.
     Ils tombent donc en meme temps que la grille, a 900px et non a 768. */
  main div[style*="(100% - var(--gut) * 2)"] { display: none !important; }
  main div[style*="left: calc(50% - 0.5px)"] { display: none !important; }

  /* Les traits obliques du fond sont traces pour une mise en page large ;
     une fois le contenu empile, ils passent en travers. */
  main div[style*="transform: rotate(-7deg)"],
  main div[style*="transform: rotate(6deg)"],
  main div[style*="transform: rotate(-8deg)"] { display: none !important; }
}

@media (max-width: 760px) {
  /* En-tete : le menu passe sous le logo plutot que de deborder. */
  main header {
    flex-wrap: wrap !important;
    gap: 18px !important;
    row-gap: 18px !important;
  }
  main header nav {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 20px !important;
    row-gap: 0 !important;
  }
  /* Le bouton prend sa propre ligne : colle a la derniere entree de menu,
     il donnait une barre bancale sur deux niveaux inegaux. */
  main header nav > span:last-child {
    flex: 1 0 100% !important;
    margin-top: 16px;
  }

  /* Heros : sur un ecran etroit, le dessin passe derriere le texte. Le
     contraste reste suffisant — mesure entre 6,9 et 7,8 pour 1 — mais les
     traits traversent les mots, et c'est cela qui gene la lecture.
     Attenuer l'image en bloc l'affadissait sans regler le probleme : un
     voile en diagonale degage la zone de texte, en haut a gauche, et
     laisse le dessin respirer en bas a droite. Voile clair et non
     assombri : le fond du site est clair, et l'encre du texte aussi. */
  main section > div[style*="width: 62%"],
  main section > div[style*="width: 66%"],
  main section > div[style*="width: 68%"] {
    width: 100% !important;
  }
  main section > div[style*="width: 62%"]::after,
  main section > div[style*="width: 66%"]::after,
  main section > div[style*="width: 68%"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(158deg,
      rgba(251,251,250,0.94) 0%,
      rgba(251,251,250,0.88) 38%,
      rgba(251,251,250,0.55) 62%,
      rgba(251,251,250,0.10) 84%,
      rgba(251,251,250,0) 100%);
  }

  /* Cible tactile de 44px minimum sur les liens et boutons de pied de page. */
  main footer a { display: inline-block; padding: 6px 0; }
}

@media (max-width: 640px) {
  :root { --gut: 20px; --rail: 20px; }

  /* Sous cette largeur le texte va d'un bord a l'autre : les filets
     verticaux le croiseraient. On les retire plutot que de les tolerer. */
  main section > div[style*="inset: 0"] > div[style*="width: 1px"],
  main section > div > div[style*="width: 1px"][style*="var(--rail)"] {
    display: none !important;
  }

  main form { width: 100%; }
  main form input, main form textarea { width: 100% !important; min-width: 0; }
  main form button { width: 100%; justify-content: center; }
}

/* ── Declinaison telephone : lisibilite et prise en main ─────────────────
   Verifie a 360, 390, 430, 600 et 768 px sur les huit pages. */
@media (max-width: 768px) {

  /* Les rangees horizontales passent a la ligne plutot que de deborder.
     La classe est posee a la construction sur les seules rangees qui ne
     savaient pas encore le faire (voir tag_flex dans dc_convert.py). */
  .fx-row { flex-wrap: wrap !important; }

  /* Plancher de lisibilite. Les etiquettes en capitales tiennent a 11px ;
     en dessous elles deviennent illisibles au telephone. Le desktop garde
     les valeurs de la maquette. */
  .t9  { font-size: 11px !important; }
  .t10 { font-size: 11.5px !important; }
  .t11 { font-size: 11.5px !important; }
  .t12 { font-size: 12.5px !important; }

  /* Le texte courant ne descend pas sous 15px sur telephone. */
  .t13, .t14 { font-size: 15px !important; }

  /* Les etiquettes de la carte « ce qu'on branche » sont posees par le
     script : elles portent leur propre classe pour suivre le plancher. */
  .puce-agent { font-size: 15px !important; padding: 10px 16px !important; }

  /* Cibles tactiles. Les liens de navigation et de pied de page sont des
     lignes de texte de 15px de haut : au doigt, c'est inatteignable. */
  main header nav > a,
  main footer a,
  main .prose a,
  main a[href^="tel:"],
  main a[href^="mailto:"] {
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  /* Le lien du logotype atteint 44 px de haut : le monogramme fait 23 px
     de corps rendu, le rembourrage fait le reste. */
  main header > a { padding: 11px 0; }

  /* Les liens de navigation et de pied de page sont du texte courant :
     ils suivent le meme plancher de 15px que les paragraphes. */
  main header nav > a,
  main footer a { font-size: 15px !important; }

  /* Les champs de formulaire atteignent 44px de haut. */
  main input[type="text"],
  main input[type="email"],
  main input[type="url"],
  main input[type="tel"] {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    font-size: 16px !important; /* en dessous de 16px, iOS zoome au focus */
  }
  main textarea { font-size: 16px !important; }
  main button { min-height: 44px; }
  main .pastille { padding-top: 13px !important; padding-bottom: 13px !important; }


  /* ── Corrections de composition propres au telephone ───────────────────
     La DA est geometrique : une fois les colonnes empilees, les traits
     doivent se reorganiser plutot que de subsister a l'horizontale. */

  /* Hero : l'appel a l'action secondaire passe sous le bouton plutot que
     de se couper en deux a cote de lui. */
  main section div[style*="display: flex"][style*="gap: 28px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Bandeau de confiance : l'etiquette occupait la moitie de la largeur et
     ecrasait le defilement. Elle passe au-dessus, sur toute la largeur, et
     la piste prend l'espace qui reste. */
  main section > div[style*="align-items: stretch"] { flex-wrap: wrap !important; }
  main section > div[style*="align-items: stretch"] > div:first-child {
    /* border-box ici uniquement : la maquette est dessinee en content-box,
       et « width: 100% » plus le rembourrage deborderait de la fenetre. */
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    padding: 14px var(--gut) !important;
  }
  main section > div[style*="align-items: stretch"] > div:last-child {
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 100% !important;
  }

  /* Grilles a colonnes : une fois empilees, la separation verticale n'a
     plus de sens. Elle devient horizontale, et le decalage interne saute. */
  .g-2 > *[style*="border-left"],
  .g-3 > *[style*="border-left"],
  .g-4 > *[style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid rgba(16,27,51,0.14);
  }
  main section[style*="background: #101B33"] .g-2 > *[style*="border-left"],
  main section[style*="background: #101B33"] .g-3 > *[style*="border-left"],
  main section[style*="background: #101B33"] .g-4 > *[style*="border-left"] {
    border-top-color: rgba(255,255,255,0.16);
  }
  /* Les colonnes portaient des retraits asymetriques, pensees cote a cote :
     empilees, elles doivent toutes partir du meme bord. */
  .g-2 > *, .g-3 > *, .g-4 > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .g-2 > *:not(:first-child),
  .g-3 > *:not(:first-child),
  .g-4 > *:not(:first-child) { padding-top: 26px !important; }

  /* Etapes de « Sites web & branding » : les cartes restent collantes,
     donc leur hauteur doit tenir dans la fenetre. Une carte plus haute se
     fait rogner par le bas et c'est la phase 2 qu'on voyait coupee. La
     vignette carree pleine largeur coutait a elle seule 350 px. */
  main #process [id^="step-"] > div[data-rise] {
    max-width: 190px;
    margin-top: 4px;
  }
  main #process [id^="step-"] { padding-bottom: 20px !important; }

  /* Le decalage entre les trois cartes collantes est ce qui donne l'effet
     d'empilement. Sur un ecran court il coute la place qui manque en bas :
     il est reduit sans disparaitre. */
  main #step-1 { top: 56px !important; }
  main #step-2 { top: 68px !important; }
  main #step-3 { top: 80px !important; }

  /* Chaine du dossier : cinq onglets partageant la largeur donnent 71 px
     chacun sur un telephone, et les libelles se chevauchent. Ils passent
     en liste verticale, chacun sur sa ligne, le numero devant. */
  .onglets-chaine {
    flex-direction: column !important;
    border-bottom: none !important;
  }
  .onglets-chaine > [data-choix] {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 16px !important;
    padding: 16px 2px !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(16,27,51,0.14);
    box-shadow: none !important;
  }
  .onglets-chaine > [data-choix][aria-selected="true"] {
    box-shadow: inset 3px 0 0 0 #2743E3 !important;
    padding-left: 16px !important;
  }
  .onglets-chaine > [data-choix] > span:last-child {
    font-size: 20px !important;
    white-space: normal;
  }

  /* Barre d'audit : le filet qui separait l'etiquette du titre ne separe
     plus rien une fois les deux passes l'un sous l'autre. */
  main section span[style*="width: 1px"][style*="height: 22px"] { display: none !important; }

  /* Rangee des confreres : le nom et la prestation tiennent sur deux
     lignes alignees a gauche, la meme pour tous, plutot que de dependre
     de la longueur du nom. */
  main a[data-firm] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Pied de page : les colonnes portaient un retrait interne pense pour
     une disposition cote a cote. Empilees, ce retrait les decalait les
     unes par rapport aux autres. Elles repartent toutes du meme bord,
     separees par un filet, comme le reste de la mise en page. */
  main footer > div:first-child {
    flex-direction: column !important;
    gap: 0 !important;
  }
  main footer > div:first-child > div {
    width: 100%;
    min-width: 0 !important;
    padding: 24px 0 0 !important;
    margin-top: 24px;
    border-top: 1px solid rgba(16,27,51,0.12);
  }
  main footer > div:first-child > div:first-child {
    padding-top: 0 !important;
    margin-top: 0;
    border-top: none;
  }

  /* Bas du pied de page : les mentions s'alignent a gauche sous le
     copyright au lieu de flotter a droite. */
  main footer > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  main footer > div:last-child > div {
    padding: 0 !important;
    gap: 18px !important;
  }
  main footer > div:last-child > span { padding: 0 !important; }

  /* Zone tactile de 44px sans deplacer le soulignement : les liens de
     texte souligne recoivent une zone cliquable invisible, centree sur
     eux. Le dessin ne bouge pas, le doigt les atteint. */
  /* Les liens de texte deviennent atteignables au doigt. Le filet sous le
     mot descend de quelques pixels : sur telephone c'est invisible, et
     cela vaut mieux qu'un lien qu'on n'arrive pas a toucher. */
  main a[style*="border-bottom"] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Les petits liens utilitaires souligned n'ont pas de filet a preserver :
     un vrai rembourrage suffit, et il est plus fiable. */
  main a[style*="text-decoration: underline"] {
    display: inline-block;
    padding: 11px 0;
  }

  /* Les boutons pleins suivent le meme plancher de lisibilite que le
     texte courant. */
  main a[style*="border-radius: 999px"],
  main button[style*="border-radius: 999px"] { font-size: 15px !important; }
}

/* Sur les ecrans les plus courts, le decalage des cartes collantes se
   resserre encore : huit pixels manquaient a la troisieme pour tenir
   entiere dans la fenetre. */
@media (max-width: 400px) {
  main #step-1 { top: 40px !important; }
  main #step-2 { top: 50px !important; }
  main #step-3 { top: 60px !important; }
}

/* ── Mouvement reduit ────────────────────────────────────────────────────
   bila-motion.js gele deja ses propres animations ; cette regle couvre
   celles qui restent en CSS pur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Impression ──────────────────────────────────────────────────────────*/
@media print {
  main section > div[style*="inset: 0"] { display: none !important; }
  main header nav, main footer { display: none !important; }
}

/* ── Schema des huit leviers ─────────────────────────────────────────────
   Dessine pour 1240 px. En dessous, il garde sa taille de lecture et se
   parcourt lateralement plutot que de se reduire en timbre-poste. */
.schema-invite { display: none; }

@media (max-width: 1000px) {
  .schema-piste {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* le degrade dit qu'il reste quelque chose a droite */
    mask-image: linear-gradient(to right, #000 0, #000 92%, rgba(0,0,0,0.35) 100%);
  }
  .schema-piste svg { min-width: 940px; }
  .schema-invite {
    display: block;
    margin-top: 14px;
    font-family: 'Caveat', cursive;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    transform: rotate(-1deg);
  }
}

/* ── Menu de telephone ───────────────────────────────────────────────────
   Le geste vient du StaggeredMenu de React Bits : deux sous-couches
   glissent l'une apres l'autre, le panneau arrive par-dessus, puis les
   entrees montent en cascade depuis le bas de leur ligne. Ni React ni
   GSAP ici : des transitions decalees suffisent, et le decalage est
   ecrit dans les delais plutot que dans une frise d'animation.

   Les durees et les courbes reprennent celles du composant d'origine :
   0,5 s pour les sous-couches, 0,65 s pour le panneau, 1 s pour les
   entrees, toutes en power4.out ; 0,32 s en power3.in a la fermeture. */

:root {
  --menu-sortie: cubic-bezier(0.16, 1, 0.30, 1);   /* power4.out */
  --menu-entree: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* power3.in */
}

/* ── Le bouton ───────────────────────────────────────────────────────────*/
.menu-bouton {
  display: none;
  align-items: center;
  gap: 10px;
  margin-right: -6px;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--encre);
  flex: 0 0 auto;
}
.menu-bouton-mots {
  display: block;
  height: 12px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu-bouton-defile {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s var(--menu-sortie);
}
.menu-bouton-defile > span { display: block; height: 12px; line-height: 12px; }

.menu-bouton-croix {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform 0.8s var(--menu-sortie);
}
.menu-bouton-croix > span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.menu-bouton-croix > span:last-child { transform: rotate(90deg); }

/* A l'ouverture : le mot roule vers « Fermer », la croix pivote d'un
   quart de tour et demi, exactement comme le composant d'origine. */
body[data-menu-ouvert] .menu-bouton-defile { transform: translateY(-12px); }
body[data-menu-ouvert] .menu-bouton-croix { transform: rotate(225deg); }
body[data-menu-ouvert] .menu-bouton { color: var(--bleu); }

/* ── L'enveloppe, les sous-couches et le panneau ─────────────────────────*/
.menu-enveloppe {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.36s;
}
body[data-menu-ouvert] .menu-enveloppe {
  visibility: visible;
  transition-delay: 0s;
}

.menu-souscouches { position: absolute; inset: 0; }
.menu-souscouches > span {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: transform 0.32s var(--menu-entree);
}
.menu-souscouches > span:first-child { background: #5D7EFF; }
.menu-souscouches > span:last-child  { background: #2743E3; }

.menu-panneau {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 30px var(--gut) 40px;
  box-sizing: border-box;
  background: var(--fond);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.32s var(--menu-entree);
}

body[data-menu-ouvert] .menu-souscouches > span,
body[data-menu-ouvert] .menu-panneau {
  transform: translateX(0);
  transition: transform 0.5s var(--menu-sortie);
}
body[data-menu-ouvert] .menu-souscouches > span:last-child { transition-delay: 0.07s; }
body[data-menu-ouvert] .menu-panneau {
  transition-duration: 0.65s;
  transition-delay: 0.15s;
}

.menu-filets { position: absolute; inset: 0; pointer-events: none; }
.menu-filets span {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(16,27,51,0.1);
}
.menu-filets span:first-child { left: var(--rail); }
.menu-filets span:last-child  { right: var(--rail); }

/* ── Les entrees ─────────────────────────────────────────────────────────*/
.menu-liste {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  border-top: 1px solid rgba(16,27,51,0.14);
}
.menu-ligne {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 2px;
  border-bottom: 1px solid rgba(16,27,51,0.14);
}
.menu-rang {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bleu);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.menu-item {
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  color: var(--encre);
  text-decoration: none;
}
.menu-mot {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: translateY(140%) rotate(10deg);
  transition: transform 0.32s var(--menu-entree);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 8.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.menu-item[aria-current] .menu-mot { color: var(--bleu); }
.menu-item:hover .menu-mot,
.menu-item:focus-visible .menu-mot { color: var(--bleu); }

body[data-menu-ouvert] .menu-mot {
  transform: translateY(0) rotate(0deg);
  transition: transform 1s var(--menu-sortie);
}
body[data-menu-ouvert] .menu-rang { opacity: 1; }

/* Le decalage : chaque entree part un dixieme de seconde apres la
   precedente, les numeros un peu apres elles. */
body[data-menu-ouvert] .menu-ligne:nth-child(1) .menu-mot { transition-delay: 0.25s; }
body[data-menu-ouvert] .menu-ligne:nth-child(2) .menu-mot { transition-delay: 0.35s; }
body[data-menu-ouvert] .menu-ligne:nth-child(3) .menu-mot { transition-delay: 0.45s; }
body[data-menu-ouvert] .menu-ligne:nth-child(4) .menu-mot { transition-delay: 0.55s; }
body[data-menu-ouvert] .menu-ligne:nth-child(1) .menu-rang { transition-delay: 0.35s; }
body[data-menu-ouvert] .menu-ligne:nth-child(2) .menu-rang { transition-delay: 0.43s; }
body[data-menu-ouvert] .menu-ligne:nth-child(3) .menu-rang { transition-delay: 0.51s; }
body[data-menu-ouvert] .menu-ligne:nth-child(4) .menu-rang { transition-delay: 0.59s; }

/* ── Le pied du panneau ──────────────────────────────────────────────────*/
.menu-pied {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.3s ease, transform 0.3s var(--menu-entree);
}
body[data-menu-ouvert] .menu-pied {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease 0.45s, transform 0.55s var(--menu-sortie) 0.45s;
}

.menu-cta {
  display: inline-flex;
  align-items: center;
  padding: 17px 32px;
  border-radius: 999px;
  background: var(--bleu);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.menu-cta:hover, .menu-cta:focus-visible { background: var(--encre); color: #FFFFFF; }

.menu-coord { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.menu-coord a {
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid rgba(16,27,51,0.22);
  padding-bottom: 3px;
}
.menu-coord a.menu-coord--sobre { color: var(--texte); border-bottom-color: transparent; }

.menu-reseaux { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.menu-reseaux-titre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.menu-reseaux ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.menu-reseau {
  font-size: 15px;
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.menu-reseau:hover, .menu-reseau:focus-visible {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}

.menu-note {
  font-family: 'Caveat', cursive;
  font-size: 21px;
  color: var(--texte);
  transform: rotate(-1deg);
  display: inline-block;
}

/* Pendant l'ouverture, la page derriere ne defile pas. */
body[data-menu-ouvert] { overflow: hidden; }

@media (max-width: 768px) {
  .menu-bouton { display: inline-flex; }
  main header nav { display: none !important; }
  main header { flex-wrap: nowrap !important; gap: 16px !important; }
}

@media (min-width: 769px) {
  /* Au-dela, la barre reprend la main, meme si le panneau etait reste
     ouvert au moment d'une rotation d'ecran. */
  .menu-enveloppe { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-souscouches > span,
  .menu-panneau,
  .menu-mot,
  .menu-rang,
  .menu-pied,
  .menu-bouton-defile,
  .menu-bouton-croix { transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}

/* ── Logotype « Deux encres » ────────────────────────────────────────────
   Deux lettres en Fraunces 600 imprimees l'une sur l'autre. La zone
   commune produit une troisieme encre : ce n'est pas un ornement, c'est
   la marque. Voir assets/marque/LISEZ-MOI-logo.md.

   isolation: isolate est obligatoire. Sans lui, les lettres se melangent
   avec le fond de la page entiere et non entre elles seules. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
  text-decoration: none;
}

.logo-bd {
  display: inline-flex;
  isolation: isolate;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1em;
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.logo-b { color: #101B33; mix-blend-mode: multiply; }

/* Le D remonte sur le B : c'est ce chevauchement qui cree l'encre
   commune. Ne pas toucher a la valeur. */
.logo-d { margin-left: -0.34em; color: #2743E3; mix-blend-mode: multiply; }

.logo-filet {
  width: 1px;
  align-self: stretch;
  background: rgba(16, 27, 51, 0.2);
  flex: 0 0 1px;
}

/* Le nom suit la taille du monogramme : il est en em, jamais en pixels. */
.logo-nom {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.48em;
  letter-spacing: -0.012em;
  color: #101B33;
  white-space: nowrap;
}

/* Sur fond navy la logique s'inverse. */
.logo--sombre .logo-b { color: #FFFFFF; mix-blend-mode: screen; }
.logo--sombre .logo-d { color: #5D7EFF; mix-blend-mode: screen; }
.logo--sombre .logo-nom { color: #FFFFFF; }
.logo--sombre .logo-filet { background: rgba(255, 255, 255, 0.22); }

/* Repli sans melange, pour l'impression et les captures. */
@media print {
  .logo-b, .logo-d { mix-blend-mode: normal; }
}

/* En dessous de 20 px de corps le recouvrement se referme et les deux
   lettres se confondent : le nom passe a la ligne plutot que de forcer
   la reduction du monogramme. */
@media (max-width: 400px) {
  .logo { gap: 11px; }
}

/* ── Realisations : l'ecran vu de trois quarts ───────────────────────────
   Le seul element repris de l'ancien site. Chaque capture est presentee
   comme un ecran pose de biais, qui se redresse quand on s'en approche.
   L'inclinaison est celle d'origine ; l'habillage suit la nouvelle DA :
   angles vifs, ombre encree et non noire, pas de rayon. */
.ecran-3d {
  perspective: 1400px;
}

.ecran-3d-plaque {
  /* Le filet bleu qui tourne autour du cadre. Le principe est celui du
     balayage deja employe dans les maquettes : un degrade conique bien
     plus grand que la boite, qui tourne derriere le contenu et n'est
     visible que sur le lisere d'un pixel laisse libre par le rembourrage.
     Il tourne en continu, sans attendre le survol. */
  box-sizing: border-box;
  padding: 1px;
  background-color: rgba(16, 27, 51, 0.16) !important;
  transform: rotateX(6deg) rotateY(-8deg) scale(0.95);
  transform-origin: 50% 60%;
  box-shadow: 20px 30px 64px rgba(16, 27, 51, 0.20),
              0 3px 14px rgba(16, 27, 51, 0.10);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.85s ease;
  will-change: transform;
}

.ecran-3d-plaque::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  height: 320%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 246deg,
    rgba(39, 67, 227, 0.30) 296deg,
    #2743E3 336deg,
    rgba(39, 67, 227, 0.30) 16deg,
    transparent 66deg, transparent 360deg);
  animation: bila-sweep 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Le contenu passe au-dessus du balayage : seul le lisere reste visible. */
.ecran-3d-plaque > * { position: relative; z-index: 1; }

/* Les quatre cadres ne tournent pas ensemble : le decalage evite l'effet
   de guirlande synchronisee. */
article:nth-child(2) .ecran-3d-plaque::before { animation-delay: -1.5s; }
article:nth-child(3) .ecran-3d-plaque::before { animation-delay: -3s; }
article:nth-child(4) .ecran-3d-plaque::before { animation-delay: -4.5s; }

@media (prefers-reduced-motion: reduce) {
  .ecran-3d-plaque::before { animation: none; }
}

/* Le second de chaque rangee penche dans l'autre sens : les quatre
   ecrans ne regardent pas tous du meme cote, la grille respire. */
article:nth-child(even) .ecran-3d-plaque {
  transform: rotateX(6deg) rotateY(8deg) scale(0.95);
}

.ecran-3d-reflet {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%,
                                       rgba(255,255,255,0.05) 40%,
                                       transparent 70%);
  transition: opacity 0.85s ease;
}

.ecran-3d:hover .ecran-3d-plaque,
article:nth-child(even) .ecran-3d:hover .ecran-3d-plaque {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  box-shadow: 0 18px 44px rgba(16, 27, 51, 0.14);
}

.ecran-3d:hover .ecran-3d-reflet { opacity: 0; }

/* Sur un ecran tactile il n'y a pas de survol, donc pas de redressement :
   l'inclinaison est simplement plus douce, pour que la capture reste
   lisible tout en gardant l'effet de maquette posee de biais. */
@media (hover: none), (max-width: 900px) {
  .ecran-3d { perspective: 900px; }
  .ecran-3d-plaque {
    transform: rotateX(4deg) rotateY(-5deg) scale(0.97);
    box-shadow: 12px 18px 40px rgba(16, 27, 51, 0.16),
                0 2px 10px rgba(16, 27, 51, 0.08);
  }
  article:nth-child(even) .ecran-3d-plaque {
    transform: rotateX(4deg) rotateY(5deg) scale(0.97);
  }
  .ecran-3d-reflet { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .ecran-3d-plaque, article:nth-child(even) .ecran-3d-plaque { transform: none; }
  .ecran-3d-reflet { opacity: 0; }
}

/* ── Cadre lumineux (BorderGlow) — repris tel quel de la maquette ─────── */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 26;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 0px;
  --glow-padding: 34px;
  --cone-spread: 25;

  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(16, 27, 51, 0.16);
  background: var(--card-bg, #FBFBFA);
  overflow: visible;
}

.border-glow-card--light {
  border-color: rgba(16, 27, 51, 0.16);
}

.border-glow-card--light::after,
.border-glow-card--light > .edge-light {
  mix-blend-mode: normal;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #FBFBFA) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.3) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}