/* =====================================================================
   R&D COVENANT : page d'accueil
   Direction retenue : Aura, en bleu, tout en capitales, police Jost.
   Le nom : graisse 290, espacement 0,5, taille 75 % (soit 9,717 % de la
   largeur de l'écran ; il en occupe 84,5 %).

   1. Police et réglages     2. Base, pointeur, boutons   3. En-tête et menu
   4. Ouverture              5. Dans l'ombre              6. Nos métiers
   7. Notre méthode          8. Nos engagements           9. Contact
   10. Pied de page          11. Mouvement                12. Petits écrans
   13. Sans carte graphique, sans script, mouvement réduit
   ===================================================================== */

/* ---------- 1. Police et réglages ---------- */
@font-face{
  font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@property --trk{syntax:'<number>';inherits:true;initial-value:.5}

:root{
  /* Aura bleue */
  --glace:#E0F3FD; --ciel:#A2E1FC; --azur:#5FC1F5; --bleu:#0F4AC6; --nuit:#0A1038; --encre:#071038; --blanc:#F4FBFF;
  --encre-2:rgba(7,16,56,.76);
  --orbe:radial-gradient(closest-side,#0A1038 0,#0B1E84 22%,#0F4AC6 40%,#2C8ADF 56%,#5FC1F5 68%,#A2E1FC 80%,rgba(224,243,253,0) 100%);
  --orbe-claire:radial-gradient(closest-side,#fff 0,#E0F3FD 20%,#A2E1FC 38%,#5FC1F5 54%,#2C8ADF 68%,rgba(15,74,198,.7) 82%,rgba(10,16,56,0) 100%);
  /* typographie */
  --police:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fin:290;                    /* la graisse du nom et des grands titres */
  /* mise en page */
  --marge:clamp(20px,3.6vw,60px);
  --gout:clamp(12px,1.6vw,28px);
  --tete-h:clamp(62px,9svh,88px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--glace);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html.menu-ouvert{overflow:hidden}
body{margin:0;min-height:100svh;font-family:var(--police);font-weight:400;font-size:clamp(17px,1.22vw,19px);line-height:1.65;color:var(--encre);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--encre);color:var(--glace)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bleu);outline-offset:4px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.mot{white-space:nowrap;font-kerning:none}                    /* les lettres des grands titres, mises à part (la loupe de la souris) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.evite{position:fixed;z-index:40;left:16px;top:-80px;padding:12px 16px;background:var(--blanc);color:var(--encre);box-shadow:0 0 0 1px rgba(7,16,56,.3);font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;transition:top .3s}
.evite:focus{top:16px}

#aura{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
main,.pied{position:relative;z-index:1}
/* le voile : un fondu de lumière pendant les longs trajets dans la page */
.voile{position:fixed;inset:0;z-index:10;background:var(--glace);opacity:0;pointer-events:none;transition:opacity .75s ease}
.voile.la{opacity:1;transition-duration:.3s}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gout);max-width:1760px;margin-inline:auto}

/* les titres de section : capitales fines, très espacées, comme le nom */
.titre-2{font-weight:var(--fin);font-size:clamp(25px,3.5vw,58px);line-height:1.32;letter-spacing:.5em;text-transform:uppercase;text-wrap:balance}
.chapeau{margin-top:clamp(20px,3.2svh,36px);max-width:46ch;font-size:clamp(18px,1.45vw,22px);line-height:1.6;color:var(--encre-2)}

/* la lentille : un texte qui passe au blanc là où un orbe sombre se trouve derrière lui
   (le script indique où est l'orbe : --ox, --oy, et son rayon --or) */
.lentille{--ton:var(--encre);color:transparent;
  background:radial-gradient(circle var(--or,0px) at var(--ox,0px) var(--oy,0px),#fff 0,#fff var(--l1,56%),var(--ton) var(--l2,66%));
  -webkit-background-clip:text;background-clip:text}      /* le découpage vient après le fond, sinon il est effacé */
/* pour les petits textes, le passage du blanc au bleu nuit est franc : une lettre n'est jamais grise */
.devise{--l1:52%;--l2:52.8%}

/* le pointeur : un cercle avec un point dedans */
html.a-pointeur,html.a-pointeur *{cursor:none!important}
html.a-pointeur :is(input,textarea,select){cursor:text!important}
.pointeur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;color:var(--encre);opacity:0;transition:opacity .3s ease,color .35s ease}
.pointeur.la{opacity:1}
.pointeur.sur-nuit{color:#fff}
.pointeur i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.pointeur-point{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:currentColor}
.pointeur-cercle{width:38px;height:38px;margin:-19px 0 0 -19px;box-shadow:inset 0 0 0 calc(1px / var(--s,1)) currentColor}

/* l'appel : le seul bouton du site. Des lettres, et un cercle avec un point, qui devient un orbe au survol. */
.appel{display:inline-flex;align-items:center;gap:clamp(12px,1.05vw,18px);margin:0;padding:4px 0;border:0;background:none;color:inherit;cursor:pointer;white-space:nowrap;
  font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:1;text-transform:uppercase}
.appel-mot{--trk:.3;letter-spacing:calc(var(--trk) * 1em);transition:--trk 1s var(--ease)}
.appel-rond{position:relative;flex:none;width:clamp(34px,2.7vw,42px);aspect-ratio:1}
.appel-rond::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:.5;transition:opacity .5s ease,transform .9s var(--ease)}        /* le cercle */
.appel-rond i{position:absolute;inset:-20%;border-radius:50%;background:var(--orbe);opacity:0;transform:scale(.3);transition:opacity .5s ease,transform .9s var(--ease)}                 /* l'orbe, au survol */
.appel-rond::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor;transition:background-color .4s ease,transform .9s var(--ease)}   /* le point */
.appel:hover .appel-mot,.appel:focus-visible .appel-mot{--trk:.38}
.appel:hover .appel-rond i,.appel:focus-visible .appel-rond i{opacity:1;transform:scale(1)}
.appel:hover .appel-rond::before,.appel:focus-visible .appel-rond::before{opacity:0;transform:scale(1.35);animation:none}
.appel:hover .appel-rond::after,.appel:focus-visible .appel-rond::after{background:#fff;transform:scale(1.3)}
.appel:active .appel-rond{transform:scale(.94)}
.appel--grand{font-size:clamp(11px,.86vw,13.5px);gap:clamp(14px,1.3vw,22px)}
.appel--grand .appel-rond{width:clamp(44px,3.6vw,56px)}
/* sur la nuit, l'orbe du bouton est clair au cœur */
:is(.sur-nuit,.menu) .appel-rond i{background:var(--orbe-claire)}
:is(.sur-nuit,.menu) .appel:hover .appel-rond::after,:is(.sur-nuit,.menu) .appel:focus-visible .appel-rond::after{background:var(--encre)}

/* ---------- 3. En-tête : pas de boîte, seulement des lettres et de la lumière ---------- */
.tete{position:fixed;z-index:20;left:0;right:0;top:0;height:var(--tete-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;padding-inline:var(--marge);
  font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--encre);pointer-events:none}
/* ce qui passe sous l'en-tête se fond dans un flou, sans bord */
.tete::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--tete-h) + 44px);z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 42%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 42%,transparent 100%)}
.tete>*{pointer-events:auto;transition:color .45s ease}
.tete .sur-nuit{color:#fff}                       /* chaque partie passe au blanc quand la nuit est derrière elle */

.tete-marque{justify-self:start;display:inline-flex;align-items:center;gap:clamp(10px,1vw,15px)}
.tete-nom{font-weight:400;font-size:clamp(11.5px,.92vw,14px);letter-spacing:.34em;white-space:nowrap}

.tete-liens{display:flex;gap:clamp(22px,3.4vw,56px);white-space:nowrap}
.tete-liens a{position:relative;padding:14px 0;opacity:.74;transition:opacity .35s ease}
.tete-liens a:hover,.tete-liens a[aria-current="true"]{opacity:1}
/* au survol, une lueur vient sous le mot */
.tete-liens a::before{content:"";position:absolute;left:-26px;right:-26px;top:-6px;bottom:-6px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,193,245,.5),rgba(95,193,245,0));opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .8s var(--ease)}
.tete-liens a:hover::before{opacity:1;transform:scale(1)}
/* la section en cours : un point de lumière sous son nom */
.tete-liens a::after{content:"";position:absolute;left:calc(50% - .15em);bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px 1px currentColor;opacity:0;transform:scale(0);transition:transform .7s var(--ease),opacity .4s ease}
.tete-liens a[aria-current="true"]::after{opacity:1;transform:scale(1)}

.tete-droite{justify-self:end;display:flex;align-items:center;gap:22px}
.tete-menu{display:none}

/* le menu des petits écrans : la nuit tombe sur la page */
.menu{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7svh;padding:16svh var(--marge) 8svh;color:#fff;
  background:rgba(8,13,48,.9);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.menu[hidden]{display:none}
.menu-liens{display:grid;gap:3.4svh;text-align:center}
.menu-liens a{font-weight:var(--fin);font-size:clamp(19px,5.6vw,30px);letter-spacing:.5em;text-indent:.5em;text-transform:uppercase}

/* ---------- 4. Ouverture ---------- */
.hero{position:relative;height:190svh;--d:min(86svh,62vw)}
.hero-fixe{position:sticky;top:0;height:100svh;overflow:hidden;--p:0}
.hero-orbe{position:absolute;left:50%;top:47%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%}   /* le repère de l'orbe : la lumière vivante s'y dessine */
.marque-bloc{position:absolute;left:0;right:0;top:47%;transform:translateY(-50%);display:flex;justify-content:center;opacity:calc((1 - var(--p)) * 4.4)}
@supports not (text-box-trim:trim-both){.marque{line-height:.86;padding-block:0}}
.marque{--trk:.5;white-space:nowrap;text-transform:uppercase;font-weight:var(--fin);font-size:min(9.717vw,28.9svh);line-height:1;
  letter-spacing:calc(var(--trk) * 1em);margin-right:calc(var(--trk) * -1em);
  padding-block:.08em;text-box:trim-both cap alphabetic;
  background:radial-gradient(circle var(--or,calc(var(--d) / 2)) at calc(50% - var(--trk) * .5em + var(--odx,0px)) calc(50% + var(--ody,0px)),#fff 0,#fff 58%,var(--encre) 67%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.devise{position:absolute;left:0;right:0;top:100%;margin-top:max(10px,2.6svh);padding:0 var(--marge) 0 calc(var(--marge) + .34em);text-align:center;text-wrap:balance;
  font-weight:500;font-size:clamp(10.5px,.92vw,15px);line-height:2;letter-spacing:.34em;text-transform:uppercase;opacity:calc(1.5 - var(--p) * 3.6)}
.hero-bas{position:absolute;left:var(--marge);right:var(--marge);bottom:max(18px,4.6svh);display:flex;align-items:flex-end;justify-content:space-between;gap:3vw;opacity:calc(1 - var(--p) * 4.2)}
.hero-bas.parti{pointer-events:none}
.hero-texte{max-width:33vw;font-weight:500;font-size:clamp(10px,.78vw,13px);line-height:1.8;letter-spacing:.11em;text-transform:uppercase}

/* ---------- 5. Dans l'ombre : la grande phrase ---------- */
.ombre{position:relative;padding:26svh var(--marge) 34svh;color:#fff}
.dit{grid-column:2 / span 10;font-weight:var(--fin);font-size:clamp(23px,4.3vw,72px);line-height:1.5;letter-spacing:.3em;text-transform:uppercase;text-wrap:balance}
.dit>span{display:inline-block;opacity:clamp(.14,calc((var(--q,1) * var(--nq,12) - var(--i,0)) * .9),1);transition:opacity .2s linear}
.ombre-texte{grid-column:2 / span 7;margin-top:8svh;max-width:45ch;font-size:clamp(18px,1.5vw,23px);line-height:1.6;color:rgba(255,255,255,.86)}

/* ---------- 6. Nos métiers : un seul écran. Le jour se lève derrière cinq mots ; on les survole. ---------- */
.metiers{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--tete-h) + 1svh) var(--marge) 23svh}
.metiers-liste{display:flex;flex-direction:column;align-items:center}
.metier h3{font:inherit;line-height:0}
/* chaque mot est blanc tant que le bleu est derrière lui, et bleu nuit dès que le jour l'atteint (le script lit la lumière) */
.metier-nom{--trk:.34;appearance:none;-webkit-appearance:none;display:block;margin:0;border:0;border-radius:0;background:none;cursor:pointer;white-space:nowrap;font-family:inherit;
  font-weight:var(--fin);font-size:min(5vw,8.2svh);line-height:1;text-transform:uppercase;letter-spacing:calc(var(--trk) * 1em);
  padding:.21em 0 .21em calc(var(--trk) * 1em);opacity:.56;color:var(--encre);
  transition:--trk 1.1s var(--ease),opacity .6s ease,color .8s ease}
.metier-nom.sur-nuit{color:#fff}
.metier.actif .metier-nom{--trk:.46;opacity:1}                                /* le métier choisi « expire » : ses lettres s'écartent */
.metier-nom:focus-visible{outline-offset:0}
.metier-bas{position:absolute;left:var(--marge);right:var(--marge);bottom:max(20px,5.2svh);display:flex;align-items:flex-end;justify-content:space-between;gap:4vw;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s ease,transform .8s var(--ease)}
.metier.actif .metier-bas{opacity:1;transform:none;pointer-events:auto;transition-delay:.14s}
.metier-texte{max-width:33ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6}
.metier-detail{flex:none;text-align:right;font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:2.3;letter-spacing:.22em;margin-right:-.22em;text-transform:uppercase;color:var(--encre-2)}
/* au centre, en bas : où l'on en est. Le trait du métier en cours se remplit, puis on passe au suivant. */
.metiers-repere{position:absolute;left:50%;bottom:max(20px,5.2svh);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px}
.metiers-sur{font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:1;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;white-space:nowrap}
.pas{display:flex;gap:8px}
.pas i{position:relative;display:block;width:22px;height:2px;border-radius:2px;overflow:hidden;background:rgba(7,16,56,.22);transition:width .8s var(--ease)}
.pas i.actif{width:52px}
.pas i::after{content:"";position:absolute;inset:0;background:var(--encre);transform-origin:left center;transform:scaleX(0)}
.pas i.actif::after{transform:scaleX(var(--prog,0))}

/* ---------- 7. Notre méthode : l'orbe est la souris ; les lettres passent au blanc sous lui ---------- */
.methode{position:relative;padding:22svh var(--marge) 14svh}
.methode-tete{grid-column:2 / span 9}
.volets{display:flex;height:max(520px,70svh);max-width:1760px;margin:clamp(40px,8svh,96px) auto 0;border-left:1px solid rgba(7,16,56,.16)}
.volet{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-right:1px solid rgba(7,16,56,.16);cursor:pointer;transition:flex-grow 1.2s var(--ease)}
.volet.actif{flex-grow:3.2}
.volet:focus-visible{outline-offset:-2px}
/* le lever de jour : il monte du bas du volet ouvert, le même dégradé que l'écran des métiers */
.v-jour{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(30%);transition:opacity 1.1s ease,transform 1.6s var(--ease);
  background:radial-gradient(130% 75% at 50% 112%,#0A1038 0,#0B1E84 18%,#0F4AC6 36%,#2C8ADF 52%,#5FC1F5 66%,rgba(162,225,252,.6) 80%,rgba(224,243,253,0) 100%)}
.volet.actif .v-jour{opacity:1;transform:none}
.v-num{position:absolute;left:clamp(16px,1.8vw,30px);top:clamp(18px,2.6svh,30px);font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:1;letter-spacing:.34em}
/* fermé : le nom, debout ; ouvert : le nom couché en blanc, et son texte */
.v-debout{position:absolute;left:clamp(14px,1.6vw,28px);bottom:clamp(20px,3svh,34px);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-weight:var(--fin);font-size:clamp(22px,2.4vw,44px);line-height:1;letter-spacing:.3em;text-transform:uppercase;transition:opacity .5s ease}
.volet.actif .v-debout{opacity:0}
.v-ouvert{position:absolute;left:clamp(22px,2.6vw,46px);right:clamp(22px,2.6vw,46px);bottom:clamp(24px,4svh,48px);color:#fff;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .5s ease,transform 1s var(--ease)}
.volet.actif .v-ouvert{opacity:1;transform:none;transition-delay:.35s}
.v-titre{--trk:.2;font-weight:var(--fin);font-size:clamp(28px,3.4vw,64px);line-height:1.15;letter-spacing:calc(var(--trk) * 1em);text-transform:uppercase;white-space:nowrap;transition:--trk 1.6s var(--ease) .35s}
.volet.actif .v-titre{--trk:.3}
.v-ouvert p{max-width:34ch;margin-top:16px;color:rgba(255,255,255,.86)}
/* en dessous : où l'on en est. Le trait de l'étape ouverte se remplit, puis la suivante s'ouvre. */
.methode-pas{display:flex;gap:8px;justify-content:center;margin-top:clamp(20px,4svh,40px)}
.methode-pas i{position:relative;display:block;width:22px;height:2px;border-radius:2px;overflow:hidden;background:rgba(7,16,56,.22);transition:width .8s var(--ease)}
.methode-pas i.actif{width:52px}
.methode-pas i::after{content:"";position:absolute;inset:0;background:var(--encre);transform-origin:left center;transform:scaleX(0)}
.methode-pas i.actif::after{transform:scaleX(var(--prog,0))}

/* ---------- 8. Nos engagements : une scène qui reste en place ; quatre promesses passent une à une,
   pendant que la lumière descend du blanc vers la nuit ---------- */
/* sans script ou en mouvement réduit : une liste */
.engagements{position:relative;padding:18svh var(--marge)}
.eng-sur{margin-bottom:12svh;padding-left:.42em;text-align:center;font-weight:500;font-size:clamp(10.5px,.86vw,13.5px);line-height:1;letter-spacing:.42em;text-transform:uppercase;transition:color .8s ease}
.eng{display:grid;grid-template-columns:1fr 1fr;gap:12svh 6vw;max-width:1300px;margin-inline:auto}
.eng-item{text-align:center;color:var(--encre);transition:color .8s ease}
.eng-num{padding-left:.42em;font-weight:500;font-size:clamp(10.5px,.86vw,13.5px);line-height:1;letter-spacing:.42em}
.eng-num::after{content:"";display:block;width:1px;height:clamp(26px,5svh,58px);margin:clamp(14px,2.4svh,26px) auto clamp(18px,3svh,32px);background:currentColor;opacity:.36}   /* un trait fin relie le numéro à la promesse */
.eng-titre{--trk0:.26;font-weight:var(--fin);font-size:clamp(24px,2.9vw,46px);line-height:1.24;text-transform:uppercase;
  letter-spacing:calc((var(--trk0) + var(--dtrk,0)) * 1em);text-indent:calc((var(--trk0) + var(--dtrk,0)) * 1em)}
.eng-titre>span{display:block;white-space:nowrap}
.eng-texte{max-width:30ch;margin:clamp(18px,3.4svh,34px) auto 0;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--encre-2)}
.engagements .sur-nuit{color:#fff;--encre-2:rgba(244,251,255,.8)}
/* avec le script : la scène */
.js:not(.reduit) .engagements{height:380svh;padding:0}
.js:not(.reduit) .eng-scene{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
.js:not(.reduit) .eng-sur{position:absolute;left:0;right:0;top:calc(var(--tete-h) + 5svh);margin:0}
.js:not(.reduit) .eng{display:block;max-width:none}
.js:not(.reduit) .eng-item{position:absolute;left:var(--marge);right:var(--marge);top:52%;transform:translate3d(0,calc(-50% + var(--y,0px)),0);opacity:0;visibility:hidden;will-change:transform,opacity}
.js:not(.reduit) .eng-titre{font-size:clamp(36px,6.3vw,124px);line-height:1.2}
.js:not(.reduit) .eng-texte{font-size:clamp(17px,1.4vw,22px)}
/* en bas : un cercle avec un point par promesse ; celui de la promesse en cours est plein */
.eng-pas{position:absolute;left:50%;bottom:max(20px,5.5svh);transform:translateX(-50%);display:flex;gap:6px;color:var(--encre);transition:color .8s ease}
.eng-pas button{position:relative;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.eng-pas button::before{content:"";position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:.3;transform:scale(.62);transition:opacity .6s ease,transform .9s var(--ease)}
.eng-pas button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor;opacity:.45;transform:scale(.7);transition:opacity .6s ease,transform .9s var(--ease)}
.eng-pas button:hover::before{opacity:.6;transform:scale(.8)}
.eng-pas button.actif::before{opacity:.9;transform:scale(1)}
.eng-pas button.actif::after{opacity:1;transform:scale(1)}

/* ---------- 9. Contact : dans le bleu profond ---------- */
.contact,.pied{color:#fff;--encre-2:rgba(244,251,255,.74)}
:is(.contact,.pied) :focus-visible{outline-color:var(--ciel)}
.contact{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24svh var(--marge) 12svh;text-align:center}
.contact-titre{font-weight:var(--fin);font-size:clamp(20px,4.4vw,76px);line-height:1.34;text-transform:uppercase}
.contact-titre>span{display:block;white-space:nowrap;--trk:.5;letter-spacing:calc(var(--trk) * 1em);text-indent:calc(var(--trk) * 1em)}
.contact-bloc{width:min(820px,100%)}
.contact .chapeau{margin-inline:auto}

.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.6svh,36px) clamp(18px,2vw,32px);margin-top:clamp(40px,8svh,84px);text-align:left}
.champ--large,.form-bas,.form-etat{grid-column:1 / -1}
.champ label{display:block;font-weight:500;font-size:clamp(11px,.8vw,12.5px);line-height:1.4;letter-spacing:.24em;text-transform:uppercase}
.champ input,.champ textarea{display:block;width:100%;margin-top:6px;padding:10px 0 12px;border:0;border-bottom:1px solid rgba(244,251,255,.4);caret-color:var(--ciel);border-radius:0;background:transparent;
  font-size:clamp(17px,1.3vw,20px);line-height:1.5;resize:none;transition:border-color .3s,box-shadow .3s}
.champ textarea{min-height:5.8em;field-sizing:content}                      /* la zone grandit avec le texte */
.champ input:focus-visible,.champ textarea:focus-visible{outline:none;border-bottom-color:var(--ciel);box-shadow:0 1px 0 0 var(--ciel)}
.champ input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s 0s}
.champ.erreur input,.champ.erreur textarea{border-bottom-color:#FFB3C1;box-shadow:0 1px 0 0 #FFB3C1}
.champ-erreur{display:block;min-height:1.5em;margin-top:6px;font-size:14px;line-height:1.5;color:#FFB3C1}
.form-bas{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.form-note{max-width:38ch;font-size:15px;line-height:1.5;color:var(--encre-2)}
.form-etat{min-height:1.6em;font-size:16px;color:var(--ciel)}
.form-etat:empty{display:none}

/* ---------- 10. Pied de page ---------- */
.pied{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;padding:8svh var(--marge) 5svh;font-weight:500;font-size:clamp(10.5px,.78vw,12.5px);letter-spacing:.2em;text-transform:uppercase}
.pied-marque{font-weight:var(--fin);font-size:clamp(13px,1.2vw,18px);letter-spacing:.5em}
.pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(14px,2.2vw,34px)}
.pied-liens a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .4s}
.pied-liens a:hover{border-bottom-color:currentColor}
.pied-droits{text-align:right;color:var(--encre-2)}
.pied-droits a{border-bottom:1px solid transparent;transition:border-color .4s}
.pied-droits a:hover{border-bottom-color:currentColor}

/* ---------- 11. Mouvement ---------- */
@keyframes halo{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}           /* le cercle des boutons */
/* entrée : le nom « expire » (ses lettres s'écartent), puis le reste arrive */
.js .marque{transition:--trk 2.6s var(--ease),opacity 1.6s ease}
.js:not(.pret) .marque{--trk:.3;opacity:0}
.js .devise,.js .hero-bas>*,.js .tete{transition:opacity 1.4s ease .5s,transform 1.6s var(--ease) .5s}
.js:not(.pret) .devise{opacity:0}
.js:not(.pret) .hero-bas>*{opacity:0;transform:translateY(14px)}
.js:not(.pret) .tete{opacity:0}
/* au défilement : les blocs se posent une fois */
.js .rev{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease calc(var(--d,0) * 1ms),transform 1.4s var(--ease) calc(var(--d,0) * 1ms)}
.js .rev.vu{opacity:1;transform:none}
/* le titre du contact reprend le geste du nom : ses lettres s'écartent */
.js .contact-titre>span{--trk:.24;opacity:0;transition:--trk 2.6s var(--ease),opacity 1.5s ease}
.js .contact-titre>span+span{transition-delay:.18s}
.js .contact-titre.vu>span{--trk:.5;opacity:1}
@media (prefers-reduced-motion:no-preference){
  .appel-rond::before{animation:halo 4.6s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .volet,.v-jour,.v-debout,.v-ouvert,.v-titre,.methode-pas i,.js .marque,.js .devise,.js .hero-bas>*,.js .tete,.js .rev,.js .contact-titre>span,.appel-mot,.appel-rond i,.appel-rond::before,.appel-rond::after,.dit span,.metier-bas,.metier-nom,.pas i{transition:none}
  .js .rev{opacity:1;transform:none}
  .js .contact-titre>span{--trk:.5;opacity:1}
}
/* captures de contrôle : tout est en place, rien ne bouge */
.static *,.static *::before,.static *::after{transition:none!important;animation:none!important}
.static .rev{opacity:1!important;transform:none!important}
.static .contact-titre>span{--trk:.5!important;opacity:1!important}
html.static{scroll-behavior:auto}

/* ---------- 12. Petits écrans ---------- */
@media (max-width:1000px){
  .tete{grid-template-columns:1fr auto}
  .tete-liens,.tete-appel{display:none}
  .tete-menu{display:inline-flex}
  .hero-texte{max-width:52vw}
}
@media (max-width:760px){
  .hero{--d:min(74svh,108vw)}
  .hero-bas{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-texte{max-width:none}
  .g12{display:block}
  .ombre{padding:20svh var(--marge) 30svh}
  .ombre-texte{margin-top:6svh}
  .metiers{padding-bottom:35svh}
  .metier-nom{--trk:.3;font-size:min(6.6vw,5.4svh);padding-block:.5em}
  .metier.actif .metier-nom{--trk:.36}
  .metier-bas{flex-direction:column;align-items:flex-start;gap:12px;bottom:max(64px,10svh)}
  .metier-texte{max-width:40ch}
  .metier-detail{text-align:left;line-height:2;display:flex;flex-wrap:wrap;gap:0 20px;margin-right:0}
  .metiers-repere{bottom:max(14px,2.6svh);gap:10px}
  .methode{padding-top:16svh}
  .volets{flex-direction:column;height:auto;border-left:0;border-top:1px solid rgba(7,16,56,.16)}
  .volet{flex:none;min-height:96px;border-right:0;border-bottom:1px solid rgba(7,16,56,.16);transition:min-height 1.1s var(--ease)}
  .volet.actif{min-height:min(400px,56svh)}
  .v-debout{writing-mode:horizontal-tb;transform:none;left:16px;bottom:auto;top:44px;font-size:6vw}
  .v-titre{font-size:6vw}
  .eng{grid-template-columns:1fr}
  .eng-titre{--trk0:.16}
  .js:not(.reduit) .eng-titre{font-size:min(8vw,6svh)}
  .formulaire{grid-template-columns:1fr}
  .form-bas{flex-direction:column;align-items:flex-start}
  .pied{grid-template-columns:1fr;justify-items:start;gap:22px}
  .pied-liens{justify-content:flex-start}
  .pied-droits{text-align:left}
}

/* ---------- 13. Sans carte graphique, sans script, ou en mouvement réduit : la même page, plus simple ---------- */
:is(html:not(.js),.sans-gl) #aura{display:none}
:is(html:not(.js),.sans-gl) .hero{height:100svh}
:is(html:not(.js),.sans-gl) .hero-orbe{background:var(--orbe)}
:is(html:not(.js),.sans-gl) .ombre{padding-top:38svh;background:linear-gradient(to bottom,rgba(10,16,56,0) 0,var(--nuit) 16svh,var(--nuit) calc(100% - 62svh),#0B1E84 calc(100% - 26svh),#0F4AC6 100%)}
:is(html:not(.js),.sans-gl) .metiers{background:linear-gradient(to bottom,#0F4AC6 0,#0F4AC6 13%,#2C8ADF 27%,#5FC1F5 38%,#A2E1FC 48%,rgba(224,243,253,0) 62%)}
/* la descente, dessinée par la page : blanc en haut des engagements, nuit au bas du pied de page */
:is(html:not(.js),.sans-gl) .methode{background:linear-gradient(to bottom,rgba(255,255,255,0) calc(100% - 45svh),#fff)}
.sans-gl .engagements{background:linear-gradient(to bottom,#fff 0,#E0F3FD 36%,#A2E1FC 60%,#5FC1F5 74%,#2C8ADF 88%,#1A62CF 100%)}
.sans-gl .contact{background:linear-gradient(to bottom,#1A62CF 0,#0E3BB0 30%,#0B2797 60%,#0B1A6C 100%)}
.sans-gl .pied{background:linear-gradient(to bottom,#0B1A6C,#0A1038)}
/* sans script */
html:not(.js) .tete{background:rgba(224,243,253,.92)}
html:not(.js) .lentille{background:none;color:var(--ton)}
html:not(.js) .devise{color:#fff}
html:not(.js) .metiers{height:auto;display:block;padding-bottom:12svh}
html:not(.js) .metier-nom{background:none;color:var(--encre);opacity:1;margin-top:6svh}
html:not(.js) .metier-bas{position:static;opacity:1;transform:none;margin-top:1.5svh}
html:not(.js) .metiers-repere{position:static;transform:none;margin-top:8svh}
html:not(.js) .pas{display:none}
/* sans script : la liste des engagements reste dans le clair, le contact plonge dans le bleu */
html:not(.js) .engagements{background:linear-gradient(to bottom,#fff,#A2E1FC)}
html:not(.js) .contact{background:linear-gradient(to bottom,#A2E1FC 0,#0F4AC6 22svh,#0B1E84 80%,#0B1A6C 100%)}
html:not(.js) .pied{background:linear-gradient(to bottom,#0B1A6C,#0A1038)}

/* sans script : les quatre étapes ouvertes, l'une sous l'autre */
html:not(.js) .volets{display:block;height:auto;border:0}
html:not(.js) .volet{border:0;border-top:1px solid rgba(7,16,56,.16);padding:5svh 0;cursor:auto}
html:not(.js) :is(.v-jour,.v-debout){display:none}
html:not(.js) :is(.v-num,.v-ouvert){position:static;opacity:1;transform:none;color:var(--encre)}
html:not(.js) .v-ouvert{margin-top:2svh}
html:not(.js) .v-ouvert p{color:var(--encre-2)}
html:not(.js) .methode-pas{display:none}