/* =====================================================================
   R&D COVENANT : la page Savoir-faire
   S'ajoute à site.css (police, couleurs, en-tête, pointeur, boutons, pied).
   1. Ouverture   3. L'inventaire   4. Avec vos outils   5. L'appel
   6. Mouvement   7. Petits écrans  8. Sans carte graphique, sans script
   ===================================================================== */
.page-sf{--trait:rgba(7,16,56,.16)}
.sf-sur{font-weight:500;font-size:clamp(10.5px,.86vw,13.5px);line-height:1.4;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase}
.sf-sur--haut,.sf-devise{--l1:52%;--l2:52.8%}                     /* petits textes dans l'orbe : passage franc du blanc au bleu nuit */

/* ---------- 1. Ouverture : l'orbe, et « Sur-mesure » au milieu ---------- */
.sf-ouverture{position:relative;height:100svh;min-height:600px;overflow:hidden;--d:min(80svh,62vw)}
.sf-orbe{position:absolute;left:50%;top:48%;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 */
.sf-titre-bloc{position:absolute;left:0;right:0;top:48%;transform:translateY(-50%);text-align:center}
.sf-sur--haut{display:inline-block;margin-bottom:clamp(20px,3.4svh,38px)}
.sf-titre{--trk:.4;font-weight:var(--fin);font-size:min(7.4vw,23svh);line-height:1;white-space:nowrap;text-transform:uppercase;
  letter-spacing:calc(var(--trk) * 1em);padding-left:calc(var(--trk) * 1em);padding-block:.08em;text-box:trim-both cap alphabetic}
@supports not (text-box-trim:trim-both){.sf-titre{line-height:.86;padding-block:0}}
.sf-devise{margin-top:max(12px,3svh);padding:0 var(--marge) 0 calc(var(--marge) + .34em);text-wrap:balance;
  font-weight:500;font-size:clamp(10.5px,.92vw,15px);line-height:2;letter-spacing:.34em;text-transform:uppercase}
.sf-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}
.sf-bas-texte{max-width:36vw;font-weight:500;font-size:clamp(10px,.78vw,13px);line-height:1.8;letter-spacing:.11em;text-transform:uppercase}

/* ---------- 3. L'inventaire : un sommaire qui suit, six domaines ---------- */
.inventaire{padding:12svh var(--marge) 16svh}
.inv-tete{max-width:1600px;margin:0 auto 12svh}
.inv{display:grid;grid-template-columns:minmax(220px,23%) minmax(0,1fr);column-gap:clamp(28px,5.5vw,110px);max-width:1600px;margin:0 auto}
.inv-index{position:sticky;top:calc(var(--tete-h) + 5svh);align-self:start;display:flex;flex-direction:column;padding-top:4px}
.inv-lien{display:flex;align-items:center;gap:16px;padding:9px 0;font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);line-height:1.4;letter-spacing:.26em;text-transform:uppercase;opacity:.44;transition:opacity .5s ease}
.inv-lien:hover,.inv-lien.actif{opacity:1}
/* le domaine que l'on lit : son numéro se met dans un cercle, comme le pointeur */
.inv-num{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;font-size:.92em;letter-spacing:.06em}
.inv-num::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .9s var(--ease)}
.inv-lien.actif .inv-num::before{opacity:1;transform:scale(1)}
.inv-nom{transition:letter-spacing 1s var(--ease)}
.inv-lien.actif .inv-nom{letter-spacing:.32em}

.domaine{padding-bottom:15svh;scroll-margin-top:calc(var(--tete-h) + 4svh)}
.domaine:last-child{padding-bottom:0}
.dom-num{font-weight:500;font-size:clamp(10.5px,.82vw,12.5px);line-height:1;letter-spacing:.34em}
.dom-titre{margin-top:3svh;font-weight:var(--fin);font-size:clamp(30px,4.5vw,86px);line-height:1.16;letter-spacing:.22em;text-transform:uppercase;text-wrap:balance}
.dom-intro{margin-top:3.4svh;max-width:44ch;font-size:clamp(18px,1.45vw,22px);line-height:1.6;color:var(--encre-2)}
.dom-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.2vw,60px);margin-top:7svh}
.dom-item{position:relative;padding:22px 0 28px;border-top:1px solid var(--trait)}
.dom-item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--bleu);transform:scaleX(0);transform-origin:left center;transition:transform 1s var(--ease)}   /* au survol, le trait se remplit de bleu */
.dom-item:hover::before{transform:scaleX(1)}
.dom-item h4{margin:0;font-weight:500;font-size:clamp(11px,.86vw,13.5px);line-height:1.5;letter-spacing:.24em;text-transform:uppercase}
.dom-item p{max-width:40ch;margin-top:9px;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--encre-2)}
.dom-mesure{display:flex;align-items:baseline;gap:18px;margin-top:5svh;max-width:62ch;font-size:clamp(17px,1.3vw,20px);line-height:1.55}
.dom-mesure span{position:relative;flex:none;padding-left:22px;font-weight:500;font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.3em;text-transform:uppercase;color:var(--bleu)}
.dom-mesure span::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-7.5px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}
.dom-mesure span::after{content:"";position:absolute;left:4.5px;top:50%;width:4px;height:4px;margin-top:-3px;border-radius:50%;background:currentColor}

/* ---------- 4. Avec vos outils : la lumière descend du blanc vers la nuit ---------- */
.systemes{position:relative;padding:24svh 0 18svh;overflow:hidden}
.sys-tete{padding:0 var(--marge);text-align:center}
.sys-titre{font-weight:var(--fin);font-size:clamp(24px,4.4vw,84px);line-height:1.28;text-transform:uppercase}
.sys-titre>span{display:block;white-space:nowrap;letter-spacing:.3em;text-indent:.3em}
.sys-chapeau{max-width:46ch;margin:4svh auto 0;font-size:clamp(18px,1.45vw,22px);color:var(--encre-2)}
.sys-rangs{display:grid;gap:2.4svh;margin:12svh 0 13svh}
.sys-rang{overflow:hidden;white-space:nowrap}
.sys-piste{display:inline-flex;align-items:center;font-weight:var(--fin);font-size:clamp(30px,4.3vw,82px);line-height:1.25;letter-spacing:.24em;text-transform:uppercase;will-change:transform}
.sys-mot{padding-left:.24em}
.sys-point{position:relative;flex:none;width:.36em;height:.36em;margin:0 .62em 0 .7em;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:.55}   /* entre deux outils : un cercle avec un point */
.sys-point::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:currentColor}
.sys-note{max-width:44ch;margin:0 auto;padding:0 var(--marge);text-align:center;font-size:clamp(18px,1.45vw,22px)}
.teinte{color:var(--encre);transition:color .8s ease}
.teinte.sur-nuit{color:#fff;--encre-2:rgba(244,251,255,.8)}

/* ---------- 5. L'appel : dans le bleu profond ---------- */
.sf-appel{min-height:86svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4.4svh,48px);padding:18svh var(--marge) 12svh;text-align:center;color:#fff;--encre-2:rgba(244,251,255,.78)}
.sf-appel-titre{font-weight:var(--fin);font-size:clamp(34px,7.4vw,142px);line-height:1;text-transform:uppercase}
.sf-appel-titre>span{display:block;white-space:nowrap;letter-spacing:.4em;text-indent:.4em}
.sf-appel-texte{max-width:42ch;font-size:clamp(18px,1.45vw,22px);color:var(--encre-2)}

/* ---------- 6. Mouvement ---------- */
.js .sf-titre{transition:--trk 2.6s var(--ease),opacity 1.6s ease}
.js:not(.pret) .sf-titre{--trk:.26;opacity:0}
.js :is(.sf-sur--haut,.sf-devise,.sf-bas>*){transition:opacity 1.4s ease .5s,transform 1.6s var(--ease) .5s}
.js:not(.pret) :is(.sf-sur--haut,.sf-devise){opacity:0}
.js:not(.pret) .sf-bas>*{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
  .js .sf-titre,.js :is(.sf-sur--haut,.sf-devise,.sf-bas>*),.dom-item::before,.inv-num::before,.inv-nom,.teinte{transition:none}
}
.static .sf-titre{--trk:.4!important;opacity:1!important}
/* en mouvement réduit : les outils ne défilent pas, ils sont posés les uns à côté des autres */
.reduit .sys-rang{white-space:normal}
.reduit .sys-piste{display:flex;flex-wrap:wrap;justify-content:center;row-gap:1svh;padding:0 var(--marge);font-size:clamp(22px,2.6vw,46px)}

/* ---------- 7. Petits écrans ---------- */
@media (max-width:1000px){
  .sf-bas-texte{max-width:52vw}
  .inv{grid-template-columns:1fr}
  .inv-index{display:none}
}
@media (max-width:760px){
  .sf-ouverture{--d:min(74svh,108vw)}
  .sf-bas{flex-direction:column;align-items:flex-start;gap:18px}
  .sf-bas-texte{max-width:none}
  .dom-liste{grid-template-columns:1fr}
  .dom-mesure{flex-direction:column;gap:10px}
  .sys-titre>span{letter-spacing:.18em;text-indent:.18em}
  .sf-appel-titre>span{letter-spacing:.26em;text-indent:.26em}
}

/* ---------- 8. Sans carte graphique, sans script : la même page, en lumière fixe ---------- */
:is(html:not(.js),.sans-gl) .sf-orbe{background:radial-gradient(closest-side,#2C8ADF 0,#5FC1F5 34%,#A2E1FC 62%,rgba(224,243,253,0) 100%)}
:is(html:not(.js),.sans-gl) .inventaire{background:linear-gradient(to bottom,rgba(255,255,255,0) calc(100% - 45svh),#fff)}
:is(html:not(.js),.sans-gl) .systemes{background:linear-gradient(to bottom,#fff 0,#E0F3FD 36%,#A2E1FC 60%,#5FC1F5 74%,#2C8ADF 88%,#1A62CF 100%)}
:is(html:not(.js),.sans-gl) .sf-appel{background:linear-gradient(to bottom,#1A62CF 0,#0E3BB0 30%,#0B2797 60%,#0B1A6C 100%)}
:is(html:not(.js),.sans-gl) .pied{background:linear-gradient(to bottom,#0B1A6C,#0A1038)}
html:not(.js) .sys-rang{white-space:normal}
html:not(.js) .sys-piste{display:flex;flex-wrap:wrap;justify-content:center;padding:0 var(--marge);font-size:clamp(22px,2.6vw,46px)}
html:not(.js) .systemes .teinte{color:var(--encre)}