/* =====================================================================
   paulinemarius.com · feuille unique des trois pages
   Refonte du 13 octobre 2026, carte FR-48 : la nouvelle offre de missions
   freelance. Le CSS se modifie ici, et nulle part ailleurs.

   D'OU VIENT LE DESSIN
   · La grille, la structure, le design et les animations reprennent
     anri.framer.website : la ligne centrale et son point qui suit la
     lecture, le nom en très grand calé contre la ligne, la carte portrait,
     les points numérotés de l'expérience, le contact en bloc sombre.
   · Le menu et les boutons d'appel noirs reprennent ninapark.framer.website,
     comme la section Services, qui remplace la section Works d'Anri.
   · Rien n'est copié : ni code, ni image, ni texte. Tout est réécrit.

   LE SYSTEME, DECISION DE PAULINE DU 13 OCTOBRE 2026
   · Trois polices, toutes sous licence libre SIL OFL 1.1 :
     Mona Sans pour presque tout, Work Sans pour le bloc contact,
     Geist Mono pour le menu, les boutons et les étiquettes.
   · Deux accents, comme le rouge d'Anri : le bordeaux sur fond clair,
     le lilas sur fond sombre. Le bordeaux ne va jamais sur le sombre.

   Les polices sont servies par le site (fonts/) depuis le 14 octobre
   2026 : aucune adresse IP de visiteur ne part chez un tiers, comme
   l'affirme la page Informations.
   ===================================================================== */

@font-face{font-family:"Mona Sans";font-style:normal;font-display:optional;font-weight:200 900;
  src:url(fonts/mona-sans-latin-wght-normal.woff2) format("woff2-variations");
  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}
@font-face{font-family:"Mona Sans";font-style:normal;font-display:optional;font-weight:200 900;
  src:url(fonts/mona-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* La police de secours de Mona Sans, réglée sur ses mesures : le temps
   que Mona Sans arrive, le nom s'affiche en Arial à la même largeur et à la
   même hauteur, donc rien ne bouge quand elle la remplace. Sans elle, le
   nom de 100 px changeait de largeur au chargement et Google mesurait un
   décalage de 0,283 sur ordinateur, 14 octobre 2026. */
/* font-display:optional sur les quatre polices : jamais de changement de
   police une fois la page affichée, donc aucun décalage au chargement. Si
   une police arrive en retard, la police de secours reste pour la page, et
   la vraie police sert dès la page suivante. Décision du 14 octobre 2026,
   après des décalages de 0,106 puis 0,263 mesurés par PageSpeed. */
@font-face{font-family:"Mona Sans repli";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");
  size-adjust:104.5%;ascent-override:104.3%;descent-override:30.6%;line-gap-override:0%}
@font-face{font-family:"Work Sans";font-style:normal;font-display:optional;font-weight:100 900;
  src:url(fonts/work-sans-latin-wght-normal.woff2) format("woff2-variations");
  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}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:optional;font-weight:100 900;
  src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations");
  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}

/* ---------- les jetons ---------- */
:root{
  color-scheme:light;

  /* Les neutres d'Anri, relevés sur son site le 14 octobre 2026 à la
     demande de Pauline : blanc, noir, gris, noir du pied de page. */

  /* Fonds */
  --blanc:#FFFFFF;
  --gris-clair:#F4F4F4;        /* le fond des étiquettes et des encarts */
  --nuit:#1F1D1F;              /* le noir d'Anri : le contact, les boutons */

  /* Textes */
  --encre:#000000;             /* le texte d'Anri, sur blanc : 21:1 */
  --encre-2:#454545;           /* le gris foncé d'Anri, celui de sa vague */
  --gris:#696969;              /* le gris d'Anri, sur blanc : 5,5:1 */
  --sur-nuit:#EAEAEA;          /* le clair d'Anri, sur son noir : 13,9:1 */
  --sur-nuit-2:#A6A6A6;        /* secondaire sur le noir : 7,4:1 */

  /* Les deux accents */
  --bordeaux:#5E0B2E;          /* sur blanc : 13,4:1. Jamais sur l'anthracite */
  --bordeaux-2:#7A1440;
  --lilas:#D6C8DF;             /* sur le noir : 10,5:1. Jamais en texte sur blanc */

  /* Filets */
  --filet:#EAEAEA;             /* les filets et bordures d'Anri */
  --filet-fort:rgba(0,0,0,.2);
  --filet-nuit:rgba(234,234,234,.3);   /* les filets du pied, aussi clairs que chez Anri */

  /* Polices */
  --mona:"Mona Sans","Mona Sans repli","Helvetica Neue",Arial,sans-serif;
  --work:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Echelle, relevée sur Anri à 1440 px et rendue fluide */
  /* Le nom, par paliers comme chez Anri, relevé le 14 octobre 2026 :
     100 px dès 1200 px de large, 80 px en dessous. Il grandissait avec
     l'écran et ne faisait que 83 à 99 px entre 1200 et 1440. */
  --fs-nom:100px;
  --fs-titre:clamp(36px,4.17vw,60px);  /* « Expérience » : 60 px à 1440, comme chez Anri */
  --fs-lead:20px;
  --fs-point:18px;
  --fs-corps:16px;
  --fs-mono:12px;

  /* Grille */
  --marge:60px;
  --nav-h:56px;

  /* Mouvement */
  --doux:cubic-bezier(.22,1,.36,1);
  --duree:1.1s;
}

*,*::before,*::after{box-sizing:border-box}
/* Pas de carré sombre sous le doigt quand on touche un bouton ou un lien,
   sur iPhone : constat de Pauline du 14 octobre 2026 sur « Menu ». */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--mona);font-size:var(--fs-corps);line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
::selection{background:var(--lilas);color:var(--encre)}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.accent{color:var(--bordeaux)}

/* =====================================================================
   LE MENU, D'APRES NINA
   Une barre fine en Geist Mono capitales : le nom à gauche, les liens et
   le bouton noir à droite. Au doigt, « Menu » ouvre un panneau plein écran.
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 20px;font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.02em;text-transform:uppercase;color:var(--gris);
  transition:color .4s var(--doux),background-color .4s var(--doux);
}
.nav.est-defile{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Le filet central traverse la barre jusqu'en haut de l'écran, tant qu'il
   passe dessous : le fond de la barre le cachait. Le script pose la classe. */
.nav::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--filet);opacity:0;pointer-events:none}
.nav.avec-ligne::after{opacity:1}
.nav__nom{color:var(--encre);white-space:nowrap}
.nav__liens{display:flex;align-items:center;gap:24px}
.nav__liens a{position:relative;transition:color .25s}
.nav__liens a:hover,.nav__liens a[aria-current="true"]{color:var(--encre)}
.nav__liens a[aria-current="true"]::before{
  content:"";position:absolute;left:-10px;top:50%;width:5px;height:5px;margin-top:-3px;
  border-radius:50%;background:var(--bordeaux)}
.nav__menu{display:none;color:var(--encre);height:44px;text-transform:uppercase;letter-spacing:.02em}

/* Sur le bloc sombre, la barre passe en clair */
.nav.sur-nuit{color:var(--sur-nuit-2)}
.nav.sur-nuit.est-defile{background:rgba(31,29,31,.86)}
.nav.sur-nuit .nav__nom,.nav.sur-nuit .nav__menu,
.nav.sur-nuit .nav__liens a:hover,.nav.sur-nuit .nav__liens a[aria-current="true"]{color:var(--sur-nuit)}
.nav.sur-nuit .nav__liens a[aria-current="true"]::before{background:var(--lilas)}
.nav.sur-nuit .cta{background:var(--sur-nuit);color:var(--nuit)}
/* Au survol sur le pied, les couleurs s'inversent sur un fond anthracite,
   le gris foncé d'Anri, pour que le bouton reste visible sur la barre. La
   règle des liens de la barre est plus forte : il faut la viser par
   .nav__liens. */
.nav.sur-nuit .nav__liens .cta:hover{background:var(--encre-2);color:var(--sur-nuit)}
.nav.sur-nuit .nav__liens .cta:hover .cta__fleche{background:var(--sur-nuit);color:var(--nuit)}
.nav.sur-nuit .cta__fleche{background:var(--nuit);color:var(--sur-nuit)}

/* =====================================================================
   LE BOUTON NOIR, D'APRES NINA
   Rayon de 4 px, capitales en Geist Mono, une vignette claire de 18 px
   qui porte la flèche. Au survol, la flèche part en haut à droite et une
   autre arrive d'en bas à gauche.
   ===================================================================== */
.cta{
  display:inline-flex;align-items:center;gap:10px;height:30px;
  padding:0 6px 0 10px;border-radius:4px;background:var(--nuit);color:#FFFFFF;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;
  transition:background-color .3s var(--doux);
}
/* Au survol, tout s'inverse : le fond passe au gris #E4E4E4, le texte au foncé,
   la vignette au foncé avec une flèche blanche. Pas de contour. Le fond était
   lilas le 13 octobre 2026, il passe au gris le 14, décisions de Pauline. */
.cta{transition:background-color .3s var(--doux),color .3s var(--doux)}
.cta:hover{background:#E4E4E4;color:var(--nuit)}
.cta:hover .cta__fleche{background:var(--nuit);color:#FFFFFF}
.cta__fleche{
  position:relative;width:18px;height:18px;border-radius:2px;overflow:hidden;
  background:#FFFFFF;color:var(--nuit);flex:0 0 auto;
  transition:background-color .3s var(--doux),color .3s var(--doux);
}
.cta__fleche svg{position:absolute;inset:0;margin:auto;width:9px;height:9px;transition:transform .45s var(--doux)}
.cta__fleche svg + svg{transform:translate(-18px,18px)}
.cta:hover .cta__fleche svg:first-child{transform:translate(18px,-18px)}
.cta:hover .cta__fleche svg + svg{transform:translate(0,0)}
.cta--grand{height:36px;padding:0 8px 0 14px;gap:14px}
/* Le bouton de réservation dans la page, au doigt seulement */
.cta--doigt{display:none}
.cta--grand .cta__fleche{width:22px;height:22px}

/* =====================================================================
   LE PANNEAU DU MENU AU DOIGT, D'APRES NINA
   ===================================================================== */
/* Le panneau ne couvre pas tout l'écran : il s'arrête sous le bouton, et
   la page se devine dessous, voilée. Toucher le voile referme. */
.panneau{
  position:fixed;top:0;left:0;right:0;z-index:45;background:var(--blanc);max-height:86svh;overflow-y:auto;
  padding:calc(var(--nav-h) + 72px) 20px 72px;display:flex;flex-direction:column;gap:32px;
  border-bottom:1px solid var(--filet);box-shadow:0 24px 48px -24px rgba(31,29,31,.35);
  visibility:hidden;transform:translateY(-100%);will-change:transform;
  transition:transform .55s var(--doux),visibility 0s linear .55s;
}
.panneau.ouvert{visibility:visible;transform:none;transition-delay:0s}
/* Le panneau descend comme un rideau sous la barre, puis son contenu
   apparaît, légèrement décalé ; à la fermeture, le contenu s'efface
   d'abord. Le contenu est descendu de 48 px dans le panneau, à hauteur
   égale. Demande de Pauline du 14 octobre 2026. */
.panneau > *{opacity:0;transform:translateY(-10px);transition:opacity .25s var(--doux),transform .25s var(--doux)}
.panneau.ouvert > *{opacity:1;transform:none;transition-duration:.5s;transition-delay:.2s}
.panneau.ouvert > :nth-child(2){transition-delay:.26s}
.panneau.ouvert > :nth-child(3){transition-delay:.32s}
.panneau__liens{display:flex;flex-direction:column;gap:6px}
.panneau__liens a{font-size:44px;line-height:1.1;letter-spacing:-.03em;font-weight:450}
.panneau__reseaux{display:flex;flex-direction:column;gap:12px;font-size:22px;letter-spacing:-.01em}
.panneau__reseaux a{display:inline-flex;align-items:center;gap:10px}
.panneau__fleche{width:18px;height:18px;padding:4.5px;border-radius:2px;background:var(--nuit);color:#FFFFFF}
.voile{position:fixed;inset:0;z-index:44;background:rgba(31,29,31,.32);opacity:0;visibility:hidden;
  transition:opacity .45s var(--doux),visibility 0s linear .45s}
.voile.ouvert{opacity:1;visibility:visible;transition-delay:0s}
body.menu-ouvert{overflow:hidden}
/* Panneau plus long (72 px sous le bouton, contenu descendu d'autant), et pas
   de ligne dans la barre quand il est ouvert, demande de Pauline du
   14 octobre 2026, sur les trois pages. */
body.menu-ouvert .nav::after{opacity:0}

/* =====================================================================
   LA LIGNE CENTRALE, D'APRES ANRI
   Un filet vertical au milieu de la page, du haut jusqu'à la fin de
   l'expérience. Un point bordeaux y reste au milieu de l'écran et suit
   la lecture : il est collant dans le filet, sans une ligne de script.
   ===================================================================== */
.fil{position:relative}
/* Le filet n'a pas de z-index : il ne forme pas de calque à lui. Les années
   des repères (z-index 4) le coupent, et le point de lecture (z-index 6)
   passe au-dessus des années. */
/* La ligne se dessine au fil de la lecture, comme chez Anri : tracée
   jusqu'au point, rien en dessous. Le script tient --trace à jour ; sans
   script, elle est entière. */
.fil__ligne{position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(var(--filet),var(--filet)) top / 1px var(--trace,100%) no-repeat;pointer-events:none}
/* Les filets se déroulent depuis la ligne quand le point les atteint,
   entièrement tracés un bon tiers d'écran plus bas, relevé sur Anri le
   14 octobre 2026. --t va de 0 à 1 ; sans script, ils sont entiers. */
.js [data-trace]{--t:0}
.js .fil__ligne,.js .services__ligne{--trace:0px}
/* À l'arrivée, le point attend en haut de l'écran : le script le fait
   descendre avec sa ligne. */
.js .fil__point,.js .fil__trait{transform:translateY(-50vh)}
/* Le trait qui relie la ligne au point. Le point est collé au milieu de
   l'écran par le navigateur, la ligne redessinée par le script une image
   plus tard : au défilement rapide, sur iPhone surtout, un vide s'ouvrait
   entre eux, constat de Pauline du 14 octobre 2026. Ce trait est collé de
   la même façon, son bas sur le point : il descend avec lui sans retard.
   Il part d'un écran au-dessus de sa ligne et reste dans elle. Les années
   le coupent, comme la ligne. */
.fil__trait{display:block;position:sticky;top:-50vh;width:1px;height:100vh;margin-top:-100vh;background:var(--filet)}
/* La ligne des Services ne montre son trait qu'entre son haut et le point */
.services__ligne{clip-path:inset(0)}
/* La piste du point descend d'un demi-point sous le filet : en fin de
   course, le centre du point se pose sur le croisement avec le filet
   horizontal. Le script l'efface ensuite à mesure qu'on descend. */
.fil__piste{position:absolute;top:0;bottom:-5px;left:0;width:1px;z-index:6}
/* 10 px, un peu plus petit que les repères comme chez Anri, avec un petit
   noyau d'un bordeaux plus clair, discret. */
.fil__point{
  display:block;position:sticky;top:calc(50vh - 5px);width:10px;height:10px;margin-left:-4.5px;
  border-radius:50%;background:radial-gradient(circle,#8C3A5E 0 1.5px,var(--bordeaux) 2px);
}

/* =====================================================================
   LE HAUT DE PAGE, D'APRES ANRI
   ===================================================================== */
.hero{
  position:relative;min-height:max(100svh,760px);
  display:grid;grid-template-columns:1fr 1fr;
  padding:calc(var(--nav-h) + 60px) var(--marge) 184px;
}
/* L'horloge, « Paris 09:35 PM — GMT+2 », format demandé par Pauline le
   13 octobre 2026. Depuis le 14 octobre, elle quitte la barre pour le vide
   au-dessus du nom : même case que le nom dans la grille, calée en haut,
   donc à la hauteur du haut de la photo. */
.hero__heure{
  grid-column:1;grid-row:1;align-self:start;margin:calc(var(--fs-nom) * .07) 0 0;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.02em;text-transform:uppercase;
  line-height:1.4;color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.hero__heure b{font-weight:400;color:var(--bordeaux)}
/* Le nom, mesuré sur Anri à 1440 px : corps 100 px, interligne 1,4. Le
   premier mot calé à 20 px de la ligne, le second à 14 % du bord gauche.
   Un filet court du bord à la ligne, entre les deux mots. */
.hero__nom{
  grid-column:1;grid-row:1;align-self:end;
  font-size:var(--fs-nom);line-height:1.4;letter-spacing:.03em;font-weight:400;
}
.hero__nom span{display:block}
.hero__nom span:first-child{
  text-align:right;padding-right:20px;margin-left:calc(var(--marge) * -1);
  background:linear-gradient(var(--filet),var(--filet)) right bottom / calc(var(--t,1) * 100%) 1px no-repeat;padding-bottom:.18em;
}
/* « Marius » à 10 % de la largeur (13,9 % jusqu'au 14 octobre 2026),
   décalé vers la gauche à la demande de Pauline */
.hero__nom span:last-child{padding-left:calc(10vw - var(--marge));margin-top:-.18em}
/* La colonne de droite se cale en bas, sur le même niveau que le nom : son
   filet, de la ligne au bord droit, tombe sur le bas du second mot. */
.hero__droite{
  grid-column:2;grid-row:1;align-self:end;padding-left:clamp(32px,10.5vw,140px);padding-bottom:24px;
  margin-right:calc(var(--marge) * -1);margin-bottom:calc(var(--fs-nom) * -.07);background:linear-gradient(var(--filet),var(--filet)) left bottom / calc(var(--t,1) * 100%) 1px no-repeat;
  display:flex;flex-direction:column;gap:20px;
}
.hero__droite > *{max-width:380px}
.carte{
  width:271px;margin:0;padding:10px;border:1px solid var(--filet);background:var(--blanc);
  display:flex;flex-direction:column;gap:10px;
}
.carte__photo{width:100%;aspect-ratio:251/262;overflow:hidden;background:var(--gris-clair)}
.carte__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transform:scale(1.08);transition:transform 1.6s var(--doux)}
.est-pret .carte__photo img{transform:scale(1)}
.carte__etat{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--gris);padding:0 2px 2px}
.carte__etat i{width:8px;height:8px;border-radius:50%;background:var(--bordeaux);position:relative}
.carte__etat i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--bordeaux);
  opacity:0;animation:pulse 2.4s var(--doux) infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.hero__intitule{font-size:var(--fs-lead);line-height:1.2;color:var(--encre)}
.hero__intitule small{display:block;font-size:var(--fs-corps);color:var(--gris);margin-top:6px;line-height:1.45}
.hero__bio{color:var(--gris);line-height:1.45;max-width:380px}
.etiquettes{display:flex;flex-wrap:wrap;gap:10px}
.etiquette{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid var(--filet);color:var(--gris);font-size:15px;
}

/* =====================================================================
   L'EXPERIENCE, D'APRES ANRI
   Deux colonnes de part et d'autre de la ligne. A gauche l'illustration,
   le titre et le récit. A droite les points numérotés, puis le résultat.
   Sur la ligne, un point et une année par bloc.
   ===================================================================== */
.experience{position:relative;padding:256px 0 160px}
/* Le filet sous le titre ouvre le premier bloc : pas de marge sous lui,
   pour que les trois blocs partent tous à 60 px sous leur filet. */
.tete{padding:0 var(--marge);margin-bottom:0}
.tete h2{font-size:var(--fs-titre);line-height:1;letter-spacing:-.02em}
.tete p{margin-top:14px;color:var(--gris)}
.tete hr{margin:40px calc(var(--marge) * -1) 0;border:0;height:1px;background:linear-gradient(var(--filet),var(--filet)) center / calc(var(--t,1) * 100%) 1px no-repeat}

.bloc{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:0 var(--marge);margin-bottom:150px}
.bloc:last-child{margin-bottom:0}
.bloc + .bloc{background:linear-gradient(var(--filet),var(--filet)) center top / calc(var(--t,1) * 100%) 1px no-repeat;padding-top:0}
/* Le repère, comme chez Anri : le point posé sur le filet, sans halo, au
   niveau de la première ligne du #1. Un morceau de filet reste visible
   entre le point et l'année ; seule l'année coupe le filet. Quand le
   point de lecture passe dessus, une auréole s'ouvre puis s'efface. */
.bloc__repere{
  position:absolute;left:50%;top:106px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:15px;
}
.bloc__repere i{position:relative;width:13px;height:13px;border-radius:50%;background:var(--bordeaux)}
/* L'auréole, comme chez Anri : un contour de 1 px dans le gris des filets,
   pas une couleur, qui s'ouvre autour du repère puis s'efface. */
.bloc__repere i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--filet);opacity:0}
/* Deux mouvements continus, menés ensemble, pour qu'il n'y ait plus de
   temps d'arrêt : l'auréole s'ouvre d'un seul trait en ralentissant
   jusqu'à 39 px de diamètre, pendant qu'elle s'efface de plus en plus vite.
   Le découpage en deux étapes, ralenties chacune, la figeait à mi-course.
   Demande de Pauline du 14 octobre 2026. */
.bloc__repere.passe i::after{animation:aureole-ouvre 1.6s cubic-bezier(.25,.6,.35,1),aureole-efface 1.6s cubic-bezier(.45,0,.75,.6)}
@keyframes aureole-ouvre{from{inset:-1px}to{inset:-13px}}
@keyframes aureole-efface{from{opacity:1}to{opacity:0}}
.bloc__repere span{font-size:20px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;background:var(--blanc);padding:4px 0}
.bloc__gauche{padding-right:clamp(40px,7vw,120px);padding-top:110px;max-width:540px}
.bloc__illu{width:196px;height:140px;color:var(--encre);margin-bottom:22px}
.bloc__illu svg{width:100%;height:100%}
.bloc__titre{font-size:var(--fs-lead);line-height:1.2;color:var(--encre)}
.bloc__periode{display:block;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:.04em;color:var(--gris);margin-top:10px}
.bloc__recit{margin-top:16px;color:var(--gris);line-height:1.45;max-width:422px}
.bloc__droite{padding-left:clamp(32px,9vw,130px);padding-top:100px;display:flex;flex-direction:column;gap:26px;max-width:calc(420px + clamp(32px,9vw,130px))}
.point{font-size:var(--fs-point);line-height:1.45;color:var(--gris)}
.point b{font-weight:400;color:var(--encre)}
.point em{font-style:normal;color:var(--bordeaux)}
.point--resultat{margin-top:18px}

/* =====================================================================
   LES SERVICES, SUR LA GRILLE DES WORKS D'ANRI, 14 OCTOBRE 2026
   Le titre seul, un filet du bord gauche jusqu'à la ligne centrale, qui
   reprend dans la section. Puis une carte encadrée par expertise, trois
   depuis le 14 octobre 2026 :
   le numéro en grand dans la moitié gauche, le texte calé en bas de la
   moitié droite, comme les projets d'Anri.
   ===================================================================== */
.services{padding:120px 0 0;background:linear-gradient(var(--filet),var(--filet)) center top / calc(var(--t,1) * 100%) 1px no-repeat}
.services__corps{position:relative;padding:0 var(--marge)}
.services__ligne{position:absolute;left:50%;top:-120px;bottom:0;width:1px;background:linear-gradient(var(--filet),var(--filet)) top / 1px var(--trace,100%) no-repeat;pointer-events:none;z-index:5}
.services__tete{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.services__titre h2{font-size:var(--fs-titre);line-height:1;letter-spacing:-.02em}
/* Le filet sous le titre, du bord gauche à la ligne, comme sous « Works »
   chez Anri. Étendu à tout l'écran puis ramené à gauche le 14 octobre
   2026, quand le compteur est descendu au-dessus des cartes. */
.services__titre hr{margin:40px 0 0 calc(var(--marge) * -1);border:0;height:1px;background:linear-gradient(var(--filet),var(--filet)) right / calc(var(--t,1) * 100%) 1px no-repeat}

.cartes-services{list-style:none;margin:96px 0 0;padding:0;display:flex;flex-direction:column;gap:40px;position:relative}
.carte-service{display:grid;grid-template-columns:1fr 1fr;min-height:320px;border:1px solid var(--filet);border-radius:6px;overflow:hidden;background:var(--blanc)}
.carte-service__num{
  display:flex;align-items:flex-end;padding:28px 32px;background:#F5F1F7;color:var(--bordeaux);
  font-size:clamp(88px,10vw,148px);line-height:.85;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.carte-service__texte{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:28px 28px 30px}
.carte-service__texte h3{font-size:var(--fs-lead);line-height:1.2;color:var(--encre)}
.carte-service__cat{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--gris)}
.carte-service__texte p:last-child{color:var(--gris);line-height:1.45;max-width:440px}

/* La section reste à l'écran pendant que la page défile normalement,
   sans aucun recalage. Au premier tiers de la section le contenu #2
   arrive, au deuxième le #3 (voir plus bas : la carte ne glisse plus
   depuis le 14 octobre 2026, son contenu change).
   L'aimant par recalage de la page, essayé le même jour, se battait avec
   la molette et a été retiré. Au doigt, et pour qui a demandé moins de
   mouvement, les cartes se feuillettent à la main. */
.defile{position:relative;height:calc(100vh + var(--course, 1800px))}
/* Le panneau figé va d'un bord à l'autre de l'écran : sinon il coupait le
   filet sous « Services » à 60 px du bord, constat de Pauline du
   14 octobre 2026. */
.defile__colle{
  position:sticky;top:0;height:100vh;overflow:hidden;margin:0 calc(var(--marge) * -1);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--marge) 0;
}
.defile .services__tete{align-items:end}
/* Le compteur se pose juste au-dessus des cartes, à droite, et les cartes
   commencent 100 px sous le filet comme chez Anri, demande de Pauline du
   14 octobre 2026. */
.defile{--ecart-cartes:100px}
.defile .services__tete{position:relative}
.defile__compteur{
  position:absolute;right:0;top:calc(100% + var(--ecart-cartes) - 12px);transform:translateY(-100%);margin:0;
  justify-self:end;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris);font-variant-numeric:tabular-nums;padding-bottom:4px}
.defile__compteur b{font-weight:400;color:var(--bordeaux)}
/* Les cartes voisines restent cachées dans les marges, le panneau allant
   désormais d'un bord à l'autre */
.defile__fenetre{margin:var(--ecart-cartes) calc(var(--marge) * -1) 0;padding:0 var(--marge);overflow:hidden;clip-path:inset(-2px var(--marge))}
.defile__piste{flex-direction:row;margin:0;gap:40px}
.defile__piste .carte-service{flex:0 0 calc(100vw - var(--marge) * 2)}
/* Sur ordinateur, une seule carte : le cadre et le fond lilas ne bougent
   plus, seuls le numéro et les textes changent aux tiers de la section.
   L'ancien contenu monte et s'efface, le nouveau arrive par le bas ; en
   remontant, l'inverse. Demande de Pauline du 14 octobre 2026, à la place
   du glissement de droite à gauche : plus calme, et plus de contours qui
   clignotent. Les trois cartes sont empilées au même endroit ; seule la
   première porte le cadre et les fonds. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .defile__piste{display:grid}
  .defile__piste .carte-service{grid-area:1 / 1}
  .defile__piste .carte-service:not(:first-child){background:transparent;border-color:transparent}
  .defile__piste .carte-service:not(:first-child) .carte-service__num{background:transparent}
  .defile__piste .carte-service__num span{display:block}
  .defile__piste .carte-service__num span,
  .defile__piste .carte-service__texte{transition:opacity .35s var(--doux),transform .35s var(--doux)}
  .defile__piste .carte-service:not(.est-active){pointer-events:none}
  .defile__piste .carte-service:not(.est-active) .carte-service__num span,
  .defile__piste .carte-service:not(.est-active) .carte-service__texte{opacity:0;transform:translateY(18px)}
  .defile__piste .carte-service.est-passee .carte-service__num span,
  .defile__piste .carte-service.est-passee .carte-service__texte{transform:translateY(-18px)}
  .defile__piste .carte-service.est-active .carte-service__num span,
  .defile__piste .carte-service.est-active .carte-service__texte{transition-duration:.6s;transition-delay:.15s}
  .defile__piste .carte-service.est-active .carte-service__texte{transition-delay:.22s}
}
@media (max-width:860px), (prefers-reduced-motion:reduce){
  .defile{height:auto}
  .defile__colle{position:static;height:auto;overflow:visible;padding-top:0}
  .defile{--ecart-cartes:40px}
  .defile__fenetre{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;clip-path:none}
  .defile__fenetre::-webkit-scrollbar{display:none}
  .defile__piste{gap:16px}
  .defile__piste .carte-service{flex:0 0 86%;scroll-snap-align:start}
}

/* La bande qui défile, dessinée comme les pilules du haut de page, des
   étoiles bordeaux entre les étiquettes, décision de Pauline du 14 octobre
   2026. Elle vient toucher le bas de la ligne centrale. */
.bandeau{margin:0;padding:18px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);overflow:hidden}
.bandeau__piste{display:flex;width:max-content;animation:defile 48s linear infinite}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.bandeau__groupe{display:flex;align-items:center;gap:16px;padding-right:16px}
.bandeau__groupe span{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid var(--filet);color:var(--gris);font-size:15px;white-space:nowrap}
.bandeau__groupe i{font-style:normal;color:var(--bordeaux);font-size:14px;line-height:1}
@keyframes defile{to{transform:translateX(-50%)}}

/* =====================================================================
   LE CONTACT, D'APRES ANRI
   Le seul bloc sombre. Trois colonnes tracées au filet, le nom en très
   grand, le cercle qui ouvre la messagerie, la vague qui respire en bas
   à droite. Ici l'accent passe du bordeaux au lilas.
   ===================================================================== */
/* Comme chez Anri, le contenu blanc remonte et découvre le pied, resté
   collé en bas de l'écran, dessous. L'espace blanc sous la bande qui
   défile est le même qu'au-dessus : le script le mesure. */
.contenu{position:relative;z-index:1;background:var(--blanc);padding-bottom:var(--respiration,180px)}
.contact{
  position:sticky;bottom:0;z-index:0;min-height:max(100svh,700px);background:var(--nuit);color:var(--sur-nuit);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
  font-family:var(--work);
}
/* Le filet du haut longe le bas de la barre de menu ; les filets verticaux
   partent de lui, sans dépasser au-dessus. */
.contact{--ligne-haut:var(--nav-h)}
.contact__col{position:relative}
.contact__col:not(:last-child)::after{content:"";position:absolute;right:0;top:var(--ligne-haut);bottom:0;border-right:1px solid var(--filet-nuit)}
.contact::before{content:"";position:absolute;left:0;right:0;top:var(--ligne-haut);border-top:1px solid var(--filet-nuit)}
.contact__bas{
  position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);
  align-items:end;padding-bottom:104px;
}
/* Mesuré sur Anri à 1440 × 900 : corps 100 px, interligne 120 px, nom à
   214 px du bord gauche, seconde ligne décalée de 0,7 corps, bas du nom
   à 104 px du bas de l'écran. */
.contact__nom{
  grid-column:1 / span 2;padding-left:14.86vw;
  font-size:var(--fs-nom);line-height:1.2;font-weight:400;color:var(--sur-nuit);
  position:relative;z-index:2;
}
/* Chaque mot porte le fond de la nuit : les filets verticaux s'arrêtent
   autour, comme chez Anri. */
.contact__nom span{display:block;width:fit-content;background:var(--nuit);padding:0 .12em;margin-left:-.12em}
.contact__nom span + span{margin-left:.8em}
.contact__devise{
  position:absolute;left:calc(33.333% + 22px);bottom:45px;font-size:20px;line-height:24px;color:var(--sur-nuit);z-index:2}
/* Le cercle E-mail flotte sur la vague, comme chez Anri : le script le
   pose sur la crête à chaque image. Sans script, il reste au-dessus. */
.contact__email{
  position:absolute;left:calc(66.666% + 12px);bottom:48%;
  width:clamp(104px,9.5vw,136px);aspect-ratio:1;border-radius:50%;border:1.25px solid rgba(234,234,234,.85);
  display:grid;place-items:center;font-family:var(--mona);font-size:18px;font-weight:500;letter-spacing:.04em;
  color:var(--sur-nuit);z-index:2;background:var(--nuit);overflow:hidden;isolation:isolate;transition:transform .4s var(--doux);
}
/* Au survol, le cercle se remplit très lentement de l'eau de la vague,
   comme chez Anri : une surface en biais qui monte par le bas et se
   balance tranquillement de gauche à droite. Quand la souris s'en va,
   l'eau redescend aussi lentement. Au repos, le cercle est vide. La nappe
   déborde du cercle sur les côtés pour que le biais ne laisse jamais de
   vide dans les angles. */
.contact__email::before{
  content:"";position:absolute;left:-30%;width:160%;height:160%;top:115%;z-index:-1;
  background:var(--encre-2);transform-origin:50% 0;
  transition:top 4s cubic-bezier(.2,.7,.3,1);animation:bascule 3.6s ease-in-out infinite alternate}
.contact__email:hover::before,.contact__email:focus-visible::before{top:-14%}
@keyframes bascule{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* Au doigt, pas de remplissage : le toucher ouvre la messagerie, sans survol,
   décision de Pauline du 14 octobre 2026. */
@media (hover:none){.contact__email::before{display:none}}
.contact__email:active{transform:scale(.96)}
.contact__vague{position:absolute;right:0;bottom:0;width:33.334%;height:46%;pointer-events:none}
.contact__vague path{fill:var(--encre-2)}
.contact__vague .contact__vague-trait{fill:none;stroke:rgba(234,234,234,.35);stroke-width:1}
.contact__liens{
  position:absolute;right:8px;bottom:11px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-size:20px;line-height:24px;text-transform:uppercase;color:#FAFAFA}
.contact__liens a{transition:color .3s}
.contact__liens a:hover{color:var(--lilas)}
.contact__mentions{
  position:absolute;left:20px;bottom:16px;z-index:2;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sur-nuit-2)}
.contact__mentions a{text-decoration:underline;text-underline-offset:3px}
.contact__mentions a:hover{color:var(--lilas)}

/* =====================================================================
   LES PAGES ANNEXES : la page légale et la 404
   ===================================================================== */
.page{padding:calc(var(--nav-h) + 96px) var(--marge) 140px;display:grid;grid-template-columns:1fr 1fr;position:relative}
.page__tete{grid-column:1;padding-right:clamp(32px,7vw,120px)}
.page__tete h1{font-size:var(--fs-titre);line-height:1;letter-spacing:-.02em}
.page__tete p{margin-top:14px;color:var(--gris)}
.page__sommaire{display:flex;flex-direction:column;gap:8px;margin-top:40px;font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.02em}
.page__sommaire a{color:var(--gris)}
.page__sommaire a:hover{color:var(--bordeaux)}
.page__tete--colle{position:sticky;top:calc(var(--nav-h) + 48px);align-self:start}
.texte{grid-column:2;padding-left:clamp(32px,9vw,130px);max-width:calc(620px + clamp(32px,9vw,130px))}
.texte > div{scroll-margin-top:calc(var(--nav-h) + 32px)}
.texte .partie{font-family:var(--mono);font-size:var(--fs-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--bordeaux)}
.texte h2{font-size:32px;line-height:1.1;letter-spacing:-.02em;margin:10px 0 32px}
.texte h3{font-size:var(--fs-lead);line-height:1.2;color:var(--encre);margin:40px 0 12px}
.texte h4{font-size:var(--fs-point);color:var(--encre);margin:24px 0 10px}
.texte p{color:var(--gris);line-height:1.55;margin:0 0 12px}
.texte p b{font-weight:500;color:var(--encre)}
.texte a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
.texte a:hover{color:var(--bordeaux-2)}
.texte .tableau{overflow-x:auto;margin:16px 0 18px}
.texte table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.texte th{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--filet-fort)}
.texte td{padding:12px 12px 12px 0;border-bottom:1px solid var(--filet);color:var(--encre-2);vertical-align:top}
.texte .seconde{margin-top:96px}
.pied{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px;border-top:1px solid var(--filet);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
/* Liens soulignés, comme « Mentions » dans le pied de l'accueil */
.pied a{text-decoration:underline;text-underline-offset:3px}
.pied a:hover{color:var(--bordeaux)}

.perdu{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding:calc(var(--nav-h) + 16px) var(--marge) 120px;position:relative}
.perdu__code{grid-column:1;align-self:end;justify-self:end;padding-right:20px;font-size:clamp(96px,16vw,240px);line-height:.85;letter-spacing:-.02em;font-weight:300}
.perdu__texte{grid-column:2;align-self:end;padding-left:clamp(32px,10.5vw,140px);display:flex;flex-direction:column;gap:24px;max-width:calc(380px + clamp(32px,10.5vw,140px))}
.perdu__texte h1{font-size:var(--fs-lead);line-height:1.2}
.perdu__texte p{color:var(--gris)}
.perdu__texte .cta{align-self:flex-start}

/* =====================================================================
   LES APPARITIONS, D'APRES ANRI
   Tout arrive en fondu, monté de 24 px. Sans script, rien n'est caché :
   la classe .js n'est posée que si le script tourne.
   ===================================================================== */
.js [data-apparait]{opacity:0;transform:translateY(24px);filter:blur(4px);
  transition:opacity var(--duree) var(--doux),transform var(--duree) var(--doux),filter var(--duree) var(--doux);
  transition-delay:calc(var(--rang,0) * 110ms)}
.js [data-apparait].vu{opacity:1;transform:none;filter:none}

/* =====================================================================
   TABLETTE ET TELEPHONE
   ===================================================================== */
@media (max-width:1100px){
  :root{--marge:40px}
  .nav__liens{gap:18px}
}

@media (max-width:1199px){
  :root{--fs-nom:80px}
}

@media (max-width:860px){
  /* Au doigt, les textes un pixel plus petits, demande de Pauline du
     14 octobre 2026 : 16 → 15 px, 18 → 17 px, 20 → 19 px */
  :root{--marge:20px;--fs-corps:15px;--fs-point:17px;--fs-lead:19px}
  .nav__liens{display:none}
  .nav__menu{display:inline-flex;align-items:center}
  .nav::after{left:16px}

  /* La ligne passe à gauche, comme chez Anri sur téléphone */
  .fil__ligne{left:16px}
  /* Marge droite des textes portée de 20 à 32 px, comme chez Anri, demande
     de Pauline du 14 octobre 2026 : les lignes touchaient presque le bord. */
  /* Au doigt, de l'air entre la barre et l'horloge, réglé pour que le
     paragraphe de présentation reste visible à l'arrivée sur un iPhone (zone
     visible d'environ 707 px) : carte à 248 px, « Disponible pour une
     mission » sur une ligne, blocs à 20 px d'écart. L'horloge au corps du
     texte (16 px), demande de Pauline du 14 octobre 2026 après la mise en
     ligne. Les étiquettes peuvent passer sous le pli. */
  .hero{grid-template-columns:1fr;padding:calc(var(--nav-h) + 104px) 32px 80px 52px;min-height:0;gap:56px}
  /* grid-area auto : positionnée dans sa case de grille, l'horloge tombait
     sur la photo, en noir sur fond sombre. Audit du 14 octobre 2026. */
  .cta--doigt{display:inline-flex;align-self:flex-start;width:fit-content}
  .defile .cta--doigt{margin-top:48px}
  .hero__heure{grid-area:auto;position:absolute;top:calc(var(--nav-h) + 56px);left:52px;font-family:var(--mona);font-size:var(--fs-corps);
    letter-spacing:0;text-transform:none;line-height:1;color:var(--encre)}
  .hero__droite{grid-column:1;grid-row:1;padding:0;max-width:none;gap:20px;align-self:auto;margin-right:0;margin-bottom:0;background:none}
  /* La ligne est à gauche : les filets se déroulent depuis la gauche */
  .tete hr,.bloc + .bloc,.services,.services__titre hr{background-position-x:left}
  .carte{width:min(248px,100%)}
  .carte__etat{white-space:nowrap}
  /* Le nom est masqué à l'œil seulement : Google lit la version téléphone
     en priorité, et les lecteurs d'écran doivent trouver le titre. */
  .hero__nom{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .hero__nom span:first-child{margin:0}
  .hero__nom span:last-child{padding-left:.5em}

  .experience{padding:40px 0 120px}
  .tete{padding:0 32px 0 52px;margin-bottom:64px}
  .tete hr{margin:40px -32px 0 -52px}
  .tete hr{width:auto}
  .bloc{grid-template-columns:1fr;padding:0 32px 0 52px;margin-bottom:110px}
  /* Au doigt, l'année passe à droite du point : dessous, elle sortait de l'écran */
  /* L'année commence à l'aplomb des textes du bloc (52 px), demande de
     Pauline du 14 octobre 2026 : point à 23 px, écart, puis 6 px de fond */
  .bloc__repere{left:16px;top:-7px;flex-direction:row;align-items:center;gap:23px;transform:translateX(-6px);background:transparent;padding:0}
  .bloc__repere span{background:var(--blanc);padding:0 6px;font-size:17px}
  .bloc__gauche{padding:72px 0 0}
  .bloc__droite{padding:40px 0 0;max-width:none}

  .services{padding:110px 0 0}
  /* Au doigt, comme sur ordinateur, la ligne traverse les Services jusqu'à
     la bande qui défile, et les Services prennent la mise en page de
     l'Expérience : texte à 52 px, ligne à 16 px. Demande de Pauline du
     14 octobre 2026. Les cartes se feuillettent toujours au doigt, la
     suivante dépasse à droite. */
  .services__corps{padding:0 32px 0 52px}
  .services__ligne{left:16px;top:-110px;bottom:-88px}
  .services__tete{grid-template-columns:1fr;gap:40px}
  .services__titre hr{margin:32px -32px 0 -52px}
  /* Cartes plus étroites, pour que la suivante dépasse de 48 px et qu'on
     comprenne qu'elles glissent ; 32 px d'air à droite de la dernière,
     portés par un élément vide en fin de piste, car Safari ignore la marge
     de fin d'une zone qui défile. Demande de Pauline du 14 octobre 2026. */
  .defile__fenetre{margin-left:-52px;margin-right:-32px;padding:0 0 0 52px;scroll-padding-inline:52px 32px}
  .defile__piste .carte-service{flex:0 0 calc(100% - 72px)}
  .defile__piste::after{content:"";flex:0 0 8px}
  /* Au doigt, exception à la grille : les cartes glissées vers la gauche
     passent au-dessus de la ligne et du point, demande de Pauline du
     14 octobre 2026. Entre les cartes, la ligne reste visible. */
  .defile__fenetre{position:relative;z-index:7}
  .cartes-services{margin-top:0;gap:24px}
  .defile{--ecart-cartes:96px}
  .carte-service{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
  .carte-service__num{padding:20px 22px;font-size:72px;min-height:120px}
  /* Au doigt, le bandeau du numéro garde sa hauteur et le texte se cale en
     haut : sinon la place en trop se répartissait dans le bandeau et les titres
     ne s'alignaient pas d'une carte à l'autre dès qu'un texte avait une
     ligne de plus, constat de Pauline du 14 octobre 2026. */
  .carte-service__texte{padding:22px 22px 24px;justify-content:flex-start}
  .bandeau{margin:88px 0 0}

  .contenu{--respiration:120px}
  /* Le pied prend la hauteur de l'écran barres d'outils repliées : avec
     la petite hauteur, le bas du contenu blanc restait coincé sous la barre
     de menu en fin de page sur iPhone, constat de Pauline du 14 octobre
     2026. Le blanc sort maintenant entièrement par le haut. */
  .contact{min-height:max(100svh,640px);min-height:max(100lvh,640px)}
  /* Colonnes inégales, mesurées sur Anri en mobile, capture de Pauline du
     14 octobre 2026 : deux colonnes étroites, et celle de la vague presque
     à moitié de l'écran, pour que la vague ondule sous le cercle. */
  .contact{grid-template-columns:26.45% 26.45% 1fr}
  /* Mesuré sur Anri en mobile, capture de Pauline du 14 octobre 2026 : le
     nom fait 6,6 % de la largeur, commence à 10 % du bord, et descend
     sous le cercle, le haut de la première ligne juste sous son bas. */
  .contact__bas{grid-template-columns:1fr;padding-bottom:168px}
  .contact__nom{grid-column:1;padding-left:9.75vw;font-size:clamp(22px,6.6vw,40px);line-height:1.28}
  .contact__nom span + span{margin-left:.75em}
  /* Sur téléphone, pas d'intitulé sous le nom, décision de Pauline du
     14 octobre 2026 */
  .contact__devise{display:none}
  .contact__email{left:calc(52.9% + 4.3vw);width:clamp(84px,27.3vw,120px);font-size:15px}
  .contact__vague{width:47.1%;height:34%}
  /* Malt sur la même ligne de base que Mentions, demande de Pauline */
  .contact__liens{right:20px;bottom:12px;font-size:17px;gap:6px}
  .contact__mentions{bottom:14px}

  /* minmax(0,1fr) : le tableau des données, large de 440 px, défile dans
     son cadre au lieu d'élargir toute la page, constat de Pauline du
     14 octobre 2026. */
  .page{grid-template-columns:minmax(0,1fr);padding:calc(var(--nav-h) + 64px) 32px 110px 52px;gap:56px}
  .page__tete--colle{position:static}
  .texte{grid-column:1;padding:0;max-width:none}

  .perdu{grid-template-columns:1fr;padding:calc(var(--nav-h) + 40px) 32px 80px 52px;gap:40px;align-content:end}
  .perdu__code{justify-self:start;padding:0}
  .perdu__texte{grid-column:1;padding:0}
}

@media (max-width:380px){
  .hero{padding-left:46px}
  .bloc,.tete{padding-left:46px}
  .bloc__repere{gap:17px}
  .tete hr{margin-left:-46px}
  .hero__heure{left:46px}
  .panneau__liens a{font-size:38px}
}

/* Le mouvement se retire pour qui l'a demandé au système */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-apparait]{opacity:1;transform:none;filter:none}
  .carte__photo img{transform:none}
  .js [data-trace]{--t:1}
  .js .fil__ligne,.js .services__ligne{--trace:100%}
  .js .fil__point,.js .fil__trait{transform:none}
}

@media print{
  .nav,.panneau,.fil__ligne,.contact__vague,.bandeau{display:none!important}
  .contact{background:#fff;color:#000;min-height:0}
  .js [data-trace]{--t:1}
}