/* Emerge Studio : le CSS commun à toutes les pages, sauf l'accueil (outils/commun.py) */
  :root{ --fond:#ffffff; --encre:#121212; --gris:#636363; --bleu:#234be9;
         /* La palette entière du site : chaque page puise ici, aucune nuance à
            part. gris-clair = texte secondaire sur fond sombre ;
            bleu-pale = texte et pastilles sur le bleu ; surface = aplats gris
            clairs ; trait = filets sur blanc, trait-fort = filets sur surface ;
            surface-sombre = cartes posées sur l'encre. */
         --gris-clair:#b5b5b5; --bleu-pale:#dce3fc; --surface:#f4f4f4;
         /* mention = la couleur des petites mentions (surtitres, notes, pied).
            Sur fond clair c'est le gris : le gris clair n'y atteint que 2:1 de
            contraste, illisible (il en faut 4,5). Sur les sections sombres
            (data-sombre), le gris clair revient. */
         --mention:var(--gris);
         --trait:#e0e0e0; --trait-fort:#d1d1d1; --surface-sombre:#242424;
         /* Le texte de la page entière parle la langue du bloc services :
            même course, même flou, mêmes durées, même courbe. */
         --montee:24px; --flou:6px; --duree-o:.8s; --duree-t:.9s;
         --courbe:cubic-bezier(.16,1,.3,1);
         /* Les rôles que le mode nuit sépare : le fond des sections sombres et
            le texte posé dessus, l'aplat bleu des boutons et des sections, et
            l'aplat bleu pâle. Le jour, ils valent l'encre, le blanc, le bleu. */
         --fond-sombre:#121212; --sur-sombre:#fff; --aplat-bleu:#234be9; --aplat-bleu-pale:#dce3fc; }
  [data-sombre]{--mention:var(--gris-clair)}
  /* ================= le mode nuit =================
     Planche « Effet wow 20 — Le mode nuit » : tout le site passe en bleu nuit.
     On l'allume en touchant le e du menu ; le choix suit d'une page à l'autre
     (localStorage) et il est posé avant le premier affichage par le script de
     l'en-tête. Le texte devient blanc (18,7:1), le gris 7,5:1, le bleu des
     textes s'éclaircit (7,8:1) mais les boutons et les sections bleues gardent
     leur bleu ; les sections sombres s'enfoncent d'un cran. */
  :root[data-mode="nuit"]{color-scheme:dark;
    --fond:#0a0f2e; --encre:#ffffff; --gris:#9aa3c7; --bleu:#8ea3f7; --gris-clair:#a3acd0;
    --surface:#141b47; --trait:#232a55; --trait-fort:#2c3462; --surface-sombre:#1a2150;
    --fond-sombre:#060920; --aplat-bleu-pale:#1c275e}
  [data-mode="nuit"] .pied-page{--papier:#080c27}
  /* le fil d'Ariane : ses liens gris doivent se détacher du titre blanc qui les suit (3,4:1) */
  [data-mode="nuit"] .ariane a{color:#8189b5}
  /* sur un en-tête de marque clair (data-clair, Calleis), la barre repasse en encre la nuit */
  [data-mode="nuit"] .nav.sur-clair,[data-mode="nuit"] .nav.sur-clair .menu{color:#121212}
  /* la bascule : la nouvelle couleur s'ouvre en cercle depuis le e du menu */
  :root.bascule-mode::view-transition-old(root){animation:none}
  :root.bascule-mode::view-transition-new(root){animation:ouvre-mode 1s var(--courbe) both}
  :root.bascule-mode *{view-transition-name:none !important}
  @keyframes ouvre-mode{
    from{clip-path:circle(0 at var(--mode-x, 50%) var(--mode-y, 50%))}
    to{clip-path:circle(150vmax at var(--mode-x, 50%) var(--mode-y, 50%))}}
  *{margin:0;padding:0;box-sizing:border-box}
  /* L'allemand soude ses mots : « Datenschutzerklärung », « Suchmaschinenoptimierung »
     ne tiennent pas dans un grand titre sur téléphone, l'italien aussi (« Posizionamento »). Les mots de 14 lettres et
     plus s'y coupent, avec le trait d'union de la langue ; le reste ne bouge pas. */
  :is(:lang(de),:lang(it)) :is(h1,h2,h3,.metiers a){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6}
  html,body{height:100%}
  html{scroll-behavior:smooth}
  body{background:var(--fond);color:var(--encre);
       font-family:'Bricolage Grotesque',system-ui,sans-serif}
  /* Le bruit des aplats de couleur : tout fond bleu, encre ou bleu pâle porte la
     trame des couvertures, fondue dans la couleur même (background-blend-mode).
     Pas de pseudo-élément : ceux des sections restent libres. Les !important
     l'emportent sur les « background: » raccourcis des sections, qui
     remettraient l'image à zéro. */
  .bruit{background-image:url(/images/realisations/grain.webp) !important;
    background-size:calc(215 * var(--k, 1px)) !important;background-repeat:repeat !important;
    background-blend-mode:overlay !important}

  /* ================= le chargeur =================
     Planches « Loader — Emerge » et « Loader — sortie ». Le mot-symbole, le e posé
     sur la ligne de base : il saute trois fois, de plus en plus haut, en
     s'écrasant à chaque retombée, et finit perché à sa place de logo. À chaque
     retombée, la jauge avance d'un cran. Puis la ligne, la jauge et « Chargement »
     s'effacent, et le panneau monte d'un bloc découvrir la page.
     Il ne se montre que si la visite commence par l'accueil (sessionStorage) :
     une page de service ou un article s'affichent tout de suite. Pas avec
     « réduire les animations », jamais sans script (caché par défaut : c'est le
     script qui pose html.charge). Tant qu'il est là, les animations de la page
     attendent (en pause) : elles jouent quand il se lève. */
  .chargeur{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:var(--fond)}
  html.charge .chargeur,.chargeur.sortie{display:grid}
  .chargeur.sortie{translate:0 -100%;transition:translate .75s cubic-bezier(.55,.05,.85,.35)}
  html.charge body *:not(.chargeur, .chargeur *){animation-play-state:paused !important}
  .ch-marque{--corps:min(88px, 17vw);position:relative;font-size:var(--corps)}
  .ch-mot{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;line-height:1.40625;letter-spacing:-0.035em;
    color:var(--encre);white-space:nowrap}
  .ch-e{display:inline-block;color:var(--bleu);transform-origin:50% 100%;translate:0 -0.3em;
    animation:ch-saut 2.2s linear both, ch-ecrase 2.2s linear both}
  /* la ligne de base court sous les jambages, à 1,364 em du haut du mot */
  .ch-ligne{position:absolute;left:0;right:0;top:1.3636em;height:2px;background:#dcdcdc;
    animation:ch-efface-ligne 2.2s linear both}
  .ch-jauge{position:absolute;inset:0;background:var(--fond-sombre);transform-origin:left;transform:scaleX(0);
    animation:ch-jauge 2.2s linear both}
  /* en unités du mot (--corps) : son propre corps de 11 px fausserait les em */
  .ch-etat{position:absolute;left:0;top:calc(var(--corps) * 1.3636 + 26px);white-space:nowrap;
    font:600 11px/14px 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--gris);animation:ch-efface-etat 2.2s linear both}
  @keyframes ch-saut{
    0%      { translate:0 0;         animation-timing-function:ease-out }
    8.889%  { translate:0 -0.162em;  animation-timing-function:ease-in }
    16.667% { translate:0 0;         animation-timing-function:ease-out }
    26.111% { translate:0 -0.24em;   animation-timing-function:ease-in }
    34.444% { translate:0 0;         animation-timing-function:ease-out }
    45%     { translate:0 -0.39em;   animation-timing-function:ease-in }
    54.444% { translate:0 -0.252em;  animation-timing-function:ease-out }
    61.111% { translate:0 -0.333em;  animation-timing-function:ease-in }
    67.222% { translate:0 -0.285em;  animation-timing-function:ease-in-out }
    72.778%,100% { translate:0 -0.3em }
  }
  @keyframes ch-ecrase{
    0%      { scale:1 1;       animation-timing-function:ease-out }
    8.889%  { scale:.96 1.05;  animation-timing-function:ease-in }
    16.111% { scale:1 1;       animation-timing-function:ease-out }
    17.778% { scale:1.11 .93;  animation-timing-function:ease-out }
    21.111% { scale:1 1;       animation-timing-function:ease-out }
    26.111% { scale:.96 1.05;  animation-timing-function:ease-in }
    33.889% { scale:1 1;       animation-timing-function:ease-out }
    35.556% { scale:1.11 .93;  animation-timing-function:ease-out }
    38.889% { scale:1 1;       animation-timing-function:ease-out }
    45%     { scale:.95 1.06;  animation-timing-function:ease-in }
    54.444% { scale:1.06 .95;  animation-timing-function:ease-out }
    61.111%,100% { scale:1 1 }
  }
  @keyframes ch-jauge{
    0%      { transform:scaleX(0);   animation-timing-function:ease-out }
    8.889%  { transform:scaleX(.46) }
    16.667% { transform:scaleX(.46); animation-timing-function:ease-out }
    26.111% { transform:scaleX(.8) }
    34.444% { transform:scaleX(.8);  animation-timing-function:ease-out }
    45%,100%{ transform:scaleX(1) }
  }
  @keyframes ch-efface-ligne{ 0%,72.778%{opacity:1;animation-timing-function:ease-out} 86.667%,100%{opacity:0} }
  @keyframes ch-efface-etat{ 0%,72.778%{opacity:1;animation-timing-function:ease-out} 82.778%,100%{opacity:0} }

  /* ================= la popin des cookies =================
     En verre liquide, comme la liste des langues : ce qui passe dessous se floute
     et se sature à travers une lame claire, bordée d'un reflet net. La lame est
     plus dense que celle des langues : elle doit rester lisible sur le noir et le
     bleu des sections qu'elle survole. Elle arrive en bas à gauche quand le
     chargeur s'est levé, se souvient du choix (localStorage), et le lien
     « Cookies » du pied de page la rouvre. */
  .cookies{position:fixed;left:24px;bottom:24px;z-index:70;width:min(400px, calc(100vw - 32px));padding:22px 22px 20px;
    border-radius:22px;color:var(--encre);isolation:isolate;
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(24px) saturate(1.9) brightness(1.06);backdrop-filter:blur(24px) saturate(1.9) brightness(1.06);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 0 22px rgba(255,255,255,.25),
               0 1px 2px rgba(18,18,18,.06), 0 22px 50px rgba(18,18,18,.18);
    opacity:0;visibility:hidden;translate:0 18px;
    transition:opacity .45s ease, translate .8s var(--courbe), visibility 0s linear .8s}
  .cookies::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.16) 100%)}
  .cookies.visible{opacity:1;visibility:visible;translate:none;transition-delay:0s}
  /* la planche « Page légale — Cookies » : le surtitre, une phrase, puis Refuser et
     Accepter de même poids — aucun choix n'est forcé — et Personnaliser */
  .cookies-titre{font-weight:600;font-size:11px;line-height:15px;letter-spacing:0.1em;text-transform:uppercase;color:var(--bleu)}
  .cookies-texte{margin-top:7px;font-size:15px;line-height:23px;color:var(--encre)}
  .cookies .choix{margin-top:16px;display:flex;align-items:center;gap:10px}
  /* Personnaliser et En savoir plus : des liens soulignés, pas des boutons pleins */
  .cookies .personnaliser,.cookies .en-savoir{min-width:0;height:auto;margin-left:6px;padding:10px 0;border-radius:0;background:none;
    font:400 14px/1 'Bricolage Grotesque',system-ui,sans-serif;color:var(--gris);text-decoration:underline;
    text-underline-offset:4px;text-decoration-thickness:1px;transition:color .3s ease}
  @media (hover:hover){ .cookies .personnaliser:hover,.cookies .en-savoir:hover{color:var(--encre);background:none} }
  .cookies .personnaliser:focus-visible,.cookies .en-savoir:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
  /* les réglages : une ligne par catégorie, un interrupteur à droite */
  .cookies .categories{list-style:none;margin-top:10px}
  .cookies .categories li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
  .cookies .categories li + li{border-top:1px solid rgba(18,18,18,.1)}
  .cookies .categorie{font-weight:600;font-size:15px;line-height:20px}
  .cookies .detail{margin-top:2px;font-size:13px;line-height:18px;color:var(--gris)}
  .cookies .interrupteur{flex:none;min-width:0;width:46px;height:28px;padding:0;border-radius:14px;
    background:rgba(18,18,18,.16);position:relative;transition:background .35s ease}
  .cookies .interrupteur i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(18,18,18,.25);transition:translate .4s var(--courbe)}
  .cookies .interrupteur[aria-checked="true"]{background:var(--aplat-bleu)}
  .cookies .interrupteur[aria-checked="true"] i{translate:18px 0}
  .cookies .interrupteur[aria-disabled="true"]{opacity:.45;cursor:default}
  .cookies .enregistrer{background:var(--fond-sombre);color:#fff}
  @media (hover:hover){ .cookies .enregistrer:hover{background:var(--aplat-bleu)} }
  .cookies button{flex:0 0 auto;min-width:112px;height:44px;padding:0 20px;border:0;border-radius:22px;cursor:pointer;
    font:600 14px/1 'Bricolage Grotesque',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
    transition:background .3s ease, color .3s ease, scale .3s var(--courbe)}
  .cookies .refuser{background:rgba(255,255,255,.5);color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
  .cookies .accepter{background:var(--fond-sombre);color:#fff}
  @media (hover:hover){ .cookies .refuser:hover{background:#fff} .cookies .accepter:hover{background:var(--aplat-bleu)} }
  .cookies button:active{scale:.97}
  .cookies button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
  .pied-page .gerer-cookies{position:relative;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;
    color:inherit;cursor:pointer}
  /* 14 px de haut : une zone de toucher invisible de 44 px autour, sans rien déplacer */
  .pied-page .gerer-cookies::before{content:'';position:absolute;inset:-15px -6px}
  @media (hover:hover){ .pied-page .gerer-cookies:hover{color:var(--encre)} }
  @media (max-width:600px){
    .cookies{left:12px;right:12px;bottom:12px;width:auto;padding:20px 18px 18px}
    .cookies .choix{flex-wrap:wrap}
    .cookies button{flex:1}
    /* le lien garde la largeur de son mot : « Personnaliser » passe sous les deux boutons
       au lieu de rétrécir et de déborder de la lame */
    .cookies .personnaliser,.cookies .en-savoir{flex:0 0 auto}
  }
  @media (prefers-reduced-motion: reduce){ .cookies{translate:none} }
  /* sans flou d'arrière-plan, la lame redevient une carte presque opaque */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cookies{background:rgba(255,255,255,.97)} }
  /* la nuit, la lame est bleu nuit ; « Accepter » passe en blanc pour rester le bouton plein */
  [data-mode="nuit"] .cookies{background:rgba(10,15,46,.62);border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.2), 0 22px 50px rgba(0,0,0,.45)}
  [data-mode="nuit"] .cookies::before{background:linear-gradient(145deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 55%)}
  [data-mode="nuit"] .cookies .refuser{background:rgba(255,255,255,.06)}
  [data-mode="nuit"] .cookies .accepter{background:#fff;color:#0a0f2e}
  @media (hover:hover){ [data-mode="nuit"] .cookies .refuser:hover{background:rgba(255,255,255,.14)}
    [data-mode="nuit"] .cookies .accepter:hover{background:var(--aplat-bleu);color:#fff} }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-mode="nuit"] .cookies{background:rgba(10,15,46,.97)} }

  /* ================= le curseur : point et anneau =================
     Planche « Curseur 1 — Point et anneau ». Un point bleu posé au pixel près,
     suivi d'un anneau qui traîne légèrement. L'anneau s'adapte à ce qu'il
     survole : il grossit et se teinte sur un lien comme sur un bouton, affiche
     « Voir » sur une image, se retire sur du texte où le point devient une
     barre ; au clic il se resserre. Seulement à la souris : le script pose
     html.curseur-actif, sans lui la flèche du système reste. */
  @media (hover:hover) and (pointer:fine){
    html.curseur-actif,html.curseur-actif *{cursor:none !important}
  }
  .curseur-pa{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;opacity:0;transition:opacity .25s ease}
  html.curseur-actif .curseur-pa.visible{opacity:1}
  .pa-anneau,.pa-point{position:absolute;left:0;top:0;will-change:transform}
  .pa-anneau{--l:36px;--h:36px;--r:18px;width:var(--l);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--l) / -2);
    border-radius:var(--r);border:1.5px solid var(--bleu);background:transparent;
    display:grid;place-items:center;
    transition:width .4s var(--courbe), height .4s var(--courbe), margin .4s var(--courbe),
               border-radius .4s var(--courbe), background .3s ease, border-color .3s ease, opacity .25s ease, box-shadow .3s ease}
  .pa-point{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--aplat-bleu);
    transition:width .3s var(--courbe), height .3s var(--courbe), margin .3s var(--courbe), border-radius .3s var(--courbe),
               background .25s ease, opacity .2s ease}
  .pa-texte{font:600 15px/1 'Bricolage Grotesque',system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .2s ease;color:#fff}
  .pa-texte svg{display:block;width:22px;height:25px}
  /* sur un lien ou un bouton : l'anneau grossit et se teinte, le texte reste lisible au travers */
  .curseur-pa[data-etat="lien"] .pa-anneau{--l:64px;--h:64px;--r:32px;border-color:transparent;background:rgba(220,227,252,.8);mix-blend-mode:multiply}
  /* sur une image : un disque bleu qui dit « Voir » */
  .curseur-pa[data-etat="image"] .pa-anneau{--l:100px;--h:100px;--r:50px;border-color:transparent;background:var(--aplat-bleu)}
  .curseur-pa[data-etat="image"] .pa-texte{opacity:1}
  .curseur-pa[data-etat="image"] .pa-point{opacity:0}
  /* à glisser ou à attraper, et sur une vidéo : un disque blanc */
  .curseur-pa[data-etat="glisser"] .pa-anneau,.curseur-pa[data-etat="video"] .pa-anneau{--l:100px;--h:100px;--r:50px;border-color:transparent;
    background:#fff;box-shadow:0 6px 24px rgba(18,18,18,.14)}
  .curseur-pa[data-etat="video"] .pa-anneau{--l:96px;--h:96px;--r:48px}
  .curseur-pa[data-etat="glisser"] .pa-texte{opacity:1;color:#121212;font-size:13px}   /* le disque reste blanc, de jour comme de nuit */
  .curseur-pa[data-etat="video"] .pa-texte{opacity:1}
  .curseur-pa .pa-pause{display:none}
  .curseur-pa.lit .pa-pause{display:inline}
  .curseur-pa.lit .pa-jouer{display:none}
  .curseur-pa[data-etat="glisser"] .pa-point,.curseur-pa[data-etat="video"] .pa-point{opacity:0}
  /* sur du texte : l'anneau se retire, le point devient une barre */
  .curseur-pa[data-etat="texte"] .pa-anneau{--l:10px;--h:10px;--r:5px;opacity:0}
  .curseur-pa[data-etat="texte"] .pa-point{width:3px;height:32px;margin:-16px 0 0 -1.5px;border-radius:2px}
  /* sur un fond bleu ou sombre, le curseur passe au blanc */
  .curseur-pa.clair .pa-anneau{border-color:#fff}
  .curseur-pa.clair .pa-point{background:#fff}
  .curseur-pa.clair[data-etat="lien"] .pa-anneau{border-color:transparent;background:rgba(255,255,255,.24);mix-blend-mode:normal}
  .curseur-pa.clair[data-etat="image"] .pa-anneau{background:#fff}
  .curseur-pa.clair[data-etat="image"] .pa-texte{color:#234be9}
  .curseur-pa.clair.presse .pa-anneau{background:rgba(255,255,255,.3)}
  /* au clic : l'anneau se resserre autour du point */
  .curseur-pa.presse .pa-anneau{--l:26px;--h:26px;--r:13px;border-color:transparent;background:rgba(35,75,233,.22)}

  /* le titre est peint dans le canvas — ici il n'existe que pour le SEO et les lecteurs d'écran */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
           overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* le lien d'évitement : caché jusqu'à ce qu'on y arrive au clavier (Tab),
     il mène droit au contenu sans repasser par la barre haute */
  .evitement{position:fixed;left:16px;top:16px;z-index:400;padding:13px 20px;border-radius:999px;
    background:var(--fond-sombre);color:#fff;font:600 14px/1 'Bricolage Grotesque',system-ui,sans-serif;
    text-decoration:none;translate:0 -200%;transition:translate .35s var(--courbe)}
  .evitement:focus-visible{translate:0 0;outline:2px solid var(--bleu);outline-offset:3px}
  #contenu:focus{outline:none}
  /* le filet (voir le script du chargeur) : si le script principal ne démarre
     pas, tout ce qui attendait son apparition se montre, sans animation */
  html.secours :is(.anime,.bloc,.monte,.mot,.plan,.plan > *){opacity:1 !important;transform:none !important;
    translate:none !important;filter:none !important;clip-path:none !important;transition:none !important}
  html.secours :is(main, .bandeau-contact, .pied-page) *{transition:none !important}
  /* l'accueil peint son titre dans la 3D : sans elle, le titre en texte reprend sa place */
  html.secours .hero #titre{position:absolute;left:0;right:0;top:50%;translate:0 -50%;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal;text-align:center;font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(44px, 8.4vw, 128px);line-height:.95;letter-spacing:-0.035em;color:var(--encre)}
  html.secours .hero #titre span{display:block}

  /* ---- barre haute ----
     Elle reste en haut de l'écran pendant tout le défilement, SANS fond. Sur un
     aplat sombre — les éléments marqués data-sombre — le script lui pose
     .sur-sombre et elle passe au blanc ; la couleur est portée par la barre et
     héritée, pour qu'un logo en « color:inherit » suive lui aussi. */
  .nav{position:fixed;z-index:50;top:32px;left:64px;right:64px;display:flex;
       align-items:flex-start;justify-content:space-between;
       color:var(--encre);transition:color .35s ease, translate .5s var(--courbe)}
  .nav.sur-sombre{color:#fff}
  /* sur téléphone, sans fond, la barre chevauchait le texte qui défilait
     dessous : elle s'efface quand on descend et revient dès qu'on remonte */
  .nav.effacee{translate:0 calc(-100% - 40px)}
  .nav .menu{transition:color .35s ease}
  .nav.sur-sombre .menu{color:#fff}
  /* ---- la langue : la courante, et une petite liste qui se déplie ----
     Le bouton hérite de la couleur de la barre (encre, ou blanc sur un aplat
     sombre) ; la liste, elle, est toujours une carte blanche. */
  .langues-haut{position:relative;pointer-events:auto}
  .langue-choix{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;color:inherit;
    font:600 12px 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:0.1em;line-height:1;
    padding:15px 8px;margin:-15px -8px;-webkit-tap-highlight-color:transparent;transition:color .35s ease}
  .langue-choix svg{width:9px;height:6px;transition:rotate .45s var(--courbe)}
  .langue-choix[aria-expanded="true"] svg{rotate:180deg}
  .langue-choix:focus-visible{outline:2px solid var(--bleu);outline-offset:-6px;border-radius:6px}
  /* la liste est à plat : un aplat, un filet, des angles droits, sans ombre ni
     verre. Elle glisse de 4 px en apparaissant, c'est tout. */
  .langues-liste{position:absolute;left:-16px;top:calc(100% + 14px);z-index:2;min-width:180px;list-style:none;margin:0;padding:6px 0;
    color:var(--encre);background:var(--fond);border:1px solid var(--trait);
    opacity:0;visibility:hidden;translate:0 -4px;
    transition:opacity .25s ease, translate .4s var(--courbe), visibility 0s linear .4s}
  .langues-haut.ouvert .langues-liste{opacity:1;visibility:visible;translate:none;transition-delay:0s}
  .langues-liste a,.langues-liste .bientot{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;
    color:inherit;font-size:14px;line-height:18px;transition:background .2s ease}
  /* les langues à venir ont le même aspect, mais ne sont pas encore des liens
     (les lecteurs d'écran entendent « bientôt ») */
  .langues-liste .bientot{cursor:default}
  .langues-liste b{width:20px;font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--gris);transition:color .2s ease}
  .langues-liste a[aria-current] b{color:var(--bleu)}
  .langues-liste a[aria-current]::after{content:'';margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--aplat-bleu)}
  @media (hover:hover){ .langues-liste a:hover{background:var(--surface)} .langues-liste a:hover b{color:var(--encre)} }
  .langues-liste a:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
  .nav.sur-sombre .langues-liste{color:#fff;background:var(--fond-sombre);border-color:rgba(255,255,255,.16)}
  .nav.sur-sombre .langues-liste b{color:var(--gris-clair)}
  .nav.sur-sombre .langues-liste a[aria-current] b{color:var(--bleu-pale)}
  .nav.sur-sombre .langues-liste a[aria-current]::after{background:var(--aplat-bleu-pale)}
  @media (hover:hover){ .nav.sur-sombre .langues-liste a:hover{background:rgba(255,255,255,.08)} .nav.sur-sombre .langues-liste a:hover b{color:#fff} }
  @media (prefers-reduced-motion: reduce){ .langues-liste{translate:none} }
  .nav .menu{padding:14px 10px;margin:-14px -10px}
  /* le logo est centré par left:50% et translateX(-50%) : un rembourrage
     symétrique le laisse au centre, seule la marge du haut compense */
  .nav .logo{padding:10px 8px;margin-top:-10px}
  .logo{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:26px;
        color:inherit;text-decoration:none;
        letter-spacing:-0.035em;line-height:1;display:inline-flex;align-items:baseline;
        position:absolute;left:50%;transform:translateX(-50%)}
  .logo i{font-style:normal;display:inline-block;transform:translateY(-0.30em)}
  /* au survol, le e du logo se soulève, puis se repose en rebondissant une seule
     fois, à peine : un geste retenu, sans écrasement ni second saut */
  .logo:focus-visible i{animation:e-rebond 1s linear}
  @media (hover:hover){ .logo:hover i{animation:e-rebond 1s linear} }
  @keyframes e-rebond{
    0%  { transform:translateY(-0.30em); animation-timing-function:cubic-bezier(.3,0,.2,1) }
    40% { transform:translateY(-0.50em); animation-timing-function:cubic-bezier(.5,0,.5,1) }
    72% { transform:translateY(-0.27em); animation-timing-function:cubic-bezier(.3,0,.3,1) }
    100%{ transform:translateY(-0.30em) }
  }
  @media (prefers-reduced-motion: reduce){ .logo:focus-visible i{animation:none}
  @media (hover:hover){ .logo:hover i{animation:none} } }
  .menu{font-family:'Mona Sans',system-ui,sans-serif;font-weight:500;font-size:15px;
        color:var(--encre);text-decoration:none;display:inline-flex;align-items:baseline;
        pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;
        line-height:1;-webkit-appearance:none;appearance:none}
  .menu:focus{outline:none}
  .menu:focus-visible{outline:2px solid var(--bleu);outline-offset:6px;border-radius:2px}
  /* au repos le e est sur la ligne ; il monte à sa place de logo au survol */
  .menu i{font-style:normal;display:inline-block;transform:translateY(0);
          transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .menu:focus-visible i{transform:translateY(-0.30em)}
  @media (hover:hover){ .menu:hover i{transform:translateY(-0.30em)} }
  /* ================= la FAQ ================= */
  .faq{--k:min(1px, 100vw / 1440);--marge:calc((100% - 1440 * var(--k)) / 2);
    position:relative;background:var(--fond);overflow:clip;width:100%;
    padding:calc(80 * var(--k)) calc(64 * var(--k) + var(--marge)) calc(120 * var(--k))}
  .faq .grille{display:grid;grid-template-columns:calc(976 * var(--k)) calc(280 * var(--k));
    justify-content:space-between}
  /* le surtitre voyage avec la colonne : posé en absolu, il restait accroché au
     haut de la section pendant que le reste collait, et l'écart se creusait */
  .faq .cote{position:sticky;top:calc(96 * var(--k));align-self:start}
  .faq .cote .surtitre{font-weight:600;font-size:max(11px, calc(11 * var(--k)));
    line-height:max(13px, calc(13 * var(--k)));letter-spacing:0.1em;text-transform:uppercase;
    color:var(--bleu);margin-bottom:calc(64 * var(--k))}
  .faq .cote h2{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;
    font-size:calc(56 * var(--k));line-height:calc(60 * var(--k));letter-spacing:-0.035em;
    color:var(--encre)}
  .faq .cote .accroche{margin-top:calc(40 * var(--k));font-weight:600;
    font-size:max(11px, calc(10 * var(--k)));line-height:max(12px, calc(12 * var(--k)));letter-spacing:0.1em;
    text-transform:uppercase;color:var(--mention)}
  /* 4 px de rembourrage : une cible assez haute pour le doigt, la marge le reprend */
  .faq .cote .lien{display:inline-block;margin-top:calc(10 * var(--k) - 4px);padding:4px 0;
    font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;
    font-size:max(17px, calc(20 * var(--k)));line-height:max(22.1px, calc(26 * var(--k)));letter-spacing:-0.03em;
    color:var(--encre);text-decoration:none;position:relative}
  .faq .cote .lien::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .faq .cote .lien:hover::after{transform:scaleX(1);transform-origin:left} }

  /* la planche cale le premier filet à 230, à la hauteur du titre d'à côté */
  .faq .liste{margin-top:calc(150 * var(--k));border-top:1px solid var(--trait)}
  .faq .item{border-bottom:1px solid var(--trait)}
  .faq .item button{display:grid;grid-template-columns:calc(52 * var(--k)) 1fr;
    align-items:start;width:100%;background:none;border:0;padding:calc(26 * var(--k)) 0;
    text-align:left;cursor:pointer;color:var(--encre);font:inherit}
  .faq .item .signe{font-weight:600;font-size:max(17px, calc(20 * var(--k)));line-height:max(25.5px, calc(30 * var(--k)));
    color:var(--gris);transition:color .3s ease}
  .faq .item .q{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;
    font-size:calc(24 * var(--k));line-height:calc(30 * var(--k));letter-spacing:-0.03em;
    transition:color .3s ease}
  .faq .item[data-ouvert="oui"] .signe,.faq .item[data-ouvert="oui"] .q{color:var(--bleu)}
  @media (hover:hover){ .faq .item button:hover .q{color:var(--bleu)} }
  .faq .item button:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
  /* la réponse s'ouvre par une rangée de grille : la hauteur s'anime sans être connue */
  .faq .reponse{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
  .faq .item[data-ouvert="oui"] .reponse{grid-template-rows:1fr}
  .faq .reponse > div{overflow:hidden}
  .faq .reponse p{padding:0 0 calc(26 * var(--k)) calc(52 * var(--k));
    width:calc(760 * var(--k));font-size:max(13.6px, calc(16 * var(--k)));line-height:max(22.9px, calc(27 * var(--k)));
    color:var(--gris)}
  .faq .reponse .aecrire{color:var(--mention);font-style:italic}

  @media (prefers-reduced-motion: reduce){
    .faq .reponse{transition:none}
  }

  /* ============ apparition commune à toutes les sections ============
     Un seul geste pour toute la page : le bloc monte de 22 px en se dénouant
     d'un flou, les éléments d'une même section s'échelonnent de 90 ms, et le
     titre monte derrière une découpe comme celui des réalisations. */
  .anime{opacity:0;transform:translateY(var(--montee));filter:blur(var(--flou));
    transition:opacity var(--duree-o) ease, transform var(--duree-t) var(--courbe),
               filter var(--duree-o) ease}
  .anime.vu{opacity:1;transform:none;filter:none}
  /* le survol des liens soulignés : le trait file vers la droite, puis se
     retrace depuis la gauche. Un geste, pas un trait qui rétrécit */
  @keyframes trait-relance{
    0%  { transform:scaleX(1); transform-origin:right }
    45% { transform:scaleX(0); transform-origin:right }
    46% { transform:scaleX(0); transform-origin:left }
    100%{ transform:scaleX(1); transform-origin:left }
  }
  @keyframes fond-relance{
    0%  { background-size:100% var(--ep,2px); background-position:right bottom }
    45% { background-size:0% var(--ep,2px); background-position:right bottom }
    46% { background-size:0% var(--ep,2px); background-position:left bottom }
    100%{ background-size:100% var(--ep,2px); background-position:left bottom }
  }
  /* Une ligne, un titre : même montée, même flou que le bloc services. Le
     découpage en lignes reste — c'est lui qui échelonne — mais chaque ligne
     monte au lieu de sortir d'un cache. */
  .ligne-masque{display:block}
  .ligne-masque > span,.masque-titre > span{display:block;
    opacity:0;transform:translateY(var(--montee));filter:blur(var(--flou));
    transition:opacity var(--duree-o) ease var(--dl,0s),
               transform var(--duree-t) var(--courbe) var(--dl,0s),
               filter var(--duree-o) ease var(--dl,0s)}
  .vu-section .ligne-masque > span,.vu-section .masque-titre > span{
    opacity:1;transform:none;filter:none}
  @media (prefers-reduced-motion: reduce){
    .anime{transform:none;filter:none}
    .masque-titre > span{transform:none}
  }

  /* ================= le menu ================= */
  .panneau{position:fixed;inset:0;z-index:80;background:var(--fond);color:var(--encre);
    display:flex;flex-direction:column;padding:32px 64px 34px;
    opacity:0;visibility:hidden;overflow-y:auto;overflow-x:hidden;
    transition:opacity .40s ease, visibility 0s linear .40s}
  .panneau.ouvert{opacity:1;visibility:visible;transition:opacity .40s ease}

  .panneau .haut{position:relative;display:flex;align-items:flex-start;
                 justify-content:space-between;padding-bottom:28px}
  /* le logo est déjà centré par un transform : il ne peut pas en porter un second,
     il entre donc en opacité seule */
  .panneau .logo{opacity:0;transition:opacity .7s ease}
  .panneau.ouvert .logo{opacity:1;transition-delay:.05s}
  .panneau .fermer{background:none;border:0;padding:0;cursor:pointer;
    font-family:'Mona Sans',system-ui,sans-serif;font-weight:500;font-size:15px;
    color:var(--encre);position:relative}
  /* la fermeture reçoit le focus à l'ouverture : on ne montre l'anneau qu'au clavier */
  .panneau .fermer:focus{outline:none}
  .panneau .fermer:focus-visible{outline:2px solid var(--bleu);outline-offset:4px;border-radius:2px}
  .panneau .fermer::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .4s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .panneau .fermer:hover::after{transform:scaleX(1);transform-origin:left} }

  /* les filets se tracent à l'ouverture */
  /* portée au panneau : sans ça la règle attrapait aussi le filet du pied de
     page et le réduisait à une largeur nulle */
  .panneau .filet{height:1px;background:var(--trait);transform:scaleX(0);transform-origin:left;
         transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .panneau.ouvert .filet{transform:scaleX(1);transition-delay:var(--t,0s)}

  .panneau .corps{display:grid;grid-template-columns:1fr 300px;gap:76px;
                  padding:52px 0 0;flex:1}

  .metiers{list-style:none}
  .metiers li{display:grid;grid-template-columns:52px 1fr;align-items:start}
  /* de l'air entre les métiers ; il se resserre sur un écran bas, où le menu défile déjà */
  .metiers li + li{margin-top:clamp(6px, 1.9vh, 20px)}
  .metiers .n{font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--bleu);
              padding-top:22px}
  .metiers a{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:44px;
             line-height:59px;letter-spacing:-0.035em;color:var(--encre);text-decoration:none;
             display:block;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
  @media (hover:hover){ .metiers li:hover a{transform:translateX(16px)} }
  @media (hover:hover){ .metiers:hover a{opacity:.38} }
  @media (hover:hover){ .metiers li:hover a{opacity:1} }

  .etiquette{font-weight:600;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
             color:var(--gris)}
  .cote ul{list-style:none;margin-top:14px}
  .cote ul a{font-weight:600;font-size:19px;line-height:35px;color:var(--encre);
             text-decoration:none;position:relative;display:inline-block}
  .cote ul a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .45s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .cote ul a:hover::after{transform:scaleX(1);transform-origin:left} }
  .panneau .cote .filet{margin:30px 0 28px}
  .reseau{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
    font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:21px;
    letter-spacing:-0.025em;color:var(--encre);text-decoration:none}
  .reseau svg{transition:transform .45s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .reseau:hover svg{transform:translate(3px,-3px)} }
  .cote p.note{margin-top:6px;font-size:15px;line-height:22px;color:var(--gris)}
  .cote p.note b{font-weight:600;color:var(--encre)}

  .panneau .pied-menu{padding-top:44px}
  .panneau .pied-menu .filet{margin-top:45px}
  .panneau .adresse{display:flex;align-items:center;justify-content:space-between;gap:32px;
                    margin-top:14px}
  /* L'adresse, telle que la planche la joue : elle est posée deux fois. En
     dessous, la version grise. Au-dessus, la même en encre, dans un cache dont
     la largeur s'ouvre de gauche à droite. Au moment où le balayage découvre le
     e du milieu, celui du dessous s'efface et celui du dessus monte se ranger à
     la hauteur du e du logo. */
  .courriel{position:relative;display:inline-block;white-space:nowrap;
    font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:48px;
    line-height:1;letter-spacing:-0.035em;text-decoration:none;color:var(--gris)}
  .courriel .calque{display:block}
  .courriel .tranche{position:absolute;left:0;top:0;height:100%;width:100%;
    color:var(--encre);clip-path:inset(0 100% 0 0);
    transition:clip-path 2.6s cubic-bezier(.35,0,.15,1)}
  .panneau.ouvert .courriel .tranche{clip-path:inset(0 0 0 0);transition-delay:1.6s}
  .courriel i{font-style:normal;display:inline-block}
  /* le e du calque gris s'efface, celui de l'encre monte de 8,64 px (0,18 em) */
  .courriel .calque:not(.encre) i{transition:opacity .5s cubic-bezier(.35,0,.15,1)}
  .panneau.ouvert .courriel .calque:not(.encre) i{opacity:0;transition-delay:2.83s}
  .courriel .encre i{transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
  .panneau.ouvert .courriel .encre i{transform:translateY(-0.18em);transition-delay:2.83s}
  /* un lien doit se signaler : trait discret au survol, rien de plus */
  .courriel::after{content:'';position:absolute;left:0;right:0;bottom:-.06em;height:3px;
    background:var(--fond-sombre);transform:scaleX(0);transform-origin:right;
    transition:transform .55s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .courriel:hover::after{transform:scaleX(1);transform-origin:left} }
  /* la planche pose la lettre e en bleu, qui tourne sans fin. Ici elle a du
     volume : c'est le même verre que la nuée du héros, dans un canevas à part
     qui ne tourne que menu ouvert. */
  /* le canevas fait 128 px de côté alors que la ligne n'en fait que 48 : sans
     ces marges négatives il gonflerait la rangée et creuserait un trou entre le
     surtitre et l'adresse */
  .e-tourne{flex:0 0 auto;display:block;width:128px;height:128px;margin:-36px 0}
  /* le e du menu est un bouton : il fait passer tout le site en mode nuit, et retour */
  .bascule-nuit{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
  .bascule-nuit canvas{display:block;width:100%;height:100%;pointer-events:none}
  .bascule-nuit:focus-visible{outline:2px solid var(--bleu);outline-offset:4px}
  .panneau .bas-menu{display:flex;align-items:center;justify-content:space-between;
                     gap:24px;padding-top:22px}
  .panneau .bas-menu ul{list-style:none;display:flex;gap:18px}
  .panneau .bas-menu a{font-weight:600;font-size:11px;letter-spacing:0.1em;
    color:var(--gris);text-decoration:none;transition:color .3s ease}
  @media (hover:hover){ .panneau .bas-menu a:hover{color:var(--encre)} }
  /* zones de toucher de 44 px autour des petits liens du panneau, sans rien déplacer */
  .panneau .bas-menu a{position:relative}
  .panneau .bas-menu a::before{content:'';position:absolute;inset:-16px -9px}
  .panneau .fermer::before{content:'';position:absolute;inset:-12px -10px}
  .panneau .logo::before{content:'';position:absolute;inset:-9px -6px}
  .panneau .bas-menu .bientot{font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--gris)}
  .panneau .bas-menu .legal{font-size:13px;color:var(--gris)}
  .panneau .bas-menu .legal a{font-size:13px;letter-spacing:0}

  /* Entrée relevée sur la planche « Menu — écran ouvert » : chaque bloc a sa
     propre course (--y) et son propre instant (--t), tous en cubic-bezier
     (.16,1,.3,1). Les retards ne valent que panneau ouvert, donc la fermeture
     se fait d'un bloc — un menu qui se ferme lentement agace. */
  .panneau .entre{opacity:0;transform:translateY(var(--y,22px));
    transition:opacity .5s ease, transform .82s cubic-bezier(.16,1,.3,1)}
  .panneau.ouvert .entre{opacity:1;transform:none;transition-delay:var(--t,0s)}

  @media (prefers-reduced-motion: reduce){
    .panneau .entre{transform:none;filter:none}
    .courriel .lettre{opacity:1;transform:none;filter:none}
    .panneau .filet{transform:scaleX(1)}
    .courriel .tranche{transition:none}
  }

  @media (max-width:900px){
    .services{padding:80px 24px 100px}
    .services .grille{grid-template-columns:minmax(0,1fr);gap:48px}
    .services .gauche{position:static}
    .services h2{font-size:36px;line-height:40px}
    .services li a{font-size:26px;line-height:30px}
    .nav{left:24px;right:24px;top:22px}
    /* remonté du bord : sur iPhone la barre de Safari mange le bas de l'écran */
    .couche .bas{left:24px;right:24px;bottom:88px;flex-direction:column;align-items:flex-start;gap:28px}
    .chapeau{font-size:16px;line-height:27px}
    .lien{text-align:left}
    .lien a{font-size:24px}

    .panneau{padding:22px 24px 26px}
    .panneau .corps{grid-template-columns:1fr;gap:0;padding-top:30px}
    .metiers li{grid-template-columns:38px 1fr}
    /* serré : un métier sur deux lignes reste un seul bloc ; le padding garde
       la zone de toucher à 40 px */
    .metiers li + li{margin-top:8px}
    .metiers a{font-size:26px;line-height:29px;padding:5px 0}
    .metiers .n{padding-top:13px}
    .cote{margin-top:26px}
    .cote .reseaux{display:flex;gap:18px;align-items:center}
    .cote p.note{display:none}
    /* 22 px : l'adresse, le e en volume et leur écart doivent tenir dans les
       342 px de la colonne, sinon le e vient se poser sur le texte */
    .courriel{font-size:22px}
    .panneau .pied-menu{padding-top:26px}
    /* le e en volume prend trop de place dans une colonne de 342 px */
    .e-tourne{width:68px;height:68px;margin:-14px 0}
    .panneau .adresse{gap:12px}
  }
  /* ================= pied de page ================= */
  .pied-page{--k:min(1px, 100vw / 1440);--marge:calc((100% - 1440 * var(--k)) / 2);
    position:relative;background:var(--papier);width:100%;
    padding:calc(80 * var(--k)) calc(64 * var(--k) + var(--marge)) calc(42 * var(--k))}
  /* Les liens ne descendent pas sous 12,8 px alors que la grille suit l'écran :
     entre 900 et 1440 px, une colonne peut devenir plus étroite que son plus long
     lien. Chaque colonne garde donc sa largeur de maquette, mais s'élargit à son
     contenu plus un blanc ; et la hauteur des colonnes pousse le filet au lieu de
     passer dessous. À 1440 : colonnes 80 → 320, filet à 320, mentions à 366,
     pied de 420, comme la maquette. */
  .pied-page .colonnes{display:grid;
    grid-template-columns:minmax(calc(260 * var(--k)), auto) minmax(calc(260 * var(--k)), auto) minmax(calc(316 * var(--k)), auto) 1fr;
    min-height:calc(240 * var(--k));padding-bottom:max(28px, calc(41 * var(--k)))}
  .pied-page .colonnes > div{padding-right:28px}
  .pied-page .rubrique{font-weight:600;font-size:max(11px, calc(10 * var(--k)));
    line-height:max(12px, calc(12 * var(--k)));letter-spacing:0.1em;text-transform:uppercase;color:var(--mention)}
  .pied-page ul{list-style:none;margin-top:calc(20 * var(--k))}
  .pied-page li{margin-top:calc(10 * var(--k))}
  .pied-page li:first-child{margin-top:0}
  .pied-page li a{font-weight:600;font-size:max(12.8px, calc(15 * var(--k)));line-height:max(15.4px, calc(18 * var(--k)));
    color:var(--encre);text-decoration:none;position:relative;
    /* sur téléphone, « Suchmaschinenoptimierung » est plus large que sa demi-colonne */
    max-width:100%;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:16 8 8;overflow-wrap:break-word}
  .pied-page li a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .4s cubic-bezier(.16,1,.3,1)}
  @media (hover:hover){ .pied-page li a:hover::after{transform:scaleX(1);transform-origin:left} }
  .pied-page .adresse{display:inline-block;margin-top:calc(16 * var(--k));
    font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;
    font-size:calc(26 * var(--k));line-height:calc(31 * var(--k));letter-spacing:-0.035em;
    color:var(--encre);text-decoration:none}
  @media (hover:hover){ .pied-page .adresse:hover{color:var(--bleu)} }
  /* le filet et les mentions suivent les colonnes, dans le flux */
  .pied-page .filet{position:relative;height:1px;background:var(--trait)}
  .pied-page .bas{position:relative;margin-top:calc(45 * var(--k));display:flex;justify-content:space-between;
    font-weight:600;font-size:max(11px, calc(10 * var(--k)));line-height:max(12px, calc(12 * var(--k)));
    letter-spacing:0.1em;text-transform:uppercase;color:var(--mention)}
  .pied-page .bas a{color:inherit;text-decoration:none}
  @media (hover:hover){ .pied-page .bas a:hover{color:var(--encre)} }
  .pied-page .bas .langues{display:flex;gap:calc(14 * var(--k))}
  .pied-page .bas .bientot,.panneau .bas-menu .bientot{cursor:default}

  /* la tour de e : chaque lettre est posée par son encre, jamais par sa boîte
     de texte, sinon elle flotte au-dessus du sol ou s'y enfonce */
  /* Le canevas couvre tout le pied et reste DERRIÈRE le texte : son fond est
     blanc — il le faut, le verre a besoin de quelque chose à réfracter — et
     comme le pied est blanc lui aussi, on ne le voit pas. Une lettre lancée
     dans les colonnes passe donc derrière les liens. */
  .tour{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
  /* Le pied est un papier : un gris très clair et le même grain que le bleu des
     services et le fond du blog. Sur un fond clair, le fondu « superposé » de
     ces deux-là ne laisserait rien voir : ici le grain est en « produit », très
     dilué, et c'est lui qui assombrit à peine le papier par endroits.
     Le bruit du site est trop doux pour un fond clair — à peine 1,4 niveau
     d'écart sur 255, invisible : on en triple le contraste dans le SVG même
     (feComponentTransfer), ce qui permet de le diluer à 12 % sans griser le
     papier. Il passe AU-DESSUS du canevas de la tour, qui est opaque — sinon il
     serait caché —, et SOUS le texte, qui reste net : les lettres de verre
     prennent le grain comme le reste du papier. */
  .pied-page{--papier:#fdfdfc}
  .pied-page::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
    opacity:.12;mix-blend-mode:multiply}
  .pied-page .colonnes{position:relative;z-index:1}
  .pied-page .filet,.pied-page .bas{z-index:1}
  .pied-page.attrape{cursor:grab}
  .pied-page.tient{cursor:grabbing}

  @media (max-width:900px){
    .pied-page{--k:1px;--marge:0px;width:auto;height:auto;padding:60px 24px 40px}
    /* minmax(0,1fr) et non 1fr : l'adresse en 26 px impose sa largeur minimale
       à sa colonne et fait déborder la grille */
    .pied-page .colonnes{grid-template-columns:repeat(2, minmax(0,1fr));gap:34px;min-height:0;padding-bottom:0}
    .pied-page .colonnes > div{padding-right:0}
    .pied-page .colonnes > div:last-child{grid-column:1 / -1}
    .pied-page .adresse{font-size:22px;line-height:27px}
    /* position:relative et non static : le canevas de la tour est positionné et
       opaque, et dans l'ordre de peinture il passe AU-DESSUS des éléments restés
       dans le flux. Le filet et les mentions disparaissaient derrière lui. */
    .pied-page .filet{position:relative;z-index:1;top:auto;left:auto;
      width:auto;margin-top:46px}
    .pied-page .bas{position:relative;z-index:1;top:auto;left:auto;right:auto;
      margin-top:32px;flex-direction:column;align-items:center;text-align:center;gap:24px}
    /* au doigt : chaque lien occupe tout son pas de liste (28 px), sans
       empiéter sur le voisin ; les petites capitales passent de 10 à 11 px */
    .pied-page li a{display:inline-block;padding:5px 0;margin:-5px 0}
    .pied-page .rubrique,.pied-page .bas{font-size:11px;line-height:14px}
    .pied-page .bas .langues{gap:12px;justify-content:center}
    .pied-page .bas .langues a,.pied-page .bas .langues .bientot{padding:12px 8px;margin:-12px 0}
    .pied-page .bas p a{display:inline-block;padding:10px 0;margin:-10px 0}
    /* les mentions, l'une sous l'autre et centrées ; leurs points de séparation,
       du texte nu entre les liens, s'effacent (corps et interligne à zéro) */
    .pied-page .bas p:not(:last-child){display:flex;flex-direction:column;align-items:center;font-size:0;line-height:0}
    .pied-page .bas p:not(:last-child) > *{font-size:11px;line-height:14px;padding:8px 0;margin:0}
  }

  /* « Nos autres services », au pied des pages services (outils/autres.py) :
     cinq cartes à plat, une par métier, sur les aplats de la marque (grain sur
     les couleurs). Le nom en grand en bas, la flèche en haut. Au survol, la
     carte monte d'un cran et la flèche file vers le coin. */
  .maillage > h2{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-0.035em;
                 font-size:calc(38 * var(--k));line-height:calc(44 * var(--k))}
  .autres{list-style:none;margin-top:calc(32 * var(--k));display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:calc(16 * var(--k))}
  .a-carte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:calc(340 * var(--k));min-height:250px;
           padding:calc(26 * var(--k));text-decoration:none;transition:translate .6s var(--courbe)}
  .a-bleu{background:var(--aplat-bleu);color:var(--sur-sombre)}
  .a-encre{background:var(--fond-sombre);color:var(--sur-sombre)}
  .a-pale{background:var(--aplat-bleu-pale);color:var(--encre)}
  .a-gris{background:var(--surface);color:var(--encre)}
  .a-nom{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-0.035em;
         font-size:max(19px, calc(26 * var(--k)));line-height:1.08;hyphens:auto;-webkit-hyphens:auto}
  /* un écran moyen : trois cartes, puis deux plus larges — la rangée reste pleine */
  @media (min-width:901px) and (max-width:1180px){
    .autres{grid-template-columns:repeat(6, minmax(0, 1fr))}
    .autres li{grid-column:span 2}
    .autres li:nth-child(n+4){grid-column:span 3}
  }
  .a-desc{margin-top:calc(12 * var(--k));font-size:max(12.8px, calc(14 * var(--k)));line-height:max(19.6px, calc(22 * var(--k)));color:var(--gris)}
  .a-bleu .a-desc{color:var(--bleu-pale)}
  .a-encre .a-desc{color:var(--gris-clair)}
  .a-fleche{position:absolute;top:calc(22 * var(--k));right:calc(24 * var(--k));
            font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:max(20px, calc(26 * var(--k)));line-height:1;
            transition:translate .6s var(--courbe)}
  /* L'entrée : chaque carte se dévoile de bas en haut, l'une après l'autre (le
     --r de l'apparition commune), puis son nom, sa description et sa flèche
     montent se poser. */
  .autres .a-carte{clip-path:inset(100% 0 0 0);
    transition:clip-path .95s cubic-bezier(.65,0,.35,1) var(--r,0s), translate .6s var(--courbe)}
  .autres .vu .a-carte{clip-path:inset(0 0 0 0)}
  .a-nom,.a-desc,.a-fleche{opacity:0;translate:0 16px;
    transition:opacity .6s ease var(--dd), translate .9s var(--courbe) var(--dd), color .45s ease}
  .a-nom{--dd:calc(var(--r,0s) + .45s)} .a-desc{--dd:calc(var(--r,0s) + .53s)} .a-fleche{--dd:calc(var(--r,0s) + .6s)}
  .autres .vu .a-nom,.autres .vu .a-desc,.autres .vu .a-fleche{opacity:1;translate:none}
  /* Le survol : seule la flèche prend la couleur, et file vers le coin ; la
     carte ne change pas de teinte. */
  .a-fleche{color:inherit}
  @media (hover:hover){
    .a-carte:hover{translate:0 calc(-6 * var(--k))}
    .autres .vu .a-carte:hover .a-fleche{translate:5px -5px;--dd:0s}
    .a-encre:hover .a-fleche,.a-pale:hover .a-fleche,.a-gris:hover .a-fleche{color:var(--bleu)}
    .a-bleu:hover .a-fleche{color:var(--encre)}
  }
  .a-carte:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
  @media (prefers-reduced-motion: reduce){
    .autres .a-carte{clip-path:none}
    .a-nom,.a-desc,.a-fleche{opacity:1;translate:none}
  }
  @media (max-width:900px){
    .maillage > h2{font-size:28px;line-height:32px}
    .autres{margin-top:22px;grid-template-columns:1fr;gap:10px}
    .a-carte{height:auto;min-height:140px;padding:20px}
    .a-nom{font-size:19px}
    .a-desc{margin-top:8px;font-size:13px;line-height:19px}
    .a-fleche{top:16px;right:16px;font-size:20px}
  }
  /* ================= le défilé =================
     Le même bandeau partout : « Ils nous font confiance » sur l'accueil, « Les
     outils du quotidien » sur la page du studio. Un aplat (bleu ou encre), le
     surtitre, puis les noms en grand séparés par un e, qui glissent sans fin et
     s'arrêtent au survol. La liste est écrite deux fois et le rang parcourt
     exactement une longueur : c'est cette égalité qui rend le raccord invisible.
     La durée est posée par le script, pour que les deux avancent à la même
     vitesse quelle que soit la longueur de leur liste. */
  .defilement{--k:min(1px, 100vw / 1440);--marge:calc((100% - 1440 * var(--k)) / 2);
    position:relative;width:100%;overflow:clip;background:var(--teinte);color:#fff;
    padding:calc(64 * var(--k)) 0 calc(70 * var(--k))}
  .defilement.teinte-bleue{--teinte:var(--aplat-bleu);--separateur:var(--bleu-pale)}
  .defilement.teinte-encre{--teinte:var(--fond-sombre);--separateur:var(--bleu)}
  .defilement .surtitre{margin-left:calc(64 * var(--k) + var(--marge));font-weight:600;
    font-size:max(11px, calc(11 * var(--k)));line-height:max(13px, calc(13 * var(--k)));letter-spacing:0.1em;
    text-transform:uppercase;color:var(--bleu-pale)}
  /* le défilé glisse par translate : la montée d'apparition (transform) s'y ajoute sans le couper */
  .defile{margin-top:calc(53 * var(--k));display:flex;width:max-content;
    animation:defile var(--duree-defile, 40s) linear infinite}
  @media (hover:hover){ .defilement:hover .defile{animation-play-state:paused} }
  .defile ul{display:flex;list-style:none;gap:calc(36 * var(--k));padding-right:calc(36 * var(--k))}
  .defile li{font-family:'Mona Sans',system-ui,sans-serif;font-weight:800;font-size:calc(64 * var(--k));
    line-height:calc(70 * var(--k));letter-spacing:-0.035em;white-space:nowrap}
  .defile li.sep{color:var(--separateur);letter-spacing:0}
  /* le e qui sépare les noms tourne sur lui-même, à plat, comme une roue : il
     passe la tête en bas et revient. Il tourne autour du centre de son dessin
     (50,5 % de sa largeur, 61 % de sa ligne), pas de sa boîte : sinon il vacille */
  .defile li.sep{transform-origin:50.5% 61%;animation:e-sur-soi 3.2s linear infinite}
  @media (hover:hover){ .defilement:hover .defile li.sep{animation-play-state:paused} }
  @keyframes e-sur-soi{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
  @keyframes defile{ to{ translate:-50% 0 } }
  @media (prefers-reduced-motion: reduce){ .defile,.defile li.sep{animation:none} }
  @media (max-width:900px){
    .defilement{--k:1px;--marge:0px;padding:44px 0 50px}
    .defilement .surtitre{margin-left:24px;font-size:11px;line-height:14px}
    .defile{margin-top:28px}
    .defile li{font-size:40px;line-height:46px}
  }
  /* ================= les lecteurs vidéo =================
     Deux petites commandes rondes en bas à droite de chaque vidéo : lecture et
     son. Verre sombre, pour se lire sur une image claire comme sur une sombre. */
  .lv{position:relative;width:100%;height:100%}
  .lv-commandes{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;gap:6px;pointer-events:auto}
  .lv-bouton{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
    background:rgba(18,18,18,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .3s ease, scale .35s var(--courbe)}
  .lv-bouton svg{width:14px;height:14px;fill:currentColor}
  .lv-bouton .trait{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  @media (hover:hover){ .lv-bouton:hover{background:rgba(18,18,18,.82)} }
  .lv-bouton:active{scale:.9}
  .lv-bouton:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .lv-play,.lv-sonore{display:none}
  .lv.en-pause .lv-play,.lv.sonore .lv-sonore{display:block}
  .lv.en-pause .lv-pause,.lv.sonore .lv-muet{display:none}
  /* ================= la transition vers une réalisation ================= */
  @view-transition{navigation:auto}
  ::view-transition-group(visuel-projet){animation-duration:1.15s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  ::view-transition-old(visuel-projet),::view-transition-new(visuel-projet){
    width:100%;height:100%;object-fit:cover;animation-duration:1.15s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.7s}
  /* ce qui vient d'atterrir ne rejoue pas son entrée */
  .sans-entree,.sans-entree *{transition:none !important}
  @media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} }