/* ============================================================
   À PROPOS — la personne derriere le site
   ============================================================
   Six temps : la personne, le recit, la maniere d'accompagner,
   le fil du parcours, la transmission, la rencontre.

   Chaque grande page a son langage : les runes tiennent l'histoire
   et les objets, le livre l'edition et le bordeaux. Ici, c'est la
   presence : une vraie photographie, un carnet, des notes a la
   main, un fil qui traverse le temps. Aucune rune geante, aucun
   mandala, aucune montagne.

   Palette : celle du site (ivoire, encre, cuivre), un olive grise
   tres discret pour les ombres et quelques traits, et un vert olive
   tres sombre pour une seule section. Pas de nouvelle couleur
   dominante.

   Matieres : le grain est un bruit SVG calcule par le navigateur,
   les voiles sont des degrades ; la seule image decorative est
   l'ombre d'un rameau (bin/preparer-images-a-propos.py).

   Le contenu Gutenberg du theme stylise p, a, li, h2, h3, img et
   figcaption avec une specificite (0,1,1) : toutes les regles
   passent donc sous `.apropos-page`.
   ============================================================ */

/* L ecriture a la main des notes, hebergee par le theme comme les
   autres polices (assets/fonts, SIL OFL 1.1). */
@font-face{font-family:"Oooh Baby";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/oooh-baby-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Oooh Baby";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/oooh-baby-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Son repli, comme ceux de style.css : Georgia ramenee a la chasse et
   aux hauteurs d'Oooh Baby (mesurees dans Chromium). Sans lui, la note
   du bandeau, plus large en attendant la police, passait sur deux
   lignes puis remontait sur une seule : CLS 0,16 a 768 px. */
@font-face{font-family:"Oooh Baby repli";src:local("Georgia");size-adjust:78.8%;ascent-override:114.21%;descent-override:41.24%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.apropos-page{
  --ap-ivoire:#FAF8F4;
  --ap-papier:#F5F0E7;          /* un cran plus chaud : les reperes */
  --ap-sable:#EFE7DA;           /* le panneau du livre, la rencontre */
  --ap-encre:#2A2622;
  --ap-encre2:#4F4841;          /* texte courant : 8,5:1 sur l'ivoire, 7,9:1 sur le papier */
  --ap-encre3:#6B6258;          /* 5,2:1 sur le papier des reperes */
  --ap-note:#4D4238;            /* l'encre des notes manuscrites : 9,2:1 */
  --ap-cuivre:#B8864E;
  --ap-cuivre-fonce:#8C5F32;    /* petits textes cuivre sur ivoire : 5,3:1 */
  --ap-cuivre-encre:#7A522B;    /* dates ecrites a la main : 6:1 sur le papier */
  --ap-cuivre-clair:#D4A46A;
  --ap-olive:#7F8169;           /* olive grise : ombres, filets */
  --ap-olive-texte:#5F6150;
  --ap-nuit:#22261E;            /* le vert olive tres sombre */
  --ap-nuit2:#2C3126;
  --ap-lin:#EDE6D8;             /* texte clair sur la nuit olive */
  --ap-trait:#E3DACB;
  --ap-lent:.45s cubic-bezier(.22,1,.36,1);
  --ap-main:"Oooh Baby","Oooh Baby repli","Cormorant Garamond",Georgia,serif;
  --ap-section:clamp(4.75rem,8vw,8rem);
  --ap-entete:0px;              /* l'en-tete est dans le flux depuis 1.9.57 */
  /* Grain de papier : un bruit fractal, desature, calcule une fois
     par le navigateur et pose en mosaique. */
  --ap-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --ap-grain-doux:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --acc:var(--ap-cuivre);
  --acc-bord:var(--ap-trait);
  background:var(--ap-ivoire);
  overflow-x:clip;
}

/* body:is(...) .interieur (0,2,1) pose 7 a 10rem en tete de page : le
   bandeau commence ici sous l'en-tete, a la place de ce retrait. */
main.interieur.apropos-page{padding-top:0}
.apropos-page .entry{padding-block:0}
.apropos-page .entry > *{max-width:none}
.apropos-page .entry > * + *{margin-top:0}
.apropos-page .entry img{border-radius:0}
.apropos-page .entry figure{margin:0}
.apropos-page section{padding-block:0}

.apropos-page .ap-in{position:relative;z-index:2;max-width:76rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3.5rem)}

/* Le grain, sur toutes les bandes claires. Une seule couche, tres
   basse, en multiplication : il salit le papier sans le griser. */
.apropos-page .ap-bande{position:relative;isolation:isolate}
.apropos-page .ap-bande::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ap-grain);background-size:240px;opacity:.09;mix-blend-mode:multiply}

/* ---------- Typographie commune ---------- */
.apropos-page .eyebrow{color:var(--ap-cuivre-fonce);font-size:.75rem}
.apropos-page .eyebrow::before{background:var(--ap-cuivre)}
.apropos-page .entry h2{margin:0;font-family:var(--serif);font-weight:400;color:var(--nuit);
  font-size:clamp(2.2rem,3.9vw,3.35rem);line-height:1.08;letter-spacing:-.012em}
.apropos-page .entry h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--nuit);line-height:1.15;text-wrap:balance}
.apropos-page .entry h2,.apropos-page .entry .ap-hero__phrase{text-wrap:balance}
.apropos-page .entry p{text-wrap:pretty}
.apropos-page .entry .eyebrow + h1,
.apropos-page .entry .eyebrow + h2{margin-top:var(--air-chapeau)}
.apropos-page .entry p{color:var(--ap-encre2)}
.apropos-page .entry p + p{margin-top:0}

/* La note : l'ecriture a la main, jamais plus de quelques mots. */
.apropos-page .ap-note{font-family:var(--ap-main);font-weight:400;font-style:normal;color:var(--ap-note);
  line-height:1.25;letter-spacing:.01em}

/* ---------- Liens editoriaux ----------
   Le filet sous le lien n'occupe d'abord que le debut du mot ; il
   s'allonge au survol, la fleche avance de quelques pixels. C'est un
   fond, pas un pseudo-element : ::after reste libre pour etendre la
   zone cliquable a toute une entree. */
.apropos-page .entry a.ap-lien{display:inline-flex;align-items:center;gap:.55rem;padding-bottom:.4rem;
  border-bottom:0;color:var(--ap-encre);font-family:var(--sans);font-size:.98rem;font-weight:500;letter-spacing:.02em;
  text-decoration:none;background:linear-gradient(var(--ap-cuivre),var(--ap-cuivre)) 0 100% / 46% 1px no-repeat;
  transition:color var(--ap-lent),background-size .6s var(--ease)}
.apropos-page .entry a.ap-lien .fl{display:inline-block;color:var(--ap-cuivre);transition:transform var(--ap-lent)}
.apropos-page .entry a.ap-lien:hover,.apropos-page .entry a.ap-lien:focus-visible{color:var(--ap-cuivre-fonce);background-size:100% 1px}
.apropos-page .entry a.ap-lien:hover .fl,.apropos-page .entry a.ap-lien:focus-visible .fl{transform:translateX(4px)}
.apropos-page .entry a:focus-visible{outline:2px solid var(--ap-cuivre);outline-offset:4px;border-radius:2px}

/* L'ombre d'un rameau : un seul asset, decline par la mise en place. */
.apropos-page .ap-ombre{position:absolute;z-index:1;pointer-events:none;aspect-ratio:660 / 600;
  background:url("assets/images/apropos-ombre-rameau-660.webp") center/contain no-repeat;mix-blend-mode:multiply}

/* ============================================================
   1. LA PERSONNE — le bandeau
   ============================================================
   Le texte a gauche sur l'ivoire, la photographie a droite, sans
   cadre ni medaillon : elle occupe toute la hauteur et se fond dans
   le papier par la gauche. L'ombre d'un feuillage tombe sur la page,
   comme si la lumiere du jardin de la photographie la traversait. */
.apropos-page .ap-hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(40rem,100svh - 1.5rem - var(--hauteur-entete),53rem);padding-top:var(--ap-entete);
  background:
    radial-gradient(52rem 34rem at 18% 30%,rgba(255,255,255,.7),transparent 64%),
    radial-gradient(40rem 30rem at 30% 100%,rgba(222,208,184,.28),transparent 70%),
    var(--ap-ivoire)}
.apropos-page .ap-hero .ap-in{width:100%}
.apropos-page .ap-hero__texte{position:relative;z-index:3;max-width:33rem;padding-block:3.5rem 4.5rem}
.apropos-page .ap-hero__titre{margin:0;font-family:var(--serif);font-weight:400;color:var(--nuit);
  font-size:clamp(3.6rem,6.3vw,6rem);line-height:.94;letter-spacing:-.022em}
.apropos-page .entry .ap-hero__phrase{max-width:29rem;margin-top:clamp(1.6rem,2.4vw,2.1rem);font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,1.95vw,1.82rem);line-height:1.3;letter-spacing:-.004em;color:var(--ap-encre)}
.apropos-page .entry .ap-hero__suite{margin-top:1.35rem;max-width:27rem;font-size:1.1rem;line-height:1.72}
/* Pratiquer · Accompagner · Transmettre : la note a la main, un trait
   de plume sous chaque mot (.ap-trait dans le contenu), plus court sous
   celui du milieu. */
.apropos-page .entry .ap-hero__note{margin-top:2.1rem;font-size:clamp(1.35rem,1.8vw,1.72rem);transform:rotate(-1.4deg);transform-origin:left;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
.apropos-page .ap-hero__note .ap-sep{color:var(--ap-cuivre);font-family:var(--serif);font-size:.8em}
.apropos-page .ap-hero__note .ap-trait{position:relative;padding-bottom:.45rem}
.apropos-page .ap-hero__note .ap-trait::after{content:"";position:absolute;left:-2%;right:-4%;bottom:0;height:.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C22 3.6 48 2.6 70 3.4S104 5.6 119 3.1' fill='none' stroke='%23B8864E' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.8}
.apropos-page .ap-hero__note .ap-trait--court::after{left:18%;right:22%}

/* La photographie. Aucune retouche : elle est seulement cadree. */
/* Sa largeur fixe l'echelle du visage : a 47 %, il garde sa presence
   sans devenir un gros plan. Elle se fond dans le papier a gauche, et
   un peu en haut et en bas : aucun bord franc avec la page. */
.apropos-page .ap-hero__photo{position:absolute;z-index:1;top:var(--ap-entete);right:0;bottom:0;width:min(43%,42rem);margin:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 11%,rgba(0,0,0,.62) 25%,#000 40%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 5%,#000 11%,#000 82%,rgba(0,0,0,.4) 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 11%,rgba(0,0,0,.62) 25%,#000 40%),linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 5%,#000 11%,#000 82%,rgba(0,0,0,.4) 93%,transparent 100%);
  mask-composite:intersect}
.apropos-page .ap-hero__photo picture{display:block;height:100%}
.apropos-page .ap-hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 55%;
  transform-origin:62% 40%}
/* L'arrivee : la photographie se pose, un zoom interne de 3 % qui se
   resorbe en deux secondes. Aucune opacite : c'est l'image LCP, elle
   doit etre peinte des son chargement. Rien au survol. */
:where(.js-animations-ready) .apropos-page .ap-hero__photo img{animation:ap-pose 2.2s var(--ease) both}
@keyframes ap-pose{from{transform:scale(1.035)}to{transform:none}}

/* L'ombre du feuillage, en bas a gauche, sous le texte. */
/* L'ombre du feuillage part de la photographie et tombe vers le texte :
   le jardin du portrait deborde sur la page. */
.apropos-page .ap-hero .ap-ombre{left:30%;bottom:-3.5rem;width:min(34rem,38vw);opacity:.15;transform:scaleX(-1) rotate(-6deg)}

/* ============================================================
   2. LE RECIT — Mon parcours
   ============================================================
   Pas un 50/50 : l'image est un tirage pose de biais, qui deborde
   dans la marge de gauche et commence plus haut que le texte. Le
   texte descend d'un cran. 2015 est note a la main dans la
   gouttiere, en face du paragraphe qui le raconte ; la legende,
   elle, reste sous l'image. */
.apropos-page .ap-recit{padding-block:clamp(4.5rem,7vw,6.5rem) var(--ap-section);
  background:
    radial-gradient(46rem 30rem at 86% 18%,rgba(255,255,255,.62),transparent 66%),
    var(--ap-ivoire)}
.apropos-page .ap-recit__grille{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);column-gap:clamp(3.5rem,7vw,7rem);align-items:start}
.apropos-page .entry .ap-recit__image{position:relative;margin:0 clamp(0rem,3.2vw,3.25rem) 0 clamp(-5rem,-4.2vw,0rem)}
/* Le tirage : un liseré de papier, une ombre courte, un degre de biais. */
.apropos-page .ap-recit__image picture{display:block;position:relative;padding:.45rem;background:#FCFAF6;transform:rotate(-1.2deg);
  box-shadow:0 1px 2px rgba(42,38,34,.14),0 26px 48px -28px rgba(42,38,34,.5),0 8px 18px -12px rgba(42,38,34,.2)}
.apropos-page .ap-recit__image img{display:block;width:100%;aspect-ratio:4 / 3.05;object-fit:cover;object-position:62% 50%}
.apropos-page .entry .ap-recit__image figcaption{position:relative;margin:1.6rem 1.5rem 0 auto;width:max-content;max-width:100%;
  text-align:left;font-size:clamp(1.35rem,1.7vw,1.62rem);transform:rotate(-2.4deg);color:var(--ap-note)}
.apropos-page .ap-recit__image figcaption::before{content:"";position:absolute;left:-2.9rem;top:.72em;width:2.3rem;height:.6rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M1 6.5C9 4.6 20 4 32 4.6' fill='none' stroke='%237F8169' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

.apropos-page .ap-recit__texte{position:relative;padding-top:clamp(2.5rem,5vw,4.5rem)}
.apropos-page .entry .ap-recit__texte h2{font-size:clamp(2.2rem,3.15vw,2.85rem);line-height:1.1}
@media (min-width:768px){.apropos-page .ap-ligne{display:block}}
/* Un filet a la main sous le titre : le seul ornement du bloc. */
.apropos-page .ap-recit__texte h2::after{content:"";display:block;width:6.5rem;height:.7rem;margin-top:1.3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 11'%3E%3Cpath d='M1 7.2C14 3.2 25 3.4 37 6.3S62 9.4 75 5.6 94 2.2 103 4.4' fill='none' stroke='%23B8864E' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") left center/contain no-repeat}
.apropos-page .ap-recit__corps{margin-top:clamp(1.8rem,2.6vw,2.3rem);max-width:34rem}
.apropos-page .entry .ap-recit__corps p{font-size:1.12rem;line-height:1.76;color:#473F38}
.apropos-page .entry .ap-recit__corps p + p{margin-top:1.15rem}
.apropos-page .entry .ap-recit__corps p:first-child{position:relative}
/* La date dans la marge. Elle double le texte : lecteurs d'ecran exclus. */
.apropos-page .ap-marge{position:absolute;right:calc(100% + 1.6rem);top:-.2rem;
  font-family:var(--ap-main);font-size:2.15rem;line-height:1;color:var(--ap-cuivre-encre);transform:rotate(-8deg);white-space:nowrap}
.apropos-page .ap-marge::after{content:"";position:absolute;left:8%;right:-10%;bottom:-.5rem;height:.45rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C15 2.8 36 2.4 59 4.2' fill='none' stroke='%23B8864E' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.75}

/* ============================================================
   3. LA MANIERE D'ACCOMPAGNER — la rupture
   ============================================================
   Un vert olive tres sombre, le seul de la page, jamais le bleu
   nuit du reste du site. Une tache de lumiere chaude en haut a
   droite, traversee par l'ombre du rameau : la meme lumiere que
   dans le bandeau, vue depuis l'interieur. */
.apropos-page .ap-maniere{position:relative;isolation:isolate;overflow:hidden;color:var(--ap-lin);
  padding-block:clamp(5.5rem,9vw,8.5rem) clamp(5.5rem,8.5vw,8rem);
  background:
    radial-gradient(40rem 30rem at 86% 8%,rgba(226,196,142,.13),transparent 68%),
    radial-gradient(60rem 40rem at 8% 100%,rgba(0,0,0,.26),transparent 70%),
    linear-gradient(180deg,var(--ap-nuit2) 0,var(--ap-nuit) 62%)}
.apropos-page .ap-maniere::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ap-grain);background-size:240px;opacity:.2;mix-blend-mode:overlay}
.apropos-page .ap-maniere .ap-ombre{right:-5rem;top:-6.5rem;width:min(36rem,42vw);opacity:.42;transform:scaleX(-1) rotate(14deg)}
.apropos-page .ap-maniere .eyebrow{color:var(--ap-cuivre-clair)}
.apropos-page .ap-maniere .eyebrow::before{background:var(--ap-cuivre-clair)}
.apropos-page .entry .ap-maniere h2{color:#F4EEE3;font-size:clamp(2.1rem,3.5vw,3.2rem);line-height:1.14;max-width:none}
.apropos-page .entry .ap-maniere__intro{margin-top:var(--air-titre);max-width:39rem;color:rgba(237,230,216,.82);font-size:1.08rem;line-height:1.75}

/* Trois fragments, pas trois cartes : un numero fin, un filet qui
   s'allonge, un titre, deux lignes. Ils descendent d'un cran l'un
   apres l'autre. */
.apropos-page .ap-principes{list-style:none;margin:clamp(3.5rem,6vw,5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.75rem)}
.apropos-page .entry .ap-principes li + li{margin-top:0}
.apropos-page .ap-principe{position:relative;padding-top:.2rem}
.apropos-page .entry .ap-principes .ap-principe:nth-child(2){margin-top:1.75rem}
.apropos-page .entry .ap-principes .ap-principe:nth-child(3){margin-top:3.5rem}
.apropos-page .ap-principe + .ap-principe::before{content:"";position:absolute;left:calc(clamp(2rem,4vw,3.75rem) / -2);top:.6rem;bottom:.2rem;width:1px;
  background:linear-gradient(180deg,rgba(212,164,106,.32),rgba(212,164,106,.04))}
.apropos-page .ap-principe__no{display:flex;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--ap-cuivre-clair)}
.apropos-page .ap-principe__no::after{content:"";flex:1;height:1px;max-width:11rem;background:rgba(212,164,106,.5);
  transform-origin:left;transition:transform .9s var(--ease) .15s,background .5s}
.apropos-page .entry .ap-principe h3{margin-top:1.6rem;color:#F4EEE3;font-size:clamp(1.5rem,1.95vw,1.76rem);line-height:1.2;max-width:none;text-wrap:initial}
.apropos-page .entry .ap-principe p{margin-top:1rem;color:rgba(240,234,222,.9);font-size:1.08rem;line-height:1.7;max-width:23rem}
.apropos-page .ap-principe h3{transition:color var(--ap-lent)}
.apropos-page .ap-principe:hover .ap-principe__no::after{background:var(--ap-cuivre-clair);transform:scaleX(1.12)}
.apropos-page .entry .ap-principe:hover h3{color:#FFF8EC}
/* Le filet s'allonge a l'arrivee de la liste. */
:where(.js-animations-ready) .apropos-page .ap-principes.rv-pending:not(.in) .ap-principe__no::after{transform:scaleX(0)}

/* ============================================================
   4. LE FIL DU PARCOURS — Reperes
   ============================================================
   Un seul trait fin, legerement ondule, vient du bord de la page,
   passe par les cinq etapes et continue en pointille apres
   aujourd'hui. L'etape est ecrite en grand ; la date est une
   annotation a la main, au-dessus du fil.

   Le trait est un SVG etire horizontalement (preserveAspectRatio
   none, trait non deforme). Les colonnes et leurs gouttieres sont
   en pourcentages : les points tombent aux abscisses 0, 205, 400,
   625 et 820 du viewBox, ou le trace repasse exactement sur la
   ligne de base (y = 64). */
.apropos-page .ap-reperes{padding-block:var(--ap-section) clamp(4rem,6vw,5.5rem);
  background:
    radial-gradient(50rem 26rem at 70% 0,rgba(255,255,255,.55),transparent 70%),
    var(--ap-papier)}
.apropos-page .ap-reperes__tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 4rem}
.apropos-page .ap-reperes__tete .ap-note{font-size:1.35rem;color:var(--ap-olive-texte);transform:rotate(-2deg);margin-bottom:.35rem}

.apropos-page .ap-fil{position:relative;margin-top:clamp(3rem,5vw,4.25rem)}
.apropos-page .ap-fil__trait{position:absolute;left:0;top:0;width:100%;height:128px;overflow:visible;pointer-events:none;
  transition:clip-path 1.9s cubic-bezier(.45,.05,.2,1)}
.apropos-page .ap-fil__trait path{fill:none;stroke:var(--ap-cuivre);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.apropos-page .ap-fil__trait .ap-fil__suite{stroke:var(--ap-olive);stroke-dasharray:2 7;opacity:.9}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending:not(.in) .ap-fil__trait{clip-path:inset(0 100% 0 -60vw)}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-fil__trait{clip-path:inset(0 -20vw 0 -60vw)}

.apropos-page .ap-etapes{position:relative;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:19% 18% 21% 18% 18%;column-gap:1.5%;
  grid-template-rows:auto;align-items:start}
.apropos-page .entry .ap-etapes li + li{margin-top:0}
.apropos-page .ap-etape{position:relative;display:grid;grid-template-rows:52px 24px auto auto;
  grid-template-areas:"date" "point" "titre" "texte"}
/* Le point : pose sur la ligne de base du trait (52 + 12 = 64 px). */
.apropos-page .ap-etape::before{content:"";grid-area:point;align-self:center;justify-self:start;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--ap-cuivre);box-shadow:0 0 0 4px var(--ap-papier);
  transition:transform var(--ap-lent),background var(--ap-lent),box-shadow var(--ap-lent)}
.apropos-page .ap-etape--aujourdhui::before{background:var(--ap-papier);border:1.5px solid var(--ap-cuivre);
  box-shadow:0 0 0 4px var(--ap-papier),inset 0 0 0 2.5px var(--ap-papier),inset 0 0 0 6px var(--ap-cuivre)}
.apropos-page .entry .ap-etape__date{grid-area:date;align-self:end;margin:0 0 .15rem -.1rem;
  font-family:var(--ap-main);font-size:1.6rem;line-height:1;color:var(--ap-cuivre-encre);transform:rotate(-4deg);transform-origin:left bottom;
  white-space:nowrap}
.apropos-page .entry .ap-etape__titre{grid-area:titre;margin-top:1.1rem;padding-right:.75rem;font-size:clamp(1.36rem,1.72vw,1.6rem);font-weight:500;line-height:1.16;
  transition:color var(--ap-lent)}
.apropos-page .entry .ap-etape__texte{grid-area:texte;margin-top:.7rem;padding-right:1rem;font-size:1.1rem;line-height:1.56;color:#3F3832}
.apropos-page .ap-etape:hover::before{transform:scale(1.45);box-shadow:0 0 0 4px var(--ap-papier),0 0 0 9px rgba(184,134,78,.14)}
.apropos-page .ap-etape--aujourdhui:hover::before{transform:scale(1.25)}
.apropos-page .entry .ap-etape:hover .ap-etape__titre{color:var(--ap-cuivre-fonce)}
/* Les points apparaissent l'un apres l'autre, a mesure que le trait passe. */
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending:not(.in) .ap-etape::before{transform:scale(0)}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape::before{transition:transform .5s var(--ease),background var(--ap-lent),box-shadow var(--ap-lent)}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape:nth-child(1)::before{transition-delay:.35s}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape:nth-child(2)::before{transition-delay:.62s}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape:nth-child(3)::before{transition-delay:.9s}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape:nth-child(4)::before{transition-delay:1.2s}
:where(.js-animations-ready) .apropos-page .ap-fil.rv-pending.in .ap-etape:nth-child(5)::before{transition-delay:1.46s}
.apropos-page .ap-fil.in .ap-etape:hover::before{transition-delay:0s}

/* Les formations : une liste secondaire, repliee. */
.apropos-page .ap-formations{margin-top:clamp(3rem,5vw,4rem);border-top:1px solid var(--ap-trait);border-bottom:1px solid var(--ap-trait)}
.apropos-page .ap-formations summary{display:flex;align-items:center;gap:1rem;padding:1.15rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:.98rem;font-weight:500;letter-spacing:.02em;color:var(--ap-encre)}
.apropos-page .ap-formations summary::-webkit-details-marker{display:none}
.apropos-page .ap-formations summary::marker{content:""}
.apropos-page .ap-formations__signe{position:relative;flex:none;width:1.9rem;height:1.9rem;margin-left:auto;border:1px solid var(--ap-trait);border-radius:50%;
  transition:border-color var(--ap-lent),transform var(--ap-lent)}
.apropos-page .ap-formations__signe::before,.apropos-page .ap-formations__signe::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1px;
  margin:-.5px 0 0 -.35rem;background:var(--ap-cuivre-fonce);transition:transform var(--ap-lent)}
.apropos-page .ap-formations__signe::after{transform:rotate(90deg)}
.apropos-page .ap-formations[open] .ap-formations__signe::after{transform:rotate(0)}
.apropos-page .ap-formations summary:hover .ap-formations__signe,
.apropos-page .ap-formations summary:focus-visible .ap-formations__signe{border-color:var(--ap-cuivre)}
.apropos-page .ap-formations summary:hover .ap-formations__libelle{color:var(--ap-cuivre-fonce)}
.apropos-page .ap-formations summary:focus-visible{outline:2px solid var(--ap-cuivre);outline-offset:3px;border-radius:2px}
.apropos-page .ap-formations__libelle{transition:color var(--ap-lent)}
.apropos-page .ap-formations__compte{font-family:var(--ap-main);font-size:1.2rem;font-weight:400;letter-spacing:0;color:var(--ap-olive-texte)}
.apropos-page .entry .ap-formations__liste{list-style:none;margin:0;padding:.35rem .25rem 2rem;columns:2;column-gap:4rem}
.apropos-page .entry .ap-formations__liste li{break-inside:avoid;position:relative;margin:0;padding:.45rem 0 .45rem 1.35rem;
  font-size:1rem;line-height:1.5;color:var(--ap-encre2)}
.apropos-page .ap-formations__liste li::before{content:"";position:absolute;left:0;top:1.05rem;width:.6rem;height:1px;background:var(--ap-cuivre)}
.apropos-page .ap-formations[open] .ap-formations__liste{animation:ap-deplie .5s var(--ease)}
@keyframes ap-deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   5. TRANSMETTRE
   ============================================================
   Deux entrees qui ne se ressemblent pas : le livre est un objet
   pose sur un panneau de papier, qui deborde par le haut ;
   l'atelier est une photographie, plus basse, son texte dessous. */
.apropos-page .ap-transmettre{padding-block:var(--ap-section) clamp(4.5rem,7vw,6.5rem);background:var(--ap-ivoire)}
.apropos-page .ap-transmettre__tete{display:grid;grid-template-columns:minmax(0,61fr) minmax(0,39fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:end}
.apropos-page .entry .ap-transmettre__tete h2{font-size:clamp(2.2rem,3.45vw,3.1rem)}
.apropos-page .ap-transmettre__tete h2{max-width:none}
.apropos-page .entry .ap-transmettre__intro{max-width:30rem;font-size:1.08rem;line-height:1.75;padding-bottom:.4rem}

.apropos-page .ap-entrees{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.5rem,2.6vw,2.75rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);align-items:start}
.apropos-page .ap-entree{position:relative}
.apropos-page .ap-entree__surtitre{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.apropos-page .entry .ap-entree h3{margin-top:.85rem;font-size:clamp(1.85rem,2.5vw,2.3rem);line-height:1.12}
.apropos-page .entry .ap-entree p.ap-entree__texte{margin-top:.9rem;font-size:1.08rem;line-height:1.68;max-width:25rem}
.apropos-page .ap-entree .ap-lien{margin-top:1.5rem}
/* Toute l'entree mene a sa page ; une seule tabulation, sur le lien. */
.apropos-page .entry .ap-entree a.ap-lien::after{content:"";position:absolute;inset:0;z-index:3}

/* Le livre : un objet pose sur une feuille de papier plus chaude,
   elle-meme posee de biais sur la page. Le texte reste sur l'ivoire. */
.apropos-page .ap-entree--livre{grid-column:1 / span 7;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  column-gap:clamp(2.25rem,4vw,3.75rem);align-items:center}
.apropos-page .ap-entree--livre .ap-entree__surtitre{color:var(--ap-cuivre-fonce)}
.apropos-page .entry .ap-livre{position:relative;margin:0;padding:2.7rem 2.1rem 2.5rem 1.9rem}
.apropos-page .ap-livre::before{content:"";position:absolute;inset:0;z-index:0;border-radius:1px;transform:rotate(2deg);
  background:var(--ap-grain-doux),linear-gradient(160deg,#F4EDE2 0,#EEE4D5 100%);background-size:240px,auto;
  box-shadow:0 1px 1px rgba(42,34,24,.06),0 18px 34px -26px rgba(42,34,24,.34)}
.apropos-page .ap-livre picture{position:relative;z-index:1;display:block;transform:rotate(-3deg);transition:transform .7s var(--ease)}
.apropos-page .ap-livre img{display:block;width:100%;height:auto;border-radius:1px 3px 3px 1px;
  box-shadow:1px 1px 0 #f6f1e8,2px 2px 0 #ddd3c4,3px 3px 0 #f3ede3,4px 4px 0 #d2c7b6,
    10px 14px 12px -6px rgba(42,34,24,.28),22px 36px 44px -20px rgba(42,34,24,.4)}
.apropos-page .ap-entree--livre:hover .ap-livre picture{transform:rotate(-1.6deg) translateY(-4px)}

/* L'atelier : plus etroit, plus bas, sans panneau. */
.apropos-page .ap-entree--ateliers{grid-column:8 / span 5;margin-top:clamp(1.5rem,2.5vw,2.25rem)}
.apropos-page .ap-entree--ateliers .ap-entree__surtitre{color:var(--ap-cuivre-fonce)}
.apropos-page .entry .ap-entree--ateliers h3{font-weight:500;font-size:clamp(1.95rem,2.65vw,2.45rem)}
.apropos-page .ap-atelier{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 20px 40px -28px rgba(42,34,24,.5)}
.apropos-page .ap-atelier img{display:block;width:100%;aspect-ratio:4 / 3.35;object-fit:cover;object-position:40% 62%;transition:transform 1.1s var(--ease)}
.apropos-page .ap-entree--ateliers:hover .ap-atelier img{transform:scale(1.035)}
.apropos-page .ap-entree--ateliers .ap-entree__corps{padding:1.5rem 0 0 .25rem}

/* ============================================================
   6. LA RENCONTRE
   ============================================================ */
.apropos-page .ap-rencontre{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(5.5rem,9vw,8.5rem);
  background:
    radial-gradient(40rem 22rem at 50% 45%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(180deg,#F4EEE4 0,var(--ap-sable) 100%)}
.apropos-page .ap-rencontre .ap-ombre{left:-6rem;top:-5rem;width:min(34rem,40vw);opacity:.26;transform:rotate(-24deg) scaleY(-1)}
.apropos-page .ap-rencontre__corps{position:relative;z-index:2;max-width:58rem;margin-inline:auto}
.apropos-page .entry .ap-rencontre h2{font-size:clamp(1.75rem,2.5vw,2.25rem);line-height:1.28;letter-spacing:-.006em;max-width:none}
.apropos-page .entry .ap-rencontre a.ap-lien{background-position:50% 100%}
.apropos-page .ap-rencontre__actions{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-top:2.75rem}
.apropos-page .entry .ap-rencontre__actions .btn{min-width:13rem}

/* ============================================================
   APPARITIONS — le langage commun du site (.rv) suffit ; la page
   n'ajoute que ses filets. Sans .js-animations-ready, tout est deja en place.
   ============================================================ */

/* ============================================================
   TABLETTE
   ============================================================ */
@media (max-width:1100px){
  .apropos-page .ap-hero__texte{max-width:min(27rem,calc(50vw - 3.5rem))}
  .apropos-page .ap-hero__photo{width:46%}
  .apropos-page .ap-recit__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem}
  /* sans debord ni gouttiere reservee : la date passe au-dessus du texte */
  .apropos-page .entry .ap-recit__image{margin:0}
  .apropos-page .entry .ap-recit__image figcaption{margin:1.4rem 0 0 3rem}
  .apropos-page .ap-marge{right:auto;left:0;top:-2.9rem;font-size:1.8rem}
  .apropos-page .entry .ap-recit__corps p:first-child{margin-top:2.6rem}
  .apropos-page .ap-entree--livre{grid-column:1 / span 7}
  .apropos-page .ap-entree--ateliers{grid-column:8 / span 5;padding-left:0;margin-top:clamp(2.5rem,5vw,4rem)}
}

@media (max-width:1023px) and (min-width:768px){
  .apropos-page .entry .ap-etape__texte{font-size:1.04rem}
  .apropos-page .entry .ap-hero__phrase{font-size:1.36rem}
  .apropos-page .entry .ap-hero__suite{font-size:.96rem}
  .apropos-page .entry .ap-hero__note{font-size:1.22rem}
}

@media (max-width:960px){
  .apropos-page .ap-principes{grid-template-columns:minmax(0,1fr);row-gap:2.75rem;max-width:34rem}
  .apropos-page .entry .ap-principes .ap-principe:nth-child(2),.apropos-page .entry .ap-principes .ap-principe:nth-child(3){margin-top:0}
  .apropos-page .entry .ap-principes .ap-principe:nth-child(2){margin-left:clamp(1.5rem,6vw,3.5rem)}
  .apropos-page .entry .ap-principes .ap-principe:nth-child(3){margin-left:clamp(3rem,12vw,7rem)}
  .apropos-page .ap-principe + .ap-principe::before{display:none}
  .apropos-page .ap-entrees{grid-template-columns:minmax(0,1fr);row-gap:4.5rem}
  .apropos-page .ap-entree--livre{grid-column:auto;margin-top:2rem;max-width:40rem}
  .apropos-page .ap-entree--ateliers{grid-column:auto;margin-top:0;max-width:30rem;margin-left:auto;width:100%}
  .apropos-page .ap-transmettre__tete{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}
}

/* Le fil devient vertical : un trait ondule a gauche, les etapes
   les unes sous les autres, la date au-dessus de son titre. */
@media (max-width:860px){
  .apropos-page .ap-fil__trait{display:none}
  .apropos-page .ap-etapes{grid-template-columns:minmax(0,1fr);row-gap:2.25rem;padding-left:2.4rem;max-width:34rem}
  .apropos-page .ap-etapes::before{content:"";position:absolute;left:0;top:.9rem;bottom:1.5rem;width:12px;margin-left:-6px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 160'%3E%3Cpath d='M6 0C9.5 40 2.5 80 6 120S9.5 150 6 160' fill='none' stroke='%23B8864E' stroke-width='1.2' opacity='.8'/%3E%3C/svg%3E") top center/12px 160px repeat-y}
  .apropos-page .ap-etapes::after{content:"";position:absolute;left:0;bottom:-.5rem;height:2rem;width:1px;
    background:repeating-linear-gradient(180deg,var(--ap-olive) 0 2px,transparent 2px 8px)}
  .apropos-page .ap-etape{grid-template-rows:auto auto auto;grid-template-areas:"date" "titre" "texte"}
  .apropos-page .ap-etape::before{position:absolute;left:-2.4rem;top:1.05rem}
  .apropos-page .ap-etape--aujourdhui::before{top:.35rem}
  .apropos-page .entry .ap-etape__date{align-self:start;margin:0 0 .1rem;font-size:1.55rem}
  .apropos-page .entry .ap-etape__titre{margin-top:.35rem}
  .apropos-page .entry .ap-etape__texte{margin-top:.45rem;max-width:26rem}
  .apropos-page .entry .ap-formations__liste{columns:1}
}

/* ============================================================
   TELEPHONE — la lisibilite d'abord
   ============================================================ */
@media (max-width:767px){
  .apropos-page{--ap-section:4.5rem}
  /* Le bandeau : le texte, puis la photographie, qui sort du papier
     par le haut. */
  .apropos-page .ap-hero{display:block;min-height:0;padding-top:calc(var(--ap-entete) + 2.25rem)}
  .apropos-page .ap-hero__texte{max-width:none;padding-block:0 2.25rem}
  .apropos-page .ap-hero__titre{font-size:clamp(3.1rem,15vw,4.2rem)}
  .apropos-page .entry .ap-hero__phrase{font-size:1.38rem}
  .apropos-page .ap-hero__photo{position:relative;top:auto;width:100%;height:auto;aspect-ratio:4 / 4.6;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 9%,#000 20%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 9%,#000 20%);-webkit-mask-composite:source-over;mask-composite:add}
  .apropos-page .ap-hero__photo img{object-position:60% 40%}
  .apropos-page .ap-hero .ap-ombre{left:auto;right:-9rem;top:4rem;bottom:auto;width:22rem;opacity:.13;transform:rotate(160deg)}

  .apropos-page .ap-recit{padding-top:3.75rem}
  .apropos-page .ap-recit__grille{grid-template-columns:minmax(0,1fr)}
  .apropos-page .entry .ap-recit__image{margin:0 -.25rem}
  .apropos-page .ap-recit__image img{aspect-ratio:4 / 3.3}
  .apropos-page .entry .ap-recit__image figcaption{margin-top:1.1rem}
  .apropos-page .ap-recit__texte{padding-top:2.75rem}
  .apropos-page .ap-recit__texte h2{max-width:none}

  .apropos-page .ap-maniere .ap-ombre{width:20rem;right:-7rem;top:-4rem;opacity:.4}
  .apropos-page .entry .ap-principes .ap-principe:nth-child(2),.apropos-page .entry .ap-principes .ap-principe:nth-child(3){margin-left:0}

  .apropos-page .ap-reperes__tete .ap-note{display:none}

  .apropos-page .ap-entree--livre{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}
  .apropos-page .entry .ap-livre{width:min(15rem,70%);padding:1.9rem 1.7rem 1.8rem 1.5rem}
  .apropos-page .ap-entree--ateliers{max-width:none}
  .apropos-page .ap-entree--ateliers .ap-entree__corps{padding:1.5rem 0 0 .75rem}
  .apropos-page .ap-rencontre .ap-ombre{width:20rem;left:-7rem;top:-4rem}
  .apropos-page .entry .ap-rencontre h2{font-size:1.6rem}
}