/* ============================================================
   about.css · page « Qui suis-je » — DA claire/chaude de l'accueil

   La page tenait en un seul bloc de sept paragraphes : 1,8 écran sans
   respiration ni point d'appui pour l'oeil. Elle est refaite en deux
   temps. Une ouverture, photo à gauche et nom à droite. Puis UNE SEULE
   colonne de lecture, centrée, qui ne change jamais de largeur ni de
   bord gauche, avec en marge un mot-clé par paragraphe : un sommaire
   qui suit la lecture et qui donne enfin à la page une structure.

   Cette feuille est autonome : elle porte ses propres halos, donc les
   pages « à propos » n'ont plus besoin de home.css.
   ============================================================ */

/* ===== Révélation au défilement (js/about.js ajoute .in) =====
   Courte et déclenchée tôt : un paragraphe qui apparaît trop tard donne
   l'impression d'une page vide. */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* Entrée à l'arrivée, patron `rise` de home.css.
   Attention : .ent se termine sur `transform:none` en fill-mode forwards,
   et une animation l'emporte sur une déclaration normale. Un élément qui
   porte .ent ne peut donc pas avoir de transform à lui : on met
   l'animation sur une enveloppe et le transform dessous. */
.ent{opacity:0;transform:translateY(16px);
  animation:ab-rise .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ab-rise{to{opacity:1;transform:none}}

/* ===== Le mesh chaud, en version retenue : c'est une page qu'on lit ===== */
body.about{background:var(--cream);--hovermove:5}
/* Le calque passe en `fixed` : il suit la page au lieu de rester en
   haut. Il n'attrape pas les clics, c'est base.css qui s'en charge pour
   tout le site, et c'est indispensable ici : couvrant tout l'écran, il
   rendait le pied de page inatteignable. */
body.about #haze{position:fixed;inset:0;z-index:0;opacity:.5}
.hblob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.hb-warm1{width:60vw;height:60vw;background:var(--c-accent);top:-14vw;left:-6vw;opacity:.5;filter:blur(110px);animation:warm1 calc(18s / var(--motion)) ease-in-out infinite}
.hb-warm2{width:32vw;height:32vw;background:var(--halo-tr);top:2vw;right:4vw;opacity:.5;filter:blur(80px);animation:warm2 calc(22s / var(--motion)) ease-in-out infinite}
.hb-warm3{width:46vw;height:46vw;background:var(--halo-br);bottom:-14vw;right:6%;opacity:.4;filter:blur(105px);animation:warm3 calc(20s / var(--motion)) ease-in-out infinite}
.hb-warm4{width:22vw;height:22vw;background:var(--halo-br);bottom:8vw;left:10%;opacity:.4;filter:blur(70px);animation:warm4 calc(24s / var(--motion)) ease-in-out infinite}
.hb-warm5{width:38vw;height:38vw;background:var(--c-accent);top:24%;left:30%;opacity:.3;filter:blur(120px);animation:warm5 calc(26s / var(--motion)) ease-in-out infinite}
@keyframes warm1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,6vw) scale(1.14)}}
@keyframes warm2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vw) scale(1.16)}}
@keyframes warm3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-5vw) scale(1.12)}}
@keyframes warm4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-6vw) scale(1.18)}}
@keyframes warm5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,4vw) scale(1.2)}}

/* ===== La trace de peinture =====
   Une toile entre le fond et le texte : le curseur y tire un trait
   corail dilué, qui sèche tout seul. Elle est plafonnée en opacité, donc
   même saturée elle ne fait qu'un rose clair sous l'encre du texte, qui
   garde un contraste bien au-delà des 4,5 demandés. `pointer-events`
   coupé : elle n'attrape jamais un clic.
   top/left/width/height et pas `inset` : là où `inset` n'est pas compris,
   la toile garderait la taille de son attribut width, et l'encre se
   retrouverait au double des coordonnées de la souris. */
#peinture{position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:1;pointer-events:none;opacity:.66;filter:blur(34px)}

/* La pointe. Le flou de la toile rend le lavis joli mais mange tout ce
   qui est fin : la pointe est donc un calque à part, sans filtre. C'est
   elle qui donne au tracé un point d'ancrage franc sous le curseur, sans
   qu'on ait à toucher au curseur du système, qui reste celui que la
   personne connaît (barre sur le texte, main sur les liens).
   Une goutte : un disque que la vitesse étire dans le sens du geste. */
#pointe{position:fixed;top:0;left:0;z-index:1;pointer-events:none;
  width:11px;height:11px;border-radius:999px;background:var(--c-accent);opacity:0;
  /* l'ordre compte : on place, on centre, on oriente, puis on étire le
     long de la direction du geste */
  transform:translate3d(var(--ax,0px),var(--ay,0px),0) translate(-50%,-50%)
            rotate(var(--an,0deg)) scaleX(var(--et,1))}

body.about main{position:relative;z-index:2}

/* --mesure : la colonne de lecture, environ 63 signes par ligne à 19,5 px.
   --mot : la colonne du sommaire, en marge. --gout : ce qui les sépare. */
.ab{--mesure:34rem;--mot:clamp(96px,12.5vw,160px);--gout:clamp(24px,3vw,44px);
  max-width:var(--colonne);margin:0 auto;
  padding:clamp(102px,14vh,140px) clamp(20px,5vw,64px) clamp(70px,12vh,120px)}

/* ===== Ouverture =====
   Photo à gauche, nom à droite, calés l'un sur l'autre par le milieu.
   Pas de filet dessous : le grand blanc suffit à séparer. */
.ab-tete{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,72px);align-items:center;
  margin-bottom:clamp(52px,9vh,110px)}

.ab-photo{margin:0}
.ab-objet{position:relative}
/* la plaque corail est posée sur le cadre de l'image et pas sur la
   figure : sur la figure elle passait aussi derrière la légende */
.ab-objet::before{content:"";position:absolute;z-index:0;
  left:16px;top:18px;right:-16px;bottom:-18px;
  border-radius:999px 999px 14px 14px;background:var(--c-accent);opacity:.3}
.ab-objet img{position:relative;z-index:1;display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 24%;
  border-radius:999px 999px 14px 14px;background:rgba(28,28,38,.05)}
/* La plaque descend 18 px sous l'image : la légende doit se poser SOUS
   elle, pas dessus. D'où une marge qui compte les deux. */
.ab-photo figcaption{margin-top:36px;font-size:13.5px;line-height:1.45;
  color:var(--ink-faint)}

.ab-kicker{display:flex;align-items:center;gap:11px;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--ci-accent);margin-bottom:20px}
.ab-kicker::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--c-accent);flex:0 0 auto}
.ab-kicker::after{content:"";height:1.5px;flex:1 1 auto;max-width:130px;
  border-radius:2px;background:color-mix(in srgb,var(--c-accent) 45%,transparent)}

.ab-titre{font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(34px,5.2vw,64px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink)}
/* nowrap : sinon le prénom se coupe à son trait d'union, et le trait qui
   se dessine dessous s'étale sur deux lignes d'un seul tenant */
.ab-titre em{font-style:italic;color:var(--cg-accent);position:relative;
  white-space:nowrap}
.ab-titre em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;
  height:3px;border-radius:2px;background:var(--c-accent);opacity:.5;
  transform:scaleX(0);transform-origin:left;
  animation:ab-trait .8s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ab-trait{to{transform:scaleX(1)}}

/* ===== La colonne de lecture =====
   Centrée dans la page, largeur fixe. Le sommaire vit dans sa marge
   gauche, en position absolue : il ne prend donc jamais un pixel à la
   colonne de texte, qui reste centrée quoi qu'il arrive. */
.ab-lecture{max-width:var(--mesure);margin:0 auto;position:relative}

/* la jauge, au milieu de la gouttière entre le sommaire et le texte */
.ab-jauge{position:absolute;left:calc(-1 * var(--gout) / 2 - 1px);top:6px;
  width:2px;border-radius:2px;height:var(--hauteurTexte,0px);
  background:rgba(28,28,38,.13);overflow:hidden}
.ab-jauge::after{content:"";position:absolute;inset:0;background:var(--c-accent);
  transform:scaleY(var(--lu,0));transform-origin:top;
  transition:transform .14s linear}

.ab-bloc{position:relative}
/* de l'air entre les sections : les mots-clés en font des parties, il
   leur faut plus d'espace qu'entre deux paragraphes d'un même bloc */
.ab-bloc + .ab-bloc{margin-top:clamp(28px,4.4vh,50px)}
.ab-bloc p{font-size:clamp(17px,1.45vw,19.5px);line-height:1.78;color:var(--ink)}
.ab-lead{font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(20px,2vw,27px);line-height:1.42;letter-spacing:-.014em;
  color:var(--ink)}
.ab-bloc:first-child + .ab-bloc{margin-top:clamp(28px,4.2vh,44px)}

/* Le mot-clé : c'est un vrai titre de section (h2), posé dans la marge.
   Aligné à droite, il touche la gouttière, donc l'oeil relie tout de
   suite le mot au paragraphe. Gris quand on n'y est pas, corail assombri
   quand c'est le paragraphe qu'on lit : les deux passent le contraste. */
.ab-mot{position:absolute;right:calc(100% + var(--gout));top:.42em;
  width:var(--mot);text-align:right;
  font-family:var(--body-font),sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.42;
  color:var(--ink-faint);opacity:0;transform:translateX(-10px);
  transition:color .3s ease,opacity .5s ease,
             transform .5s cubic-bezier(.2,.8,.2,1)}
.ab-bloc.in .ab-mot{opacity:1;transform:none}
.ab-bloc.actif .ab-mot{color:var(--ci-accent)}

/* le point posé sur la jauge, à hauteur du mot-clé : creux tant qu'on
   n'y est pas, plein quand c'est le paragraphe en cours */
.ab-bloc::before{content:"";position:absolute;
  left:calc(-1 * var(--gout) / 2 - 5px);top:.62em;
  width:10px;height:10px;border-radius:50%;background:var(--cream);
  box-shadow:0 0 0 2px var(--c-accent);transform:scale(0);
  transition:transform .45s .1s cubic-bezier(.2,.8,.2,1),background .3s ease}
.ab-bloc.in::before{transform:scale(1)}
.ab-bloc.actif::before{background:var(--c-accent)}

/* ===== Le mot de la fin =====
   Il descend loin sous le dernier paragraphe : c'est un blanc qui dit
   que l'article est fini, pas un filet. L'ancienne barre corail pleine
   largeur coupait la page au couteau, et le bloc était collé au texte.
   Ne reste qu'une marque courte, comme une signature. */
.ab-outro{margin-top:clamp(88px,17vh,190px)}
.ab-outro::before{content:"";display:block;width:56px;height:3px;
  border-radius:2px;background:var(--c-accent);
  margin-bottom:clamp(24px,3.6vh,36px)}
.ab-hook{font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(29px,3.8vw,50px);line-height:1.02;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:clamp(24px,3.6vh,36px)}
.ab-hook em{font-style:italic;color:var(--cg-accent)}

/* Les trois façons de me joindre, en lignes plutôt qu'en phrases
   soulignées : le libellé à gauche, la flèche calée à droite, une cible
   large sur toute la colonne. Le décalage au survol est le même geste
   que sur les lignes de projets de l'accueil, c'est ainsi que ce site
   dit « ceci se clique ». */
.ab-links{display:flex;flex-direction:column;
  border-top:1px solid rgba(28,28,38,.14)}
.ab-link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(15px,2.3vh,21px) 0;
  border-bottom:1px solid rgba(28,28,38,.14);
  font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--ink);
  text-decoration:none;
  transition:padding-left .3s cubic-bezier(.2,.8,.2,1),
             color .3s,border-color .3s}
.ab-link .ar{color:var(--c-accent);flex:0 0 auto;transition:transform .3s}
/* Le libellé ne change pas de couleur : recoloré, il passait en corail
   assombri juste au-dessus d'un filet corail, et les deux se mangeaient
   au lieu de se répondre. Le décalage, le filet et la flèche suffisent à
   dire que la ligne répond, et le texte garde sa lisibilité pleine. */
.ab-link:hover{padding-left:12px;border-color:var(--c-accent)}
.ab-link:hover .ar{transform:translate(4px,-4px)}

/* ===== Sous 1040 px =====
   La marge gauche n'a plus la place d'accueillir le sommaire. Les
   mots-clés s'effacent, mais la barre de progression et ses points
   restent : ils passent dans une gouttière ouverte dans la colonne.
   Le seuil est mesuré, pas choisi au hasard : la colonne est centrée,
   donc la place à sa gauche diminue avec la fenêtre, et vers 960 px le
   mot venait toucher le bord de la page. 1040 laisse 25 px d'air. */
@media (max-width:1040px){
  .ab-mot{display:none}
  .ab-lecture{padding-left:var(--gout)}
  .ab-jauge{left:0}
  .ab-bloc::before{left:calc(-1 * var(--gout) - 4px)}
}

/* ===== Sous 860 px =====
   L'ouverture se met d'aplomb : le nom d'abord, la photo ensuite, les
   deux centrés. C'est l'ordre dans lequel on se présente. */
@media (max-width:860px){
  .ab-tete{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,36px);
    margin-bottom:clamp(40px,6vh,64px);justify-items:center;text-align:center}
  .ab-ouverture{order:1}
  .ab-photo{order:2;width:min(74%,300px)}
  /* le libellé se centre : son filet de droite le tirait sur le côté */
  .ab-kicker{justify-content:center}
  .ab-kicker::after{display:none}
  .ab-photo figcaption{margin-top:32px;text-align:center}
}

@media (max-width:760px){
  .ab{--gout:22px;padding-top:clamp(90px,13vh,118px)}
  .hb-warm1{width:135vw;height:135vw;top:-34vw;left:-28vw;filter:blur(70px)}
  .hb-warm2{width:80vw;height:80vw;top:-4vw;right:-18vw;filter:blur(55px)}
  .hb-warm3{width:105vw;height:105vw;bottom:-32vw;right:-22vw;filter:blur(65px)}
  .hb-warm4{width:58vw;height:58vw;bottom:14vw;left:-6vw;filter:blur(45px)}
  .hb-warm5{width:95vw;height:95vw;top:28%;left:12%;filter:blur(70px)}
}

/* Au doigt il n'y a pas de trace de peinture : le script s'en charge
   déjà, cette règle est une ceinture en plus de la bretelle. */
@media (hover:none){#peinture,#pointe{display:none}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ent{opacity:1;transform:none;animation:none}
  .hblob{animation:none}
  .ab-titre em::after{animation:none;transform:scaleX(1)}
  .ab-mot{opacity:1;transform:none;transition:none}
  .ab-bloc::before{transform:scale(1);transition:none}
  .ab-jauge::after{transform:scaleY(1);transition:none}
  #peinture,#pointe{display:none}
}