/* Beta Communication, « Un point, c'est tout ».
   Reprend le CSS des maquettes validées (canevas) : mélange 1, Geist pour les titres et la ligne 2 (réglages du logo
   beta. : SemiBold, -0,06 em), Geist Mono pour la ligne 1 et la navigation. Polices hébergées sur le site (licence OFL). */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/geist-00.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/geist-01.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}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/geist-mono-00.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/geist-mono-01.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}

/* ------------------------------------------------------------------ bases */
:root{--ph-display:'Geist','Helvetica Neue',Arial,sans-serif;--ph-dw:600;--ph-ls:-0.06em;--ph-text:'Geist','Helvetica Neue',Arial,sans-serif;--ph-l1:'Geist Mono',ui-monospace,Menlo,monospace;--ph-l1w:400;--ph-l1st:normal;--ph-l1ls:-0.03em;--ph-l1s:.74;--ph-ui:'Geist Mono',ui-monospace,Menlo,monospace;--side:72px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#FFFFFF;color:#1D1D1F;font-family:var(--ph-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#1D1D1F}
a:hover{color:#000000}
img,video{max-width:100%}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.todo{background:#FFE58A;box-shadow:0 0 0 2px #FFE58A;border-radius:3px;color:#1D1D1F}
.skip{position:absolute;z-index:30;left:12px;top:-80px;padding:12px 16px;border-radius:10px;background:#1D1D1F;color:#FFFFFF;font-size:14px;font-weight:500;text-decoration:none}
.skip:focus{top:10px;color:#FFFFFF}

/* ------------------------------------------------------------------ l'en-tête des maquettes */
.ph-head{position:absolute;z-index:10;left:var(--side);right:var(--side);top:0;height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;text-align:left}
.ph-head.ph-fixed{position:fixed;left:0;right:0;padding:0 var(--side);background:#FFFFFF}
.ph-ui{display:inline-flex;align-items:center;height:44px;padding:0 4px;font-family:var(--ph-ui);font-size:14px;font-weight:500;color:#1D1D1F;text-decoration:none}
.ph-ui:hover{text-decoration:underline;text-underline-offset:4px}
.ph-ui[aria-current="page"]{font-weight:700}
.ph-btn{display:inline-flex;align-items:center;height:44px;padding:0 4px;border:0;background:none;font:inherit;font-family:var(--ph-ui);font-size:14px;font-weight:500;color:#1D1D1F;cursor:pointer}
.ph-btn[hidden]{display:none}
.ph-btn:hover{text-decoration:underline;text-underline-offset:4px}
.ph-ui:focus-visible,.ph-btn:focus-visible,.ph-more a:focus-visible,.ph-tx a:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;border-radius:6px}
.ph-logo{justify-self:start;padding-left:0;transition:opacity .35s ease,visibility .35s ease}
.ph-logo svg{display:block;height:22px;width:auto}
.js .ph-head.on-first .ph-logo{opacity:0;visibility:hidden}
.ph-pages{display:flex;align-items:center;gap:22px}
.ph-right{justify-self:end;display:flex;align-items:center;gap:20px}
.ph-screens{display:flex;align-items:center;gap:20px}
.ph-count{min-width:40px;text-align:right;font-size:14px;font-weight:500;color:#6C6C71;font-variant-numeric:tabular-nums;white-space:nowrap}
/* le sélecteur de langue : « fr nl. en », la langue de la page en noir suivie du point de la marque, les autres en gris */
.ph-lang{display:flex;align-items:center}
.lg{display:inline-block;min-width:24px;box-sizing:border-box;padding:0 5px;line-height:44px;text-align:center;font-family:var(--ph-ui);font-size:14px;font-weight:500;color:#6C6C71;text-decoration:none;white-space:nowrap}
a.lg:hover{color:#1D1D1F}
.lg.is-on{color:#1D1D1F}
.lg-pt{display:inline-block;width:.24em;height:.24em;margin-left:.08em;border-radius:50%;background:currentColor;vertical-align:baseline}
a.lg:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;border-radius:6px}
/* entre 1001 et 1240 px, l'en-tête complet ne tient plus centré : les pages se centrent dans la place qui reste */
@media (min-width:1001px) and (max-width:1240px){.ph-head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:24px}.ph-pages{justify-self:center}}
/* Contact (AMELIO contact_entete, nav_tel) : au bout du menu des pages ; à droite quand ce menu est masqué. Avec Contact,
   le menu des pages se centre dans la place libre entre le logo et la droite, et se replie (Sommaire) sous 1210 px */
.ph-ct2{display:none}
.ph-pages .ph-ui{white-space:nowrap}
@media (min-width:1001px){.ph-head.ph-ct-on{grid-template-columns:auto minmax(0,1fr) auto;column-gap:24px}.ph-ct-on .ph-pages{justify-self:center}}
@media (min-width:1001px) and (max-width:1210px){.ph-ct-on .ph-pages{display:none}.ph-head.ph-ct-on{display:flex;justify-content:space-between}.ph-ct-on .ph-ct2{display:inline-flex}}
/* menu centré sur la page (Matthieu, 21 octobre 2026) : dès que la place le permet, les pages sont au centre exact de
   l'écran ; en dessous, elles se centrent dans la place libre entre le logo et la droite */
@media (min-width:1241px){.ph-head.ph-ct-on{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.ph-ct-on .ph-pages{justify-self:center}}
@media (min-width:1241px) and (max-width:1360px){.ph-ct-on .ph-count{display:none}}
/* Pause (AMELIO aide_point) : « Pause des animations » quand la place le permet, « Pause » sinon ; le lecteur d'écran
   entend toujours le libellé long (le court lui est caché) */
.pz-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:1680px){.ph-ct-on .pz-c{display:none}.ph-ct-on .pz-l{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}}
@media (min-width:1480px){.pz-c{display:none}.pz-l{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}}
/* avec le menu centré, le libellé long ne tient à côté qu'à partir de 1680 px */
@media (min-width:1480px) and (max-width:1679px){.ph-ct-on .pz-c{display:inline}.ph-ct-on .pz-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* l'en-tête des pages intérieures revient quand on remonte (AMELIO entete_remonte ; site.js ajoute .is-float et .is-shown) */
.ph-head.is-float{position:fixed;left:0;right:0;padding:0 var(--side);background:#FFFFFF;box-shadow:0 1px 0 #E8E8ED;transform:translateY(-100%)}
.ph-head.is-float.is-shown{transform:none}
@media (prefers-reduced-motion:no-preference){.ph-head.is-float{transition:transform .25s ease}}

/* ------------------------------------------------------------------ l'accueil : un écran par phrase, un geste = un écran */
html.snap{scroll-snap-type:y mandatory}
@media (prefers-reduced-motion:no-preference){html.snap.ph-armed{scroll-behavior:smooth}}   /* doux après le premier geste : l'arrivée sur #gimber est immédiate */
.screens{display:block}
.ph-screen{position:relative;box-sizing:border-box;height:100vh;height:100svh;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:66px var(--side) 26px;overflow:hidden;text-align:center;scroll-snap-align:start;scroll-snap-stop:always}
.ph-screen:focus{outline:none}
/* la structure, identique sur chaque écran : ligne 1, l'animation au centre, ligne 2 qui finit par le point */
.ph-l1{position:relative;z-index:1;margin:0;max-width:40em;font-family:var(--ph-l1);font-weight:var(--ph-l1w);font-style:var(--ph-l1st);font-size:calc(clamp(26px, 3.1vw, 46px) * var(--ph-l1s));line-height:1.1;letter-spacing:var(--ph-l1ls);text-wrap:balance}
/* comme l'ouverture : un bloc compact, centré dans l'écran ; le film rétrécit si l'écran est trop bas */
.ph-stage{position:relative;z-index:0;flex:0 1 46vh;flex-basis:min(46svh, 440px, calc((100vw - 144px) / 2.2));min-height:140px;width:100%;margin:clamp(10px, 2vh, 22px) 0}
.ph-frame{position:absolute;top:0;left:0;right:0;bottom:0}
.ph-poster,.ph-film{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
.ph-film{background:transparent;opacity:0;transition:opacity .2s linear}
.ph-film.is-live{opacity:1}
.ph-l2{position:relative;z-index:1;margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(36px, 4.7vw, 70px);line-height:1.02;letter-spacing:var(--ph-ls);white-space:nowrap}
.ph-tx{position:relative;z-index:1;min-height:4.5em;margin:16px 0 0;max-width:46em;font-size:16px;line-height:1.5;color:#6C6C71;text-wrap:balance}
.ph-more{position:relative;z-index:1;margin:2px 0 0;font-size:15px;font-weight:500}
.ph-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#1D1D1F;text-decoration:none}
.ph-more a:hover{text-decoration:underline;text-underline-offset:4px}
/* le point : mêmes proportions que dans le logo (0,15 em, posé sur la ligne de base, 0,2 em après la lettre) ;
   une marge intérieure de 20 px (--hit), annulée par des marges négatives, en fait une cible d'au moins 44 px sans changer
   ni son dessin ni la ligne : le dessin reste dans la boîte du contenu (inset: --hit) */
.ph-dot{--fx:0px;--fy:0px;--fs:1;--hit:20px;position:relative;display:inline-block;box-sizing:content-box;width:.15em;height:.15em;padding:var(--hit);margin:calc(-1 * var(--hit)) calc(-1 * var(--hit)) calc(-1 * var(--hit)) calc(.2em - var(--hit));vertical-align:baseline;text-decoration:none}
.ph-dot::after{content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%}
.ph-dot:focus-visible{outline:2px solid #1D1D1F;outline-offset:-9px;border-radius:50%}
.ph-dv{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:#1D1D1F;transform-origin:50% 100%}
.ph-ring{position:absolute;top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit);border-radius:50%;border:1.5px solid #1D1D1F;box-sizing:border-box;opacity:0;pointer-events:none}
.ph-lx,.ph-ly,.ph-ls{position:absolute;top:0;left:0;right:0;bottom:0}
.ph-dot > .ph-dv,.ph-dot > .ph-lx{top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit)}
/* l'ouverture : la phrase, le logo beta. au centre, puis la réponse ; le point du logo saute jusqu'à la fin de la réponse */
.ph-open{padding:64px var(--side) 40px}
.ph-open .ph-l1{max-width:40em;font-size:calc(clamp(20px, 2.3vw, 34px) * .94);line-height:1.15}
.ph-hero{position:relative;flex:0 0 auto;width:min(54vw, 90vh, 740px);margin:clamp(16px, 3.2vh, 34px) 0 clamp(20px, 3.8vh, 40px)}
.ph-hero svg{display:block;width:100%;height:auto;overflow:visible}
.ph-letters{fill:#1D1D1F}
.ph-ghost{fill:#E5E5EA}
.ph-open .ph-l2{font-size:clamp(38px, 4.9vw, 72px)}
.ph-open .ph-tx{min-height:0;margin:24px 0 0;max-width:40em}
.ph-open .ph-dot::after{width:64px;height:64px;margin:-32px 0 0 -32px}
/* la fin : l'adresse dans le paragraphe, deux liens côte à côte */
.ph-tx a{color:#1D1D1F;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:10px 0}
.ph-tx a:hover{color:#000000}
.ph-pair{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px}
/* le h2 d'un écran porte la phrase entière ; il s'efface (display: contents) pour que ses deux lignes et la figure, placée
   après le texte dans le HTML, gardent l'ordre des maquettes : ligne 1, film, ligne 2, texte, lien */
.ph-h{display:contents;margin:0;font-size:inherit;font-weight:inherit}
.ph-screen .ph-l1{order:1}
.ph-screen .ph-hero,.ph-screen .ph-stage{order:2}
.ph-screen .ph-l2{order:3}
.ph-screen .ph-aide{order:4}
.ph-screen .ph-tx{order:5}
.ph-screen .ph-more{order:6}
.ph-screen .ph-preuve{order:7}
/* écran 1 : comment avancer (souris ou doigt), puis, en petit, avec qui et ce qui distingue Beta */
.ph-aide{position:relative;z-index:1;margin:14px 0 0;font-family:var(--ph-ui);font-size:13px;font-weight:500;line-height:1.4;color:#6C6C71}
.ph-aide-d{display:none}
@media (hover:none),(pointer:coarse){.ph-aide-s{display:none}.ph-aide-d{display:inline}}
.ph-open .ph-aide + .ph-tx{margin-top:16px}
.ph-preuve{position:relative;z-index:1;margin:10px 0 0;max-width:46em;font-size:13px;line-height:1.5;color:#6C6C71;text-wrap:balance}
.ph-preuve span{display:block}

/* l'écran de l'équipe : une animation SVG (2,2:1) à la place du film, dans le même cadre */
.eq-svg{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden}

/* écrans bas (petit portable, petit téléphone) : un peu plus d'air sous la barre, le film rétrécit à la place */
@media (max-height:700px) and (min-width:761px){.ph-screen,.ph-open{padding-top:80px}}

/* les entrées. Au chargement, tout le contenu est lisible (un robot qui ne fait pas défiler la page voit tout) : le texte
   monte seulement de quelques pixels, sans s'effacer. Au premier geste (molette, touche, doigt), site.js met en attente
   (.is-wait) les écrans pas encore vus : chacun fait son entrée (.is-in) quand on y arrive, comme avant. .is-on : l'écran
   est à l'écran (le point saute, l'ouverture fait voler son point depuis le logo). */
@media (prefers-reduced-motion:no-preference){
  .js .ph-screen:not(.is-in):not(.is-wait) :is(.ph-l1,.ph-l2 > .ph-in,.ph-aide,.ph-tx,.ph-more,.ph-preuve){animation:phUp .6s cubic-bezier(.2,.7,.2,1) backwards}
  .js .ph-screen.is-wait .ph-in{opacity:0}
  .js .ph-screen.is-wait .ph-dv{transform:scale(0)}
  .js .ph-open:not(.is-on) .ph-letters,.js .ph-open:not(.is-on) .ph-ghost{opacity:0}
  .js .ph-open:not(.is-on) .ph-dv{transform:scale(0)}
  .ph-screen.is-in .ph-in{animation:phIn .7s cubic-bezier(.2,.7,.2,1) .2s backwards}
  .ph-screen.is-in .ph-stage.ph-in{animation-delay:.1s}
  .ph-screen.is-in .ph-l2 .ph-in{animation-delay:.6s}
  .ph-screen.is-in .ph-aide.ph-in{animation-delay:.8s}
  .ph-screen.is-in .ph-tx.ph-in{animation-delay:.9s}
  .ph-screen.is-in .ph-more.ph-in{animation-delay:1s}
  .ph-screen.is-in .ph-preuve.ph-in{animation-delay:1.1s}
  .ph-screen.is-on .ph-dv{animation:phHop 3.2s linear 2.4s infinite}
  .ph-screen.is-in.is-on .ph-dv{animation:phDot .55s cubic-bezier(.3,1.45,.5,1) 1.1s backwards,phHop 3.2s linear 2.4s infinite}
  .ph-screen.is-on .ph-r1{animation:phRing1 3.2s linear 2.4s infinite}
  .ph-screen.is-on .ph-r2{animation:phRing2 3.2s linear 2.4s infinite}
  .ph-open.is-in .ph-l1{animation-delay:.9s}
  .ph-open.is-in .ph-l2 .ph-in{animation-delay:1.2s}
  .ph-open.is-in .ph-aide.ph-in{animation-delay:2.6s}
  .ph-open.is-in .ph-tx.ph-in{animation-delay:2.8s}
  .ph-open.is-in .ph-more.ph-in{animation-delay:3s}
  .ph-open.is-in .ph-preuve.ph-in{animation-delay:3.1s}
  .ph-open.is-on .ph-letters{opacity:1;animation:phRise .8s cubic-bezier(.2,.7,.2,1) .1s backwards}
  .ph-open.is-on .ph-ghost{opacity:1;animation:phIn .4s ease 1.6s backwards}
  .ph-open.is-on .ph-lx{animation:phLX 1s cubic-bezier(.45,0,.55,1) 1.55s backwards}
  .ph-open.is-on .ph-ly{animation:phLY 1s linear 1.55s backwards}
  .ph-open.is-on .ph-ls{animation:phLS 1s cubic-bezier(.45,0,.55,1) 1.55s backwards}
  .ph-screen.ph-open.is-on .ph-dv{transform:none;animation:phPop .5s cubic-bezier(.3,1.6,.5,1) .55s backwards,phLand .55s ease-out 2.55s,phHop 3.2s linear 4.4s infinite}
  .ph-screen.ph-open.is-on .ph-r1{animation:phRing1 3.2s linear 4.4s infinite}
  .ph-screen.ph-open.is-on .ph-r2{animation:phRing2 3.2s linear 4.4s infinite}
  /* Pause : le point ne saute plus, les anneaux s'arrêtent (l'entrée, elle, se termine) */
  .is-paused .ph-screen.is-on .ph-dv{animation:none}
  .is-paused .ph-screen.is-in.is-on .ph-dv{animation:phDot .55s cubic-bezier(.3,1.45,.5,1) 1.1s backwards}
  .is-paused .ph-screen.ph-open.is-on .ph-dv{animation:phPop .5s cubic-bezier(.3,1.6,.5,1) .55s backwards,phLand .55s ease-out 2.55s}
  .is-paused .ph-screen.is-on .ph-ring{animation:none}
  /* les mots montent (21 octobre 2026) : à l'entrée d'un écran, chaque mot sort de sa ligne, puis le point tombe
     (site.js découpe les phrases en .w > .wi et donne --i, le rang du mot, et --dd, l'instant où le point tombe) */
  .js .ph-screen.is-wait .ph-split{opacity:1}
  .js .ph-screen.is-wait .ph-split .wi{transform:translateY(115%)}
  .ph-screen.is-in .ph-split{animation:none}
  .ph-screen.is-in .ph-split .wi{animation:phWord .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.2s + var(--i, 0) * 45ms)}
  .ph-screen.is-in .ph-l2 .ph-split .wi{animation-delay:calc(.5s + var(--i, 0) * 60ms)}
  .ph-open.is-in .ph-split .wi{animation-delay:calc(.9s + var(--i, 0) * 45ms)}
  .ph-open.is-in .ph-l2 .ph-split .wi{animation-delay:calc(1.2s + var(--i, 0) * 60ms)}
  .ph-screen:not(.ph-open).is-in.is-on .ph-dv{animation:phDrop .56s cubic-bezier(.3,0,.3,1) var(--dd, 1.1s) backwards,phHop 3.2s linear calc(var(--dd, 1.1s) + 1.3s) infinite}
  .is-paused .ph-screen:not(.ph-open).is-in.is-on .ph-dv{animation:phDrop .56s cubic-bezier(.3,0,.3,1) var(--dd, 1.1s) backwards}
}
@keyframes phWord{from{transform:translateY(115%)}to{transform:none}}
@keyframes phDrop{0%{transform:translateY(-1.3em);opacity:0}55%{transform:translateY(0) scale(1.4,.62);opacity:1}75%{transform:translateY(-.2em) scale(.92,1.1)}100%{transform:none}}
/* les mots d'une phrase découpée : chacun dans sa ligne (overflow clip garde la ligne de base du texte) */
.ph-split .w{display:inline-block;overflow:clip;padding:.12em .06em .22em;margin:-.12em -.06em -.22em}
.ph-split .wi{display:inline-block}
/* le point emmène (21 octobre 2026) : un cercle noir couvre la page au départ, puis se resserre sur le point du titre
   de la page d'arrivée ; html.iris-in tient la page d'arrivée en noir jusqu'à ce que site.js prenne le relais */
html.iris-in{background:#1D1D1F}
html.iris-in body{visibility:hidden}
.iris-ov{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;background:#1D1D1F;pointer-events:none;visibility:visible}
/* réduire les animations : tout est posé d'emblée, le point est entouré d'un anneau fixe */
@media (prefers-reduced-motion:reduce){
  .ph-r1{opacity:.35;top:calc(var(--hit) - 10px);left:calc(var(--hit) - 10px);right:calc(var(--hit) - 10px);bottom:calc(var(--hit) - 10px)}
}
@keyframes phIn{from{opacity:0}to{opacity:1}}
@keyframes phUp{from{transform:translateY(6px)}to{transform:none}}
@keyframes phRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes phPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes phDot{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes phLX{from{transform:translateX(var(--fx))}to{transform:none}}
@keyframes phLY{0%{transform:translateY(var(--fy));animation-timing-function:cubic-bezier(.3,.7,.5,1)}26%{transform:translateY(calc(var(--fy) - 64px));animation-timing-function:cubic-bezier(.55,0,.85,.45)}100%{transform:none}}
@keyframes phLS{from{transform:scale(var(--fs))}to{transform:none}}
@keyframes phLand{0%{transform:scale(1.5,.55)}40%{transform:scale(.88,1.14)}72%{transform:scale(1.06,.95)}100%{transform:none}}
@keyframes phHop{0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.5,1)}4%{transform:scale(1.24,.78);animation-timing-function:cubic-bezier(.15,.7,.35,1)}14%{transform:translateY(-.44em) scale(.88,1.14);animation-timing-function:cubic-bezier(.55,0,.85,.35)}23%{transform:scale(1.28,.74);animation-timing-function:cubic-bezier(.3,0,.5,1)}27%{transform:scale(.96,1.05);animation-timing-function:cubic-bezier(.15,.7,.35,1)}34%{transform:translateY(-.2em) scale(.94,1.07);animation-timing-function:cubic-bezier(.55,0,.85,.35)}41%{transform:scale(1.16,.86);animation-timing-function:ease-out}46%,100%{transform:none}}
@keyframes phRing1{0%,22.9%{opacity:0;top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit)}23%{opacity:.5;top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit)}42%{opacity:0;top:calc(var(--hit) - 34px);left:calc(var(--hit) - 34px);right:calc(var(--hit) - 34px);bottom:calc(var(--hit) - 34px)}100%{opacity:0;top:calc(var(--hit) - 34px);left:calc(var(--hit) - 34px);right:calc(var(--hit) - 34px);bottom:calc(var(--hit) - 34px)}}
@keyframes phRing2{0%,40.9%{opacity:0;top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit)}41%{opacity:.32;top:var(--hit);left:var(--hit);right:var(--hit);bottom:var(--hit)}58%{opacity:0;top:calc(var(--hit) - 24px);left:calc(var(--hit) - 24px);right:calc(var(--hit) - 24px);bottom:calc(var(--hit) - 24px)}100%{opacity:0;top:calc(var(--hit) - 24px);left:calc(var(--hit) - 24px);right:calc(var(--hit) - 24px);bottom:calc(var(--hit) - 24px)}}

/* le pied de page de l'accueil, après le dernier écran */
.home-foot:focus{outline:none}
.home-foot{scroll-snap-align:end;box-sizing:border-box;padding:40px var(--side) 44px;border-top:1px solid #E8E8ED;font-size:13px;line-height:1.5;color:#6C6C71}
.hf-in{max-width:1296px;margin:0 auto}
.hf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;margin:-12px 0 12px}
.hf-name{margin:0;font-size:15px;color:#1D1D1F}
.hf-name b{font-weight:600}
.hf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:24px 32px}
.hf-k{margin:0 0 6px;font-weight:500;color:#1D1D1F}
.hf-cols ul{margin:0;padding:0;list-style:none}
.hf-cols li{padding:2px 0}
.hf-cols a{display:inline-block;padding:3px 0;color:#6C6C71;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#C7C7CC;text-underline-offset:3px}
.hf-cols a:hover{color:#1D1D1F;text-decoration-color:#1D1D1F}
.hf-cols a:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------------ pages intérieures : même en-tête, même typographie, une colonne centrée */
.pg-root{position:relative;box-sizing:border-box;min-height:100vh;padding:64px var(--side) 0}
.pg-main{max-width:760px;margin:0 auto}
.pg-hero{padding:104px 0 80px;text-align:center}
.pg-h1{margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(44px, 5.4vw, 78px);line-height:1.02;letter-spacing:var(--ph-ls);text-wrap:balance;overflow-wrap:break-word}
.pg-pt{display:inline-block;width:.17em;height:.17em;margin-left:.12em;border-radius:50%;background:#1D1D1F;vertical-align:baseline;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.pg-pt{animation:phDot .55s cubic-bezier(.3,1.45,.5,1) .4s backwards}}
.pg-lead{margin:22px auto 0;max-width:30em;font-size:20px;line-height:1.45;color:#6C6C71;text-wrap:balance}
.pg-sec{padding:72px 0;border-top:1px solid #E8E8ED}
.pg-h2{margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(30px, 2.8vw, 40px);line-height:1.08;letter-spacing:var(--ph-ls);text-wrap:balance}
.pg-h3{margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:24px;line-height:1.15;letter-spacing:var(--ph-ls)}
.pg-p{margin:20px 0 0;font-size:18px;line-height:1.6;text-wrap:pretty}
.pg-k{margin:32px 0 12px;font-size:14px;font-weight:500;color:#6C6C71}
.pg-pills{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pg-pills li{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;background:#F5F5F7;font-size:15px;font-weight:500}
.pg-pills li.pg-todo{background:#FFFFFF;box-shadow:inset 0 0 0 1px #D2D2D7;color:#6C6C71;font-weight:400}
.pg-pills li.pg-pl{padding:0}
.pg-pl a{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;color:#1D1D1F;text-decoration:none}
.pg-pl a:hover{background:#E8E8ED;color:#1D1D1F}
.pg-pl a:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px}
.pg-muted{color:#6C6C71}
.pg-links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 28px}
.pg-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;color:#1D1D1F;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#C7C7CC;text-underline-offset:5px}
.pg-link:hover{text-decoration-color:#1D1D1F}
.pg-cta{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:999px;background:#1D1D1F;color:#FFFFFF;font-size:16px;font-weight:500;text-decoration:none}
.pg-cta:hover{background:#000000;color:#FFFFFF}
.pg-soft{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border-radius:999px;background:#F5F5F7;color:#1D1D1F;font-size:16px;font-weight:500;text-decoration:none}
a.pg-soft:hover{background:#E8E8ED}
.pg-act{margin:30px 0 0}
.pg-end{padding:96px 0 8px;border-top:1px solid #E8E8ED;text-align:center}
.pg-end .pg-p{margin:16px auto 0;max-width:32em;color:#6C6C71;text-wrap:balance}
.pg-foot{margin-top:112px;padding:28px 0 44px;border-top:1px solid #E8E8ED;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 32px;font-size:13px;line-height:1.5;color:#6C6C71}
.pg-foot p{margin:0}
.pf-nav{flex:1 1 100%;margin:-13px 0 4px}
.pf-nav ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 22px}
.pf-nav a{display:inline-block;font-size:14px;font-weight:500}
.pg-foot a{color:#1D1D1F;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:13px 0}
.pg-foot a:hover{color:#000000}
.pg-foot .ph-lang{margin:-10px -5px}
.pg-foot a.lg{padding:0 5px;color:#6C6C71;text-decoration:none}
.pg-foot a.lg:hover{color:#1D1D1F}
.pg-link:focus-visible,.pg-cta:focus-visible,.pg-soft:focus-visible,.pg-foot a:focus-visible,.pg-crumbs a:focus-visible,.pg-ref a:focus-visible,.cs-next-a:focus-visible,.pg-prose a:focus-visible,.cl-feed a:focus-visible{outline:2px solid #1D1D1F;outline-offset:3px;border-radius:8px}
/* fil d'Ariane des pages détaillées */
.pg-crumbs{margin:0 0 22px;font-size:14px;font-weight:500;color:#6C6C71}
.pg-crumbs a{display:inline-block;padding:12px 2px;color:#6C6C71;text-decoration:underline;text-decoration-color:#C7C7CC;text-underline-offset:4px}
.pg-crumbs a:hover{color:#1D1D1F}
.pg-crumbs span[aria-hidden]{margin:0 .55em;color:#C7C7CC}

/* réalisations : un bloc par marque */
.rl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.rl-year{margin:0;font-size:15px;font-weight:500;color:#6C6C71}
.rl-phrase{margin:14px 0 0;max-width:30em;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(21px, 1.9vw, 26px);line-height:1.22;letter-spacing:var(--ph-ls);color:#6C6C71;text-wrap:balance}
.rl-pt{display:inline-block;width:.17em;height:.17em;margin-left:.12em;border-radius:50%;background:currentColor;vertical-align:baseline}
.rl-img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;margin:32px 0 0;background:#FFFFFF}   /* sans cadre : le dessin sur la page, comme à l'accueil (Matthieu, 21 octobre) */
/* la boucle du projet, posée sur son dessin : visible seulement une fois lancée (site.js : is-live) */
.rl-media{position:relative;margin:32px 0 0}
.rl-media .rl-img{margin:0}
.rl-media picture{display:block}
.rl-film{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;background:#FFFFFF;opacity:0;transition:opacity .25s linear;pointer-events:none}
.rl-film.is-live{opacity:1}
.rl-more{margin:20px 0 0}
.rl-note{margin:0;padding:48px 0 0;border-top:1px solid #E8E8ED;font-size:15px;line-height:1.5;color:#6C6C71;text-align:center}

/* pages détaillées : une réalisation, une expertise */
.cs-hero{padding-bottom:40px}
.sv-h1{font-size:clamp(40px, 4.6vw, 64px)}
.cs-year{margin:16px 0 0}
.cs-sub{display:block;margin:16px auto 0;max-width:30em;font-family:var(--ph-l1);font-weight:400;font-size:clamp(15px, 1.25vw, 18px);line-height:1.35;letter-spacing:-0.02em;text-wrap:balance}
.cs-h1 + .cs-year{margin-top:12px}
.cs-phrase{margin:14px auto 0}
.cs-film{position:relative;width:min(1040px, 100%);aspect-ratio:2.2 / 1;margin:0 auto}
.cs-first{border-top:0;padding-top:48px}
.cs-lead{margin-top:0}
h2.pg-k{margin:32px 0 12px}
.cs-blocks{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:32px 40px;margin:36px 0 0}
.cs-blocks p{margin:10px 0 0;font-size:16px;line-height:1.55;color:#6C6C71;text-wrap:pretty}
.cs-next .pg-k{margin-top:0}
.fq-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:28px 40px;margin:36px 0 0}
.fq-q{margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:20px;line-height:1.25;letter-spacing:-0.03em}
.fq-a{margin:8px 0 0;font-size:16px;line-height:1.55;color:#6C6C71;text-wrap:pretty}
.cs-next-a{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.cs-next-a b{font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(30px, 2.8vw, 40px);line-height:1.08;letter-spacing:var(--ph-ls)}
.cs-next-a span{font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(19px, 1.7vw, 22px);line-height:1.25;letter-spacing:var(--ph-ls);color:#6C6C71;text-wrap:balance}
.cs-next-a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.pg-refs{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.pg-ref a{box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:24px 26px 22px;border-radius:22px;background:#F5F5F7;text-decoration:none}
.pg-ref a:hover{background:#EFEFF2}
.pg-ref b{font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:24px;line-height:1.15;letter-spacing:var(--ph-ls)}
.pg-ref span{margin-top:8px;font-size:16px;line-height:1.45;color:#6C6C71;text-wrap:balance}
.pg-ref span .rl-pt{margin-top:0}
.pg-prose{padding-top:56px}
.pg-prose .pg-h3{margin:40px 0 0;font-size:22px}
.pg-prose .pg-h3:first-child{margin-top:0}
.pg-prose p{margin:14px 0 0;font-size:17px;line-height:1.6;text-wrap:pretty}
.pg-prose a{color:#1D1D1F;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#C7C7CC;text-underline-offset:4px}
.pg-prose a:hover{text-decoration-color:#1D1D1F}
a[href^="mailto"]{overflow-wrap:normal;word-break:keep-all}
.pg-prose a[href^="mailto"],.pg-foot a[href^="mailto"],.hf-cols a[href^="mailto"],.ph-tx a[href^="mailto"]{white-space:nowrap}
.pg-h2 + .pg-pills{margin-top:24px}
.nf-hero{padding-bottom:40px}

/* Matthieu : pour les recruteurs */
.mt-photo{box-sizing:border-box;width:232px;max-width:64%;aspect-ratio:4 / 5;margin:0 auto 44px;padding:12px;border-radius:24px;background:#F5F5F7;display:flex;align-items:center;justify-content:center;font-size:15px;color:#6C6C71;text-align:center}
.mt-img{display:block;padding:0;object-fit:cover}
.mt-avail{margin:16px 0 0;font-size:15px;color:#6C6C71}
.mt-acts{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px}
.mt-acts li{display:inline-flex;align-items:center;gap:10px}
.mt-note{font-size:13px;color:#6C6C71}
.mt-path{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid #F0F0F2}
.mt-path li{display:grid;grid-template-columns:64px minmax(0, 1fr);gap:16px;padding:16px 0;border-bottom:1px solid #F0F0F2;font-size:17px;line-height:1.5}
.mt-path b{font-weight:600}
.mt-year{color:#6C6C71;font-weight:500;font-variant-numeric:tabular-nums}
.mt-sec .pg-pills{margin-top:24px}

/* coulisses */
.cl-work{margin:32px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
.cl-card{display:flex;flex-direction:column;padding:26px 26px 12px;border-radius:22px;background:#F5F5F7}
.cl-card p{margin:10px 0 0;flex:1 1 auto;font-size:16px;line-height:1.5;color:#6C6C71}
.cl-card .pg-link{align-self:flex-start;margin-top:8px}
.cl-feed{margin:32px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:128px;gap:8px}
.cl-feed li{padding:16px;border-radius:16px;background:#F5F5F7;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:18px;line-height:1.2;letter-spacing:var(--ph-ls);text-wrap:balance}
.cl-feed li.cl-dark{background:#1D1D1F;color:#FFFFFF}
.cl-feed a{color:inherit;text-decoration:none}
.cl-feed a:hover{text-decoration:underline}
.cl-two{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:48px}
.cl-two .pg-h2{font-size:clamp(26px, 2.3vw, 32px)}
.cl-ph{margin:22px 0 0;min-height:112px;padding:12px;box-sizing:border-box;border-radius:16px;background:#F5F5F7;display:flex;align-items:center;justify-content:center;font-size:15px;color:#6C6C71;text-align:center}
a.cl-ph{color:#1D1D1F;font-weight:500;text-decoration:none}
a.cl-ph:hover{background:#E8E8ED}
.cl-two .pg-link{margin-top:12px}

/* sommaire : les phrases, puis les pages */
.sm-root{display:flex;flex-direction:column;justify-content:center;padding:84px var(--side) 40px;text-align:center}
.sm-k{margin:0 0 12px;font-size:14px;font-weight:500;color:#6C6C71}
.sm-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.sm-s{display:inline-flex;align-items:baseline;gap:.5em;min-height:44px;padding:3px 8px;box-sizing:border-box;color:#1D1D1F;text-decoration:none;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(19px, min(2.05vw, 3.4vh), 31px);line-height:1.18;letter-spacing:var(--ph-ls)}
.sm-s:hover .sm-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.sm-n{flex:0 0 auto;min-width:1em;font-family:var(--ph-text);font-size:13px;font-weight:500;letter-spacing:0;color:#6C6C71;font-variant-numeric:tabular-nums;text-align:right}
.sm-t{text-wrap:balance}
.sm-p{display:inline-block;width:.17em;height:.17em;margin-left:.12em;border-radius:50%;background:currentColor;vertical-align:baseline}
.sm-pages-nav{margin:0 0 40px}
.sm-lang{display:none}
.sm-pages{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 36px}
.sm-pg{display:inline-flex;align-items:center;min-height:52px;padding:0 4px;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(22px, 2vw, 30px);letter-spacing:var(--ph-ls);color:#1D1D1F;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:#D2D2D7;text-underline-offset:.22em}
.sm-pg:hover{text-decoration-color:#1D1D1F}
.sm-pg.sm-mail{padding:0 26px;border-radius:999px;background:#1D1D1F;color:#FFFFFF;text-decoration:none}
.sm-pg.sm-mail:hover{background:#000000;color:#FFFFFF}
.sm-s:focus-visible,.sm-pg:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px;border-radius:10px}

/* contact : la phrase à trous (piste A) ou le formulaire sobre (piste B), puis « Message reçu » (maquettes Contact-…) */
.cf-root{padding-bottom:0;overflow-x:hidden;overflow-x:clip}      /* les anneaux du point, près du bord, ne font pas défiler la page */
.cf-screen{box-sizing:border-box;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 0 36px;text-align:center}
.cf-screen[hidden]{display:none}
.cf-form{display:flex;flex-direction:column;align-items:center;width:100%}
.js .cf-nojs{display:none}
html:not(.js) .cf-form{display:none}
.cf-nojs{margin:28px 0 0;font-size:16px;color:#6C6C71}
.cf-todo{margin:10px 0 0;font-size:13px;color:#6C6C71}
.cf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-send{font:inherit;color:inherit;border:0;padding:var(--hit);background:none;cursor:pointer}
.cf-s .cf-send{margin-left:calc(.1em - var(--hit))}
.cf-miss{border-bottom-style:dashed !important;border-bottom-color:#1D1D1F !important}
.ph-tx.cf-hint{min-height:3em}
.cf-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:#1D1D1F;cursor:pointer}
.cf-link:hover{text-decoration:underline;text-underline-offset:4px}
.cf-link:focus-visible,.cf-go:focus-visible{outline:2px solid #1D1D1F;outline-offset:6px;border-radius:8px}
.cf-s{position:relative;z-index:1;width:100%;margin:clamp(14px, 2.6vh, 28px) 0 0;max-width:20em;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(30px, 3.3vw, 52px);line-height:1.55;letter-spacing:-0.035em;text-wrap:pretty}
.cf-s input{field-sizing:content;min-width:3ch;max-width:calc(100% - .5em);font:inherit;letter-spacing:inherit;color:#1D1D1F;background:transparent;border:0;border-bottom:2px solid #8C8C91;border-radius:0;padding:0 .08em;margin:0 .04em;outline:none;text-align:center;vertical-align:baseline}
/* le projet : un trou qui revient à la ligne (on relit tout ce qu'on écrit), même trait que les autres */
.cf-s textarea{field-sizing:content;box-sizing:content-box;min-width:3ch;max-width:calc(100% - .5em);font:inherit;letter-spacing:inherit;line-height:inherit;color:#1D1D1F;background:transparent;border:0;border-bottom:2px solid #8C8C91;border-radius:0;padding:0 .08em;margin:0 .04em;outline:none;text-align:center;vertical-align:bottom;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.cf-s input::placeholder,.cf-s textarea::placeholder{color:#8C8C91;opacity:1}
.cf-multi .cf-pt{display:none}
.cf-s input:focus,.cf-s textarea:focus{border-bottom-color:#1D1D1F;background:#F5F5F7;border-radius:6px 6px 0 0}
.cf-area{width:min(100%, 640px);margin:6px 0 0}
.cf-area textarea{width:100%;box-sizing:border-box;min-height:3.4em;font-family:var(--ph-text);font-size:17px;line-height:1.45;color:#1D1D1F;background:transparent;border:0;border-bottom:1.5px solid #8C8C91;border-radius:0;padding:8px 0;outline:none;resize:none;text-align:left}
.cf-area textarea:focus{border-bottom-color:#1D1D1F;background:#F5F5F7}
.cf-area textarea::placeholder{color:#6C6C71}
.cf-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;width:min(100%, 720px);margin:clamp(16px, 3vh, 32px) 0 clamp(14px, 2.6vh, 26px);text-align:left}
.cf-l{display:flex;flex-direction:column;gap:4px;font-family:var(--ph-ui);font-size:13px;font-weight:500;color:#6C6C71}
.cf-l em{font-style:normal;color:#6C6C71}
.cf-wide{grid-column:1 / -1}
.cf-l input,.cf-l textarea{font-family:var(--ph-text);font-size:18px;font-weight:400;color:#1D1D1F;background:transparent;border:0;border-bottom:1.5px solid #8C8C91;border-radius:0;padding:8px 0 10px;outline:none;resize:none}
.cf-l textarea{min-height:4.4em;line-height:1.45}
.cf-l input:focus,.cf-l textarea:focus{border-bottom-color:#1D1D1F;background:#F5F5F7}
.cf-go{position:relative;z-index:1;display:inline-flex;align-items:baseline;margin:0;border:0;background:none;padding:0;cursor:pointer;color:#1D1D1F;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(36px, 4.7vw, 70px);line-height:1.02;letter-spacing:var(--ph-ls)}
.cf-go .ph-dot{--hit:0px;pointer-events:none}
.cf-sent .ph-l2{margin-top:clamp(14px, 2.6vh, 28px)}
/* AMELIO bouton_envoyer, autres_demandes */
.cf-act{margin:14px 0 0}
.cf-btn{border:0;font-family:var(--ph-text);cursor:pointer}
.cf-btn:focus-visible{outline:2px solid #1D1D1F;outline-offset:3px;border-radius:999px}
.cf-autres{margin:4px auto 0;max-width:34em;font-size:14px;line-height:1.5;color:#6C6C71;text-wrap:balance}
.cf-sent .ph-tx{min-height:0}
@media (prefers-reduced-motion:no-preference){
  .cf-root .ph-in{animation:phUp .6s cubic-bezier(.2,.7,.2,1) backwards}
  .cf-root .cf-form.ph-in{animation-delay:.05s}
  .cf-root .ph-dv{animation:phDot .55s cubic-bezier(.3,1.45,.5,1) 1.1s backwards,phHop 3.2s linear 2.4s infinite}
  .cf-root .ph-r1{animation:phRing1 3.2s linear 2.4s infinite}
  .cf-root .ph-r2{animation:phRing2 3.2s linear 2.4s infinite}
  .is-paused .cf-root .ph-dv{animation:phDot .55s cubic-bezier(.3,1.45,.5,1) 1.1s backwards}
  .is-paused .cf-root .ph-ring{animation:none}
}
/* mentions légales : l'adresse, sur une ligne */
.lg-mail,.lg-mail a{white-space:nowrap}

/* la page d'erreur : une phrase et un lien par langue */
.nf-main{max-width:760px;margin:0 auto;padding:120px 0 96px}
.nf-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:40px;text-align:center}
.nf-s{margin:0;font-family:var(--ph-display);font-weight:var(--ph-dw);font-size:clamp(26px, 2.6vw, 36px);line-height:1.15;letter-spacing:var(--ph-ls);text-wrap:balance}
.nf-list .pg-link{margin-top:6px}

/* tablette : l'en-tête complet ne tient pas ; comme sur téléphone, les pages passent par le Sommaire (et le pied de page) */
@media (max-width:1000px){.ph-pages{display:none}.ph-head{display:flex;justify-content:space-between}.ph-ct-on .ph-ct2{display:inline-flex}}

/* ------------------------------------------------------------------ téléphone (comme les maquettes Ecran-1-tel, Ecran-4-tel, Ecran-5-tel) */
@media (max-width:760px){
  :root{--side:20px}
  .ph-head{display:flex;justify-content:space-between}
  .ph-ui{white-space:nowrap}
  .ph-pages{display:none}
  .ph-screen{padding:64px 20px 24px}
  /* le film en 4:3, de bord à bord */
  .ph-stage{flex-basis:min(75vw, 52vh);flex-basis:min(75vw, 52svh);min-height:150px;margin:10px -20px;width:calc(100% + 40px)}
  .eq-stage{flex-basis:calc(100vw / 2.2);min-height:0}
  .eq-svg{transform:scale(1.18)}         /* le dessin garde près de 10 % de marge de chaque côté, élastique tendu compris : on l'agrandit sans le couper */
  .ph-busy .ph-lang{display:none}
  /* AMELIO nav_tel : Pause, Contact et Sommaire tiennent en 360 px ; les langues passent au Sommaire et au pied de page, le compteur s'efface */
  .ph-navtel .ph-ct2{display:inline-flex}
  .ph-navtel .ph-lang,.ph-navtel .ph-count{display:none}
  .ph-navtel .ph-right,.ph-navtel .ph-screens{gap:12px}
  .ph-navtel .ph-ui,.ph-navtel .ph-btn{padding:0 2px}
  .ph-navtel .ph-logo{padding-left:0}
  .ph-l2{white-space:normal;text-wrap:balance}
  .ph-tx{margin-top:14px;font-size:15px}
  .ph-open{padding:64px 20px 24px}
  .ph-hero{width:min(84vw, 360px)}
  .ph-open .ph-tx{font-size:15px}
  .home-foot{padding:24px 20px 28px}
  .hf-top{margin:-8px 0 4px}
  .hf-cols{grid-template-columns:minmax(0, 1fr);gap:12px}
  .hf-cols ul{display:flex;flex-wrap:wrap;gap:0 16px}
  .hf-cols > div:last-child ul{display:block}
  .hf-cols li{padding:0}
  .pg-root{padding:64px 20px 24px}
  .pg-hero{padding:56px 0 48px}
  .pg-lead{font-size:18px}
  .pg-sec{padding:56px 0}
  .pg-p{font-size:17px}
  .pg-end{padding:64px 0 0}
  .pg-foot{flex-direction:column;margin-top:72px;padding-bottom:16px}
  .cs-hero{padding-bottom:28px}
  .cs-film{aspect-ratio:4 / 3;width:calc(100% + 40px);margin:0 -20px}
  .cs-first{padding-top:36px}
  .cs-blocks,.pg-refs,.fq-list{grid-template-columns:minmax(0, 1fr)}
  .sm-lang{display:block;margin:14px 0 0}
  .sm-lang .ph-lang{margin:0 -5px}
  .cl-work,.cl-two{grid-template-columns:minmax(0, 1fr)}
  .cl-two{gap:56px}
  .cl-feed{grid-template-columns:minmax(0, 1fr);grid-auto-rows:auto}
  .cl-feed li{grid-column:auto !important;grid-row:auto !important;padding:14px 16px;font-size:17px}
  .sm-root{text-align:left;justify-content:flex-start;padding:64px 20px 24px}
  .sm-list{align-items:stretch;gap:6px}
  .sm-s{font-size:22px;padding:4px 0}
  .sm-n{min-width:1.45em}               /* « 10 » : les phrases restent alignées */
  .cf-s{font-size:25px;line-height:1.6;max-width:none}
  .cf-grid{grid-template-columns:1fr;gap:12px}
  .cf-l input,.cf-l textarea{font-size:17px}
  .cf-area textarea{font-size:16px}
  .cf-screen{padding:24px 0 32px}
  .nf-main{padding:72px 0 56px}
  .nf-list{gap:32px}
  .sm-pages{flex-direction:column;align-items:flex-start;gap:4px}
  .sm-pg{font-size:24px}
  .sm-pg.sm-mail{margin-top:12px}
}
/* petit téléphone : un peu plus d'air sous la barre (après le bloc téléphone, qui fixe le retrait à 64 px) */
@media (max-width:760px) and (max-height:740px){.ph-screen,.ph-open{padding-top:76px}}

/* ------------------------------------------------------------------ le bandeau de consentement (consent.js)
   Maquette D « Matthieu ici », validée le 21 octobre 2026 : une carte centrée en bas, deux boutons de même poids
   (refuser aussi simple qu'accepter, exigence de l'APD). Téléphone : toute la largeur, marges de 12 px. */
.ck{position:fixed;z-index:40;left:50%;bottom:28px;transform:translateX(-50%);box-sizing:border-box;width:560px;max-width:calc(100% - 24px);padding:26px 26px 20px;background:#FFFFFF;border-radius:20px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 40px rgba(0,0,0,.14);color:#1D1D1F;text-align:left}
.ck[hidden]{display:none}
.ck-k1{margin:0 0 8px;font-family:var(--ph-ui);font-size:13px;letter-spacing:-.02em;color:#6C6C71}
.ck-k2{margin:0 0 10px;font-family:var(--ph-display);font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1.15}
.ck-k3{margin:0 0 16px;font-size:15px;line-height:1.45}
.ck-k3 a{color:#6C6C71;text-underline-offset:3px}
.ck-b{display:flex;gap:8px}
.ck-b button{flex:1 1 0;min-height:50px;padding:0 14px;border:0;border-radius:999px;background:#F5F5F7;color:#1D1D1F;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.ck-b button:hover{background:#E8E8ED}
.ck-b button:focus-visible,.ck-k3 a:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.ck{animation:ck-in .45s cubic-bezier(.2,.8,.2,1) .6s both}@keyframes ck-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}}
@media (max-width:760px){.ck{bottom:12px;padding:20px 18px 16px;border-radius:18px}.ck-k2{font-size:22px}.ck-k3{font-size:14px}.ck-b button{min-height:46px;font-size:15px}}
@media print{.ck{display:none}}