:root{
  --agE:cubic-bezier(.22,1,.36,1);   /* sortie souple, sans rebond */
  --agD:22px;                        /* distance de montée par défaut */
}
html.agfx :where(
  .ag28-hero .eyebrow,
  .ag28-hero h1,
  .ag28-hero .ag28-lead,
  .ag28-nom .m,
  .ag28-preuves .ag28-pgrid span,
  .ag28-motsh>*,
  .ag28-row .k,
  .ag28-row .v,
  .ag28-mondes article,
  .ag28-metiers .eyebrow,.ag28-metiers h2,
  .ag28-mgrid article .n,.ag28-mgrid article h3,.ag28-mgrid article p,
  .ag28-dir .eyebrow,.ag28-dir .t>p,
  .ag28-traj .eyebrow,.ag28-traj h2,.ag28-fin,
  .ag27-impl .eyebrow,.ag27-impl h2,
  .ag27-impl .implist .imp,.ag27-impl .implist .btn,
  .ag28-eng .eyebrow,.ag28-eng h2,
  .ag28-cinq article .n,.ag28-cinq article h3,.ag28-cinq article p,
  .ag28-rse .eyebrow,.ag28-rse h2,
  .ag28-rse .ag28-lead,.ag28-rse .btn,
  .contactc .cadre2 .btn,
  .agr){
  opacity:0;
  transform:translate3d(var(--ax,0px),var(--ay,var(--agD)),0);
  transition:opacity .8s var(--agE) var(--ad,0ms),
             transform .95s var(--agE) var(--ad,0ms)}
html.agfx .ag-in .agr,
html.agfx .agr.ag-in,
html.agfx .ag-in .ag28-pgrid span,
html.agfx .ag-in .ag28-motsh>*,
html.agfx .ag-in .ag28-row .k,html.agfx .ag-in .ag28-row .v,
html.agfx .ag-in.ag28-mondes article,
html.agfx .ag-in .implist .imp,html.agfx .ag-in .implist .btn{
  opacity:1;transform:none}
html.agfx .agfil{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--agE) var(--ad,0ms)}
html.agfx .ag-in .agfil{transform:scaleX(1)}
html.agfx .ag-tracebox{position:absolute;inset:0;pointer-events:none}
html.agfx .ag-trace{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible}
html.agfx .ag-trace circle{fill:none;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transform:rotate(-96deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.6s var(--agE) var(--ad,0ms)}
html.agfx .ag-in .ag-trace circle{stroke-dashoffset:0}
html.agfx .ag28-nom .m.g{--ax:-26px;--ay:0px}
html.agfx .ag28-nom .m:not(.g){--ax:26px;--ay:0px}
html.agfx .ag28-nom .m small{opacity:0;transition:opacity .9s ease var(--ad,0ms)}
html.agfx .ag-in .ag28-nom .m small{opacity:1}

html.agfx .ag28-et{opacity:0;transform:scale(.9);
  transition:opacity .9s var(--agE) .1s,transform 1.2s var(--agE) .1s}
html.agfx .ag-in .ag28-et{opacity:1;transform:none}
html.agfx .ag28-et::after{border-color:transparent}
html.agfx .ag28-et .ag-trace circle{stroke:rgba(199,154,62,.45);stroke-width:1}
html.agfx .ag28-et .ag-rot,
html.agfx .ag28-et>svg:not(.ag-trace){opacity:0;transition:opacity 1s ease .75s}
html.agfx .ag-in .ag28-et .ag-rot,
html.agfx .ag-in .ag28-et>svg:not(.ag-trace){opacity:1}
html.agfx .ag-rot{position:absolute;inset:0;pointer-events:none;
  transform:rotate(var(--agrot,0deg))}
@media(min-width:801px){
  html.agfx .ag28-nom{transform:translate3d(0,var(--agpar,0px),0)}
}
html.agfx .ag28-pgrid{position:relative;border-top-color:transparent}
html.agfx .ag28-pgrid::before{content:"";position:absolute;left:0;right:0;top:-1px;
  height:1px;background:rgba(242,233,208,.18);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.25s var(--agE)}
html.agfx .ag28-preuves.ag-in .ag28-pgrid::before{transform:scaleX(1)}
html.agfx .ag28-pgrid>div{border-left-color:transparent;
  transition:border-color 1s ease var(--ad,0ms)}
html.agfx .ag28-preuves.ag-in .ag28-pgrid>div{border-left-color:rgba(242,233,208,.14)}
html.agfx .ag28-preuves.ag-in .ag28-pgrid>div:first-child{border-left-color:transparent}
html.agfx .ag28-pgrid b{opacity:0;transition:opacity .6s ease var(--ad,0ms)}
html.agfx .ag28-preuves.ag-in .ag28-pgrid b{opacity:1}
html.agfx .ag28-pgrid b i{opacity:0;transition:opacity .5s ease}
html.agfx .ag28-preuves.ag-in .ag28-pgrid b i{opacity:1;transition-delay:calc(var(--ad,0ms) + 950ms)}
@media(max-width:860px){
  html.agfx .ag28-preuves.ag-in .ag28-pgrid>div:nth-child(odd){border-left-color:transparent}
}
@media(max-width:520px){
  html.agfx .ag28-preuves.ag-in .ag28-pgrid>div{border-left-color:transparent}
}
html.agfx .ag28-row .k{--ax:-30px;--ay:0px}
html.agfx .ag28-row .v{--ax:30px;--ay:0px}
@media(hover:hover) and (pointer:fine){
  .ag28-mondes article{transition:filter .55s var(--agE)}
  .ag28-mondes article>*{transition:transform .55s var(--agE)}
  .ag28-mondes:hover article{filter:brightness(.975)}
  .ag28-mondes article:hover{filter:brightness(1.05)}
  .ag28-mondes article:hover>*{transform:translateY(-3px)}
  .ag28-mondes .ag28-chips span{transition:border-color .45s ease,color .45s ease}
}
html.agfx .ag28-mondes .pub{--ax:-18px;--ay:0px}
html.agfx .ag28-mondes .priv{--ax:18px;--ay:0px}
html.agfx .ag28-mgrid,html.agfx .ag28-cinq{position:relative;border-top-color:transparent}
html.agfx .ag28-mgrid::before,html.agfx .ag28-cinq::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:rgba(199,154,62,.55);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.3s var(--agE)}
html.agfx .ag-in .ag28-mgrid::before,html.agfx .ag-in .ag28-cinq::before{transform:scaleX(1)}
html.agfx .ag28-mgrid article,html.agfx .ag28-cinq article{
  border-left-color:transparent;transition:border-color .9s ease var(--ad,0ms)}
html.agfx .ag-in .ag28-mgrid article,html.agfx .ag-in .ag28-cinq article{
  border-left-color:rgba(29,74,59,.14)}
html.agfx .ag-in .ag28-mgrid article:first-child,
html.agfx .ag-in .ag28-cinq article:first-child{border-left-color:transparent}
html.agfx body.dark .ag-in .ag28-mgrid article,
html.agfx body.dark .ag-in .ag28-cinq article{border-left-color:rgba(242,233,208,.14)}
@media(max-width:860px){
  html.agfx .ag-in .ag28-mgrid article:nth-child(3){border-left-color:transparent}
}
@media(max-width:520px){
  html.agfx .ag-in .ag28-mgrid article{border-left-color:transparent}
}
@media(max-width:900px){
  html.agfx .ag-in .ag28-cinq article:nth-child(4){border-left-color:transparent}
}
@media(max-width:560px){
  html.agfx .ag-in .ag28-cinq article{border-left-color:transparent}
}
html.agfx .ag28-dir figure img{opacity:0;transform:scale(.94);
  transition:opacity 1s var(--agE) .05s,transform 1.3s var(--agE) .05s}
html.agfx .ag28-dir.ag-in figure img{opacity:1;transform:none}
html.agfx .ag28-dir .ag-trace{opacity:0;transition:opacity .6s ease .3s}
html.agfx .ag28-dir.ag-in .ag-trace{opacity:1}
@media(min-width:801px){
  html.agfx .ag28-dir figure{transform:translate3d(0,var(--agpar,0px),0)}
  html.agfx .ag28-dir .ag-tracebox{top:-13px;left:-13px;right:auto;bottom:auto;
    width:calc(100% + 26px);aspect-ratio:1}
  html.agfx .ag28-dir .ag-trace circle{stroke:var(--or,#C79A3E);stroke-width:1.4;
    --ad:.45s}
}
@media(max-width:800px){html.agfx .ag28-dir .ag-tracebox{display:none}}
html.agfx .agmot{display:inline-block;opacity:0;
  transform:translate3d(0,.42em,0);
  transition:opacity .62s ease var(--ad,0ms),
             transform .72s var(--agE) var(--ad,0ms)}
html.agfx .ag-in .agmot{opacity:1;transform:none}
html.agfx .ag28-rail::before{transform:scaleX(var(--agrail,0));transform-origin:left center}
html.agfx .ag28-rail article::before{transform:scale(0);
  transition:transform .5s var(--agE)}
html.agfx .ag28-rail article.agpt::before{transform:scale(1)}
html.agfx .ag28-rail article>*{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .7s ease,transform .8s var(--agE)}
html.agfx .ag28-rail article.agpt>*{opacity:1;transform:none}
html.agfx .ag28-rail article.agpt .an{transition-delay:.06s}
html.agfx .ag28-rail article.agpt h3{transition-delay:.12s}
html.agfx .ag28-rail article.agpt p{transition-delay:.18s}
@media(max-width:900px){html.agfx .ag28-rail::before{transform:none}}
html.agfx .ag27-impl .fmap>svg{
  clip-path:polygon(-40% 0,-18% 0,-40% 100%,-62% 100%);
  /* progression presque régulière : un balayage, pas un claquement */
  transition:clip-path 1.75s cubic-bezier(.3,.22,.26,1) .15s}
html.agfx .ag27-impl.ag-in .fmap>svg{
  clip-path:polygon(-40% 0,124% 0,102% 100%,-62% 100%)}
html.agfx .ag27-impl .fmap .city{opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .6s ease var(--ad,0ms),transform .8s var(--agE) var(--ad,0ms)}
html.agfx .ag27-impl.ag-in .fmap .city{opacity:1;transform:translate(-50%,-50%)}
html.agfx .ag27-impl .implist .imp{--ax:24px;--ay:0px}
html.agfx .ag28-sc::after{border-color:transparent}
html.agfx .ag28-sc .ag-trace circle{stroke:rgba(199,154,62,.45);stroke-width:1;
  stroke-dashoffset:calc(var(--len,300) * (1 - var(--agring,0)));
  transition:none}
html.agfx .ag28-sc b{opacity:0;transform:scale(.92);
  transition:opacity .9s ease .2s,transform 1.1s var(--agE) .2s}
html.agfx .ag28-rse.ag-in .ag28-sc b{opacity:1;transform:none}
html.agfx .ag28-sc .ag-rot,
html.agfx .ag28-sc>svg:not(.ag-trace){opacity:0;transition:opacity 1.1s ease .35s}
html.agfx .ag28-rse.ag-in .ag28-sc .ag-rot,
html.agfx .ag28-rse.ag-in .ag28-sc>svg:not(.ag-trace){opacity:1}
html.agfx .ag-ctamask{clip-path:inset(0 0 100% 0)}
html.agfx .contactc.ag-in .ag-ctamask{
  animation:agcta 1.75s var(--agE) .1s both}
@keyframes agcta{
  0%{clip-path:inset(0 0 100% 0)}
  32%{clip-path:inset(0 0 var(--agcut,50%) 0)}
  54%{clip-path:inset(0 0 var(--agcut,50%) 0)}
  100%{clip-path:inset(0 0 0 0)}
}
html.agfx .contactc .cadre2 .btn{--ay:16px;--ad:1.5s}
@media(max-width:700px){
  :root{--agD:14px}
  html.agfx .agr{transition-duration:.62s,.7s}
  html.agfx .ag28-nom .m.g{--ax:-14px}
  html.agfx .ag28-nom .m:not(.g){--ax:14px}
  html.agfx .ag28-row .k{--ax:-16px}
  html.agfx .ag28-row .v{--ax:16px}
  html.agfx .ag28-mondes .pub,html.agfx .ag28-mondes .priv{--ax:0px;--ay:16px}
  html.agfx .ag27-impl .implist .imp{--ax:14px}
  html.agfx .ag-rot{transform:none}
  html.agfx .ag27-impl .fmap>svg{transition-duration:1.05s}
}
@media(prefers-reduced-motion:reduce){
  html.agfx .agr,html.agfx .agmot,html.agfx .ag28-et,html.agfx .ag28-dir figure,
  html.agfx .ag28-sc b,html.agfx .ag28-rail article>*,
  html.agfx .ag27-impl .fmap .city,html.agfx .ag28-nom .m small,
  html.agfx .ag28-dir figure img,html.agfx .ag-rot{
    opacity:1!important;transform:none!important;transition:none!important}
  html.agfx .agfil,html.agfx .ag28-mgrid::before,html.agfx .ag28-cinq::before,
  html.agfx .ag28-pgrid::before,html.agfx .ag28-rail article::before{
    transform:none!important;transition:none!important}
  html.agfx .ag28-rail::before{transform:none!important}
  html.agfx .ag-ctamask{clip-path:none!important;animation:none!important}
  html.agfx .ag27-impl .fmap>svg{clip-path:none!important}
  html.agfx .ag-trace,html.agfx .ag-tracebox{display:none}
  html.agfx .ag28-et::after,html.agfx .ag28-sc::after{border-color:rgba(199,154,62,.45)}
}
html.acc-reduce .agr,html.acc-reduce .agmot,html.acc-reduce .ag28-et,
html.acc-reduce .ag28-dir figure img,html.acc-reduce .ag28-sc b,html.acc-reduce .ag-rot,
html.acc-reduce .ag28-rail article>*,html.acc-reduce .ag27-impl .fmap .city{
  opacity:1!important;transform:none!important}
html.acc-reduce .ag-ctamask{clip-path:none!important;animation:none!important}
html.acc-reduce .ag27-impl .fmap>svg{clip-path:none!important}

/* ====================================================================
   PASSE 2027 — PAGE AGENCE (validée sur la démo « Page Agence 2027 »)
   Pas de nouvelle couleur, pas de nouvelle typographie : le rythme, la
   matière, et ce qui bouge au défilement.
   ==================================================================== */

/* ---- 1. LE HERO SE JOUE AU SCROLL ------------------------------------ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes d27-heroOut{to{transform:scale(.82) translateY(-6vh);opacity:.12;filter:blur(3px)}}
    .ag28-hero .ag28-nom{animation:d27-heroOut linear both;animation-timeline:view();animation-range:exit-crossing 0% exit 100%;transform-origin:50% 40%}
    @keyframes d27-leadOut{to{opacity:.25;transform:translateY(-2vh)}}
    .ag28-hero h1,.ag28-hero .ag28-lead{animation:d27-leadOut linear both;animation-timeline:view();animation-range:exit-crossing 0% exit 90%}
  }
}

/* ---- 2. LE BANDEAU DE CHIFFRES DEVIENT UN OBJET ----------------------- */
.ag28-preuves{position:relative;overflow:hidden;isolation:isolate}
.ag28-preuves::before{content:"";position:absolute;inset:-20% -10%;z-index:-2;
  background:radial-gradient(60% 90% at 18% 0%,rgba(242,184,75,.16),transparent 62%),
             radial-gradient(70% 120% at 92% 110%,rgba(120,190,150,.14),transparent 60%),
             linear-gradient(168deg,#1c4d3d 0%,#16382C 48%,#102a21 100%)}
.ag28-preuves::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.055'/></svg>")}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes d27-drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
    .ag28-preuves::before{animation:d27-drift linear both;animation-timeline:view();animation-range:cover}
  }
}

/* ---- 3. LE DIRIGEANT TIENT SA LARGEUR -------------------------------- */
@media(min-width:901px){
  .ag28-dir .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(48px,5vw,88px);align-items:center}
  .ag28-dir figure{margin:0;max-width:none}
  .ag28-dir figure img{width:100%;height:auto;max-width:min(100%,460px);border-radius:50%;display:block;margin-inline:auto}
  .ag28-dir figcaption{text-align:center}
  .ag28-dir .t{max-width:none}
  .ag28-dir .t p{max-width:62ch}
  .ag28-dir blockquote{font-size:clamp(1.9rem,2.6vw,2.9rem);line-height:1.12;text-wrap:balance}
}

/* ---- 4. LA TRAJECTOIRE ÉPINGLÉE -------------------------------------- */
.d27-traj .wrap{max-width:1180px}
.d27-tgrid{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.d27-tpin{position:sticky;top:clamp(90px,18vh,190px);display:flex;flex-direction:column}
.d27-tpin h2{margin:.25em 0 0;font-size:clamp(2.1rem,3.4vw,3.4rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.d27-tpin .eyebrow{display:block;margin-bottom:.9em}
.d27-tfin{margin-top:clamp(22px,3vh,34px);max-width:26ch;font-size:.98rem;line-height:1.5;opacity:.72}
.d27-tfin em{font-family:'Instrument Serif',Georgia,serif;font-style:italic}
.d27-rail{margin-top:clamp(26px,4vh,40px);width:2px;height:clamp(140px,26vh,260px);
  background:color-mix(in srgb,var(--vert,#1D4A3B) 14%,transparent);position:relative;overflow:hidden}
.d27-rail i{position:absolute;inset:0;background:var(--ambre,#F2B84B);transform:scaleY(0);transform-origin:top}
.d27-steps{display:flex;flex-direction:column;gap:clamp(56px,9vh,110px);padding-block:clamp(20px,6vh,70px) clamp(90px,22vh,240px);view-timeline:--d27-progress block}
.d27-step{max-width:56ch}
.d27-an{display:block;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:clamp(2.9rem,5.8vw,4.8rem);
  line-height:.95;color:var(--vert,#1D4A3B);letter-spacing:-.035em;margin-bottom:.14em;font-feature-settings:"tnum" 1,"lnum" 1;transition:color .3s}
.d27-step h3{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre-f,#B8892F);margin:0 0 14px}
.d27-step p{font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.62;margin:0;color:color-mix(in srgb,currentColor 78%,transparent)}
html.agfx .d27-tpin .eyebrow,html.agfx .d27-tpin h2,html.agfx .d27-tpin .d27-tfin{opacity:1!important;transform:none!important;filter:none!important}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes d27-stepIn{from{opacity:0;transform:translateY(34px)}18%,72%{opacity:1;transform:none}to{opacity:.22;transform:translateY(-14px)}}
    .d27-step{animation:d27-stepIn linear both;animation-timeline:view();animation-range:entry 4% exit 92%}
    @keyframes d27-railFill{to{transform:scaleY(1)}}
    .d27-rail i{animation:d27-railFill linear both;animation-timeline:view(--d27-progress);animation-range:contain}
  }
}
@media(max-width:900px){
  .d27-tgrid{grid-template-columns:1fr;gap:28px}
  .d27-tpin{position:static;background:none;padding:0;margin-bottom:26px}
  .d27-tpin h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .d27-rail,.d27-tfin{display:none}
  .d27-steps{padding-block:0 32px;gap:0}
  .d27-step{opacity:1!important;transform:none!important;animation:none!important;padding-block:30px;border-top:1px solid color-mix(in srgb,var(--vert,#1D4A3B) 12%,transparent)}
  .d27-step:first-child{border-top:0;padding-top:0}
  .d27-an{font-size:clamp(2.6rem,11vw,3.4rem)}
}

/* ---- 5. LES ENTRÉES DES GRILLES EN SCROLL-DRIVEN NATIF ---------------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes d27-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    html.agfx :where(.ag28-mondes article,.ag28-mgrid article,.ag28-cinq article,
      .ag28-metiers .eyebrow,.ag28-metiers h2,.ag28-eng .eyebrow,.ag28-eng h2,
      .ag28-rse .eyebrow,.ag28-rse h2,.ag28-rse .ag28-lead,.ag28-rse .btn){
      opacity:1;transform:none;transition:none;animation:d27-in linear both;animation-timeline:view();animation-range:entry 8% entry 46%}
    .ag28-mgrid article:nth-child(2),.ag28-cinq article:nth-child(2){animation-range:entry 11% entry 49%}
    .ag28-mgrid article:nth-child(3),.ag28-cinq article:nth-child(3){animation-range:entry 14% entry 52%}
    .ag28-mgrid article:nth-child(4),.ag28-cinq article:nth-child(4){animation-range:entry 17% entry 55%}
    .ag28-cinq article:nth-child(5){animation-range:entry 20% entry 58%}
  }
}

/* ---- 6. LE SCEAU RSE ------------------------------------------------- */
.d27-sceau-c{font-family:'Instrument Sans',sans-serif!important;font-weight:600;letter-spacing:-.04em}

/* ---- 7. TOUT CE QUI EST CLIQUABLE RÉPOND (page agence) ---------------- */
@media(hover:hover){
  .ag28-mondes .chips span,.ag28-mondes .chip,.ag28-row .tags span{transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .22s,border-color .22s;cursor:default}
  .ag28-mondes .chips span:hover,.ag28-mondes .chip:hover,.ag28-row .tags span:hover{transform:translateY(-1px);background:color-mix(in srgb,currentColor 7%,transparent);border-color:currentColor}
  .ag28-mgrid article,.ag28-cinq article{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s;border-radius:14px;padding-inline:14px;margin-inline:-14px}
  .ag28-mgrid article:hover,.ag28-cinq article:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--vert,#1D4A3B) 3.5%,transparent)}
  .d27-step:hover .d27-an{color:var(--ambre-f,#B8892F)}
  .implist .imp{transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .25s;border-radius:10px}
  .implist .imp:hover{transform:translateX(3px);background:color-mix(in srgb,var(--vert,#1D4A3B) 3.5%,transparent)}
  .ag28-dir figure img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .ag28-dir figure:hover img{transform:scale(1.025)}
}

/* ---- 8. LA HIÉRARCHIE : deux niveaux, de vrais écarts ----------------- */
html body section h2{font-size:clamp(2.5rem,4.6vw,4.1rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
html body .ag28-motsh h2{max-width:14ch}
html body .contactc h2{font-size:clamp(2.4rem,4.2vw,3.7rem);max-width:22ch;margin-inline:auto}
html body .ag28-hero h1{font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.25;max-width:32ch;margin-inline:auto}
html body section h3{font-size:1.28rem;line-height:1.22}
html body .eyebrow{font-size:.68rem;letter-spacing:.16em;opacity:1}
html body .ag28-row h3{font-size:clamp(2rem,3.2vw,2.8rem)}
html body section .agfil{width:40px;opacity:.7}
html body .d27-tpin h2{font-size:clamp(2.1rem,3.4vw,3.4rem)}
@media(max-width:900px){html body .d27-tpin h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}}

/* ---- 9. LE RYTHME ----------------------------------------------------- */
html body .ag28-preuves{padding-block:64px 72px}
html body .ag28-mots{padding-block:96px 40px}
html body .ag28-metiers{padding-block:120px 64px}
html body .ag28-dir{padding-block:88px}
html body .d27-traj{padding-block:150px 40px}
html body .ag27-impl{padding-block:88px 120px}
html body .ag28-eng{padding-block:48px 96px}
html body .ag28-rse{padding-block:120px 96px}
html body .contactc{padding-block:0 120px!important}
@media(max-width:800px){
  html body .ag28-metiers{padding-block:80px 48px}
  html body .d27-traj{padding-block:96px 24px}
  html body .ag28-rse{padding-block:80px 64px}
}