/* ==========================================================================
   Nudge — CSS global du thème (v1.0)
   Mobile-first. Variables --ng-*, classes .ng-*. Charte graphique v2.1.
   Points de rupture : 768px (tablette), 1100px (menu desktop), 1440px (large).
   ========================================================================== */

/* 1. Polices (auto-hébergées) -------------------------------------------- */
@font-face{
  font-family:"Clash Display";
  src:url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/Archivo-VariableItalic.woff2") format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap;
}

/* 2. Variables ------------------------------------------------------------ */
:root{
  --ng-sand-50:#F5EFE9; --ng-sand-100:#EFE6DE; --ng-petal:#F6E0D6; --ng-sand-300:#E2D3C6; --ng-sand-500:#B9A493; --ng-sand-700:#6B6058;
  --ng-alice:#EDF6FF; --ng-icy:#B0D7FF; --ng-royal:#1D4FD8; --ng-royal-hover:#1740B8; --ng-navy:#1D3464;
  --ng-ink:#1B2333; --ng-unread:#8C8079; --ng-white:#FFFFFF;
  --ng-error:#A63A2B;
  --ng-line:rgba(27,35,51,.14);
  --ng-line-strong:rgba(27,35,51,.28);
  --ng-line-light:rgba(245,239,233,.18);
  --ng-font-display:"Clash Display","Archivo",system-ui,sans-serif;
  --ng-font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ng-bar-h:68px;
  --ng-ease:cubic-bezier(.2,.8,.2,1);
  --ng-gutter:clamp(16px,4vw,40px);
  --ng-max:1320px;
  --ng-text:760px;
  --ng-section:clamp(64px,10vw,140px);
  --ng-r-pill:999px; --ng-r-visual:4px; --ng-r-caption:16px;
}

/* 3. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--ng-bar-h) + 16px)}
body{
  margin:0;min-height:100vh;padding-top:var(--ng-bar-h);
  background:var(--ng-sand-50);color:var(--ng-ink);
  font-family:var(--ng-font-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
@media (min-width:768px){body{font-size:17px}}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
img{border-radius:var(--ng-r-visual)}
a{color:var(--ng-royal);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ng-royal-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--ng-font-display);font-weight:600;color:var(--ng-navy);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,6vw,72px)}
h2{font-size:clamp(30px,3.6vw,44px)}
h3{font-size:clamp(21px,2vw,26px);line-height:1.2}
h4{font-size:18px;line-height:1.3}
p{text-wrap:pretty}
::selection{background:var(--ng-icy);color:var(--ng-ink)}
:focus-visible{outline:2px solid var(--ng-royal);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.ng-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ng-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ng-main{display:block}
.ng-main:focus{outline:none}

/* Lien d'évitement */
.ng-skip{position:fixed;top:8px;left:8px;z-index:1001;padding:12px 18px;border-radius:var(--ng-r-pill);background:var(--ng-navy);color:var(--ng-sand-50);font-weight:500;transform:translateY(-160%);transition:transform .2s var(--ng-ease)}
.ng-skip:focus{transform:none;color:var(--ng-sand-50)}

/* Grain papier (statique, couche composée : aucun recalcul au scroll) */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 4. Mise en page --------------------------------------------------------- */
.ng-wrap{width:100%;max-width:calc(var(--ng-max) + 2 * var(--ng-gutter));margin-inline:auto;padding-inline:var(--ng-gutter)}
.ng-wrap--text{max-width:calc(var(--ng-text) + 2 * var(--ng-gutter))}
.ng-section{padding-block:var(--ng-section)}
.ng-section--alt{background:var(--ng-sand-100)}
.ng-section--petal{background:var(--ng-petal)}
.ng-section--tight{padding-block:clamp(48px,6vw,88px)}
.ng-rule{border:0;border-top:1px solid var(--ng-line);margin:0}
.ng-stack>*+*{margin-top:var(--ng-stack,20px)}
.ng-split{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:900px){
  .ng-split{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ng-split__aside{grid-column:1 / span 4}
  .ng-split__main{grid-column:6 / -1}
}
.ng-grid{display:grid;gap:clamp(20px,3vw,32px)}
@media (min-width:768px){.ng-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ng-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023px){.ng-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 5. Typographie ---------------------------------------------------------- */
.ng-label{font-family:var(--ng-font-body);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ng-sand-700);line-height:1.4}
.ng-label a{color:inherit;text-decoration:none}
.ng-label a:hover{color:var(--ng-royal)}
.ng-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ng-sand-700);max-width:62ch}
.ng-intro{font-family:var(--ng-font-body);font-weight:400;font-size:clamp(26px,3.4vw,42px);line-height:1.22;letter-spacing:-.01em;color:var(--ng-ink);max-width:28ch}
h1.ng-intro,h2.ng-intro{font-family:var(--ng-font-body);font-weight:400;color:var(--ng-ink);letter-spacing:-.01em;line-height:1.22}
.ng-display{font-family:var(--ng-font-display);font-weight:600;font-size:clamp(42px,8vw,96px);line-height:1;letter-spacing:-.035em;color:var(--ng-navy)}
.ng-display__line{display:block;white-space:nowrap}
.ng-display__line--indent{padding-left:clamp(32px,12vw,220px)}
.ng-muted{color:var(--ng-sand-700)}
.ng-text{max-width:62ch}

/* 6. Boutons --------------------------------------------------------------
   Survol « rideau » : un aplat monte du bas et recouvre le bouton, puis un
   trait fin souligne le libellé de gauche à droite. Le bouton reste immobile.
   Variables : --ng-curtain (couleur du rideau), --ng-curtain-text. */
.ng-btn{
  --ng-curtain:var(--ng-navy);--ng-curtain-text:var(--ng-white);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border-radius:var(--ng-r-pill);border:1px solid transparent;
  font-family:var(--ng-font-display);font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:color .45s cubic-bezier(.65,0,.35,1),border-color .45s cubic-bezier(.65,0,.35,1);
}
.ng-btn::before{
  content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ng-curtain);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.ng-btn__label{position:relative;display:inline-block}
.ng-btn__label::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.ng-btn:hover,.ng-btn:focus-visible{color:var(--ng-curtain-text);border-color:var(--ng-curtain)}
.ng-btn:hover::before,.ng-btn:focus-visible::before{transform:none}
.ng-btn:hover .ng-btn__label::after,.ng-btn:focus-visible .ng-btn__label::after{
  transform:scaleX(1);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1) .22s;
}

.ng-btn--primary{background:var(--ng-royal);color:var(--ng-white)}
.ng-btn--ghost{background:var(--ng-white);color:var(--ng-ink);border-color:var(--ng-line-strong);--ng-curtain-text:var(--ng-sand-50)}
.ng-btn--light{background:var(--ng-sand-50);color:var(--ng-navy);--ng-curtain:var(--ng-royal)}
.ng-btn--lg{min-height:56px;padding:16px 30px;font-size:15px}
.ng-btn[disabled]{opacity:.6;cursor:progress}
.ng-btn[disabled]::before{display:none}
.ng-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Libellé qui roule au survol (le second libellé arrive en léger décalé) */
.ng-roll{display:inline-grid;overflow:hidden;vertical-align:top;line-height:1.25;padding-block:.05em}
.ng-roll__a,.ng-roll__b{grid-area:1 / 1;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ng-roll__b{transform:translateY(110%)}
@media (hover:hover){
  :is(a,button):hover>.ng-roll .ng-roll__a,
  .ng-nav__cell--sub:is(:hover,.is-open)>.ng-nav__link .ng-roll__a{transform:translateY(-110%)}
  :is(a,button):hover>.ng-roll .ng-roll__b,
  .ng-nav__cell--sub:is(:hover,.is-open)>.ng-nav__link .ng-roll__b{transform:none;transition-delay:.04s}
}
:is(a,button):focus-visible>.ng-roll .ng-roll__a{transform:translateY(-110%)}
:is(a,button):focus-visible>.ng-roll .ng-roll__b{transform:none}

/* Rideau des cases « Audit offert » de la barre */
.ng-curtain{position:relative;isolation:isolate;overflow:hidden}
.ng-curtain::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ng-navy);transform:translateY(101%);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.ng-curtain:hover::before,.ng-curtain:focus-visible::before{transform:none}

/* 7. Barre de navigation -------------------------------------------------- */
.ng-bar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--ng-bar-h);
  background:rgba(245,239,233,.95);border-bottom:1px solid var(--ng-line);
  transition:transform .4s var(--ng-ease);
}
.ng-bar.is-hidden{transform:translateY(calc(-100% - 1px))}
.ng-bar__inner{display:grid;grid-template-columns:auto 1fr auto;height:100%}
.ng-bar__cell{display:flex;align-items:center;justify-content:center;height:100%;padding:0 18px;color:var(--ng-ink);text-decoration:none;background:none;border:0}
.ng-bar__toggle{gap:10px;border-right:1px solid var(--ng-line);font-weight:500;font-size:15px;min-width:104px}
.ng-bar__burger{position:relative;width:18px;height:10px}
.ng-bar__burger::before,.ng-bar__burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .35s var(--ng-ease),top .35s var(--ng-ease)}
.ng-bar__burger::before{top:0}
.ng-bar__burger::after{top:8.5px}
.ng-bar__toggle[aria-expanded="true"] .ng-bar__burger::before{top:4.25px;transform:rotate(45deg)}
.ng-bar__toggle[aria-expanded="true"] .ng-bar__burger::after{top:4.25px;transform:rotate(-45deg)}
.ng-bar__home{color:var(--ng-navy)}
.ng-bar__mark{display:none;width:30px;height:30px}
.ng-bar__logotype{width:104px;height:auto}
.ng-bar__cta{transition:background-color .3s ease;background:var(--ng-royal);color:var(--ng-white);font-family:var(--ng-font-display);font-weight:600;font-size:14px;letter-spacing:.01em;padding:0 20px}
.ng-bar__cta:hover{color:var(--ng-white)}
.ng-nav{display:none}

@media (max-width:379px){
  .ng-bar__toggle{min-width:0;padding:0 14px}
  .ng-bar__toggle [data-menu-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ng-bar__cta{padding:0 14px}
}

@media (min-width:1100px){
  .ng-bar__inner{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}
  .ng-bar__toggle,.ng-bar__cta,.ng-bar__logotype,.ng-mnav{display:none!important}
  .ng-bar__mark{display:block}
  .ng-bar__home{padding:0;border-inline:1px solid var(--ng-line)}
  .ng-bar__home:hover .ng-bar__mark{transform:rotate(-8deg)}
  .ng-bar__mark{transition:transform .5s var(--ng-ease)}
  .ng-nav{display:block;height:100%}
  .ng-nav__list{display:flex;height:100%;list-style:none;margin:0;padding:0}
  .ng-nav__cell{position:relative;flex:1 1 0;min-width:0}
  .ng-nav--left .ng-nav__cell+.ng-nav__cell,.ng-nav--right .ng-nav__cell+.ng-nav__cell{border-left:1px solid var(--ng-line)}
  .ng-nav__link{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:0 14px;
    background:none;border:0;color:var(--ng-ink);font-family:var(--ng-font-body);font-weight:500;font-size:15px;
    text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ng-ease);
  }
  .ng-nav__link:hover,.ng-nav__cell.is-open>.ng-nav__link{background:var(--ng-sand-100);color:var(--ng-ink)}
  .ng-nav__link[aria-current="page"],.ng-nav__cell.is-active>.ng-nav__link{box-shadow:inset 0 -2px 0 var(--ng-royal)}
  .ng-nav__chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ng-ease)}
  .ng-nav__link[aria-expanded="true"] .ng-nav__chev{transform:translateY(1px) rotate(-135deg)}
  .ng-nav__cell--cta .ng-nav__link{background:var(--ng-royal);color:var(--ng-white);font-family:var(--ng-font-display);font-weight:600;font-size:14px;letter-spacing:.01em}
  .ng-nav__cell--cta .ng-nav__link:hover{background:var(--ng-royal);color:var(--ng-white)}
  .ng-nav__cell--cta .ng-nav__link[aria-current="page"]{box-shadow:none}

  /* Sous-menus : cases à filets sous la barre */
  /* Sous-menus : panneau de cases sous toute la moitié gauche de la barre */
  .ng-nav--left{position:relative}
  .ng-nav--left .ng-nav__cell--sub{position:static}
  .ng-sub{
    display:none;position:absolute;top:100%;left:0;right:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:0;padding:0;list-style:none;background:var(--ng-sand-50);
    border-bottom:1px solid var(--ng-line);border-right:1px solid var(--ng-line);
    box-shadow:0 24px 40px -28px rgba(27,35,51,.25);
  }
  .ng-nav__cell.is-open>.ng-sub{display:grid;animation:ng-drop .35s var(--ng-ease)}
  html:not(.ng-js) .ng-nav__cell--sub:hover>.ng-sub,
  html:not(.ng-js) .ng-nav__cell--sub:focus-within>.ng-sub{display:grid}
  .ng-sub__item+.ng-sub__item{border-left:1px solid var(--ng-line)}
  .ng-sub__link{
    position:relative;display:flex;flex-direction:column;gap:8px;height:100%;min-height:150px;padding:24px 24px 48px;
    color:var(--ng-ink);text-decoration:none;transition:background-color .25s var(--ng-ease);
  }
  .ng-sub__link:hover{background:var(--ng-sand-100);color:var(--ng-ink)}
  .ng-sub__title{font-family:var(--ng-font-display);font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.01em;color:var(--ng-navy)}
  .ng-sub__desc{font-size:14px;line-height:1.45;color:var(--ng-sand-700)}
  .ng-sub__arrow{position:absolute;left:24px;bottom:22px;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--ng-ease),width .35s var(--ng-ease)}
  .ng-sub__arrow::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transform-origin:center}
  .ng-sub__link:hover .ng-sub__arrow{width:28px}
  .ng-sub__link[aria-current="page"] .ng-sub__title{color:var(--ng-royal)}
}
@media (min-width:1100px) and (max-width:1279px){
  .ng-nav__link{padding:0 8px;font-size:14px}
}
@keyframes ng-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Dévoilement de la barre au chargement (gauche → droite) */
@media (prefers-reduced-motion:no-preference){
  .ng-js .ng-bar__inner{animation:ng-unveil .9s var(--ng-ease) backwards}
}
@keyframes ng-unveil{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Menu mobile : une seule liste, une seule taille, cases à filets */
.ng-mnav{
  position:fixed;top:var(--ng-bar-h);left:0;right:0;bottom:0;z-index:99;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:var(--ng-sand-50);
  opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ng-ease),transform .3s var(--ng-ease);
}
.ng-mnav.is-open{opacity:1;transform:none}
.ng-mnav__inner{display:flex;flex-direction:column;flex:1;padding-bottom:calc(var(--ng-gutter) + env(safe-area-inset-bottom))}
.ng-mnav__list{list-style:none;margin:0;padding:0}
.ng-mnav__list>li{border-bottom:1px solid var(--ng-line)}
.ng-mnav__link{display:flex;align-items:center;min-height:72px;padding:12px var(--ng-gutter);font-family:var(--ng-font-display);font-weight:600;font-size:clamp(24px,6.6vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--ng-navy);text-decoration:none}
.ng-mnav__link:active{background:var(--ng-sand-100)}
.ng-mnav__link[aria-current="page"]{color:var(--ng-royal)}
.ng-mnav__list{margin-bottom:28px}
.ng-mnav__toggle{width:100%;justify-content:space-between;gap:16px;background:none;border:0;text-align:left;cursor:pointer}
.ng-mnav__plus{position:relative;flex:none;width:18px;height:18px}
.ng-mnav__plus::before,.ng-mnav__plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ng-ease)}
.ng-mnav__plus::after{transform:rotate(90deg)}
.ng-mnav__toggle[aria-expanded="true"] .ng-mnav__plus::after{transform:rotate(0)}
.ng-mnav__sub{list-style:none;margin:0;padding:0;border-top:1px solid var(--ng-line);background:var(--ng-sand-100)}
.ng-mnav__sub:not([hidden]){animation:ng-drop .35s var(--ng-ease)}
.ng-mnav__sub li+li{border-top:1px solid var(--ng-line)}
.ng-mnav__sublink{display:flex;align-items:center;min-height:56px;padding:8px var(--ng-gutter);font-weight:500;font-size:17px;line-height:1.3;color:var(--ng-ink);text-decoration:none}
.ng-mnav__sublink[aria-current="page"]{color:var(--ng-royal)}
.ng-mnav__cta{margin:auto var(--ng-gutter) 0}
html.ng-lock,html.ng-lock body{overflow:hidden}

/* 8. Fil d'Ariane --------------------------------------------------------- */
.ng-breadcrumb{padding-top:20px;font-size:13px;color:var(--ng-sand-700)}
.ng-breadcrumb a{color:var(--ng-sand-700);text-decoration:none}
.ng-breadcrumb a:hover{color:var(--ng-royal);text-decoration:underline}
.ng-breadcrumb .breadcrumb_last{color:var(--ng-ink)}

/* 9. Pied de page --------------------------------------------------------
   Desktop : [haut gauche | colonne de cases] / [logotype géant | colonne]
   Mobile  : haut, cases, logotype. */
.ng-footer{background:var(--ng-navy);color:var(--ng-sand-50)}
.ng-footer :focus-visible{outline-color:var(--ng-icy)}
.ng-footer__grid{display:grid;grid-template-areas:"top" "nav" "brand"}
.ng-footer__top{grid-area:top;padding:clamp(56px,8vw,112px) var(--ng-gutter) 48px}
.ng-footer__label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ng-icy)}
.ng-footer__title{margin-top:16px;max-width:15ch;font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:-.035em;color:var(--ng-sand-50)}
.ng-footer__text{margin:20px 0 32px;max-width:46ch;color:rgba(245,239,233,.72)}
.ng-footer__meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:48px;font-size:13px;line-height:1.5;color:rgba(245,239,233,.6)}
.ng-footer__meta a{color:inherit;text-decoration:none}
.ng-footer__meta a:hover{color:var(--ng-white);text-decoration:underline}

.ng-fnav{grid-area:nav;border-top:1px solid var(--ng-line-light)}
.ng-fnav__list{display:grid;grid-template-columns:1fr 1fr;height:100%;margin:0;padding:0;list-style:none}
.ng-fnav__cell{grid-column:1 / -1;display:flex;border-bottom:1px solid var(--ng-line-light)}
.ng-fnav__cell--half{grid-column:auto}
.ng-fnav__cell--half:nth-child(even of .ng-fnav__cell--half){border-left:1px solid var(--ng-line-light)}
.ng-fnav__link{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:80px;padding:16px;
  color:var(--ng-sand-50);text-decoration:none;text-align:center;font-weight:500;font-size:15px;line-height:1.3;
  transition:background-color .3s var(--ng-ease);
}
.ng-fnav__link:hover{background:rgba(245,239,233,.06);color:var(--ng-white)}
.ng-fnav__link[aria-current="page"]{color:var(--ng-icy)}
.ng-fnav__link .ng-roll{white-space:normal}

.ng-footer__brand{grid-area:brand;display:block;padding:40px var(--ng-gutter) calc(var(--ng-gutter) + env(safe-area-inset-bottom));color:var(--ng-sand-50)}
.ng-footer__brand:hover{color:var(--ng-white)}
.ng-footer__logo{width:100%;height:auto;overflow:visible}
/* Logotype : fondu + montée au scroll, points puis mot (JS : data-logo-reveal) */
.ng-footer__logo-dots,.ng-footer__logo-word{
  transform-box:fill-box;transform-origin:50% 100%;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1);
}
.ng-footer__logo-word{transition-delay:.14s}
.ng-js .ng-footer__brand.is-pending .ng-footer__logo-dots,
.ng-js .ng-footer__brand.is-pending .ng-footer__logo-word{opacity:0;transform:translateY(38%)}

@media (min-width:900px){
  .ng-footer__grid{
    grid-template-columns:minmax(0,1fr) clamp(300px,26vw,400px);
    grid-template-areas:"top nav" "brand nav";
    grid-template-rows:1fr auto;
    min-height:min(100vh,1000px);
  }
  .ng-footer__top{padding-bottom:64px}
  .ng-fnav{border-top:0;border-left:1px solid var(--ng-line-light)}
  .ng-fnav__list{grid-auto-rows:1fr}
  .ng-fnav__cell--half:nth-last-child(-n+2){border-bottom:0}
  .ng-fnav__link{min-height:96px}
  .ng-footer__brand{padding-top:0}
}

/* 10. Formulaire d'audit -------------------------------------------------- */
.ng-form{
  position:relative;background:var(--ng-white);border:1px solid var(--ng-line);border-radius:var(--ng-r-visual);
  padding:clamp(22px,4vw,48px);max-width:720px;
}
.ng-form__title{margin-bottom:18px}
.ng-form__alert{margin-bottom:24px;padding:16px 18px;border-left:3px solid var(--ng-error);background:#FBEFEC;color:var(--ng-ink);font-size:15px}
.ng-form__alert:focus{outline:none}
.ng-form__progress{margin-bottom:10px}
.ng-form__bar{display:block;height:3px;background:var(--ng-sand-100);border-radius:3px;overflow:hidden}
.ng-form__bar-fill{display:block;height:100%;width:33.33%;background:var(--ng-royal);transition:width .5s var(--ng-ease)}
.ng-form__step-count{margin-bottom:24px}
html:not(.ng-js) .ng-form__progress,html:not(.ng-js) .ng-form__step-count,.ng-js .ng-nojs-only{display:none}
.ng-form__step{border:0;margin:0;padding:0;min-width:0}
html:not(.ng-js) .ng-form__step+.ng-form__step{margin-top:40px;padding-top:32px;border-top:1px solid var(--ng-line)}
.ng-js .ng-form__step:not(.is-current){display:none}
.ng-js .ng-form__step.is-current{animation:ng-step .45s var(--ng-ease)}
@keyframes ng-step{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.ng-form__legend{padding:0;margin-bottom:24px;font-family:var(--ng-font-display);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--ng-navy)}
.ng-form__grid{display:grid;gap:0 20px}
@media (min-width:600px){.ng-form__grid{grid-template-columns:1fr 1fr}}

.ng-field{margin-bottom:22px}
.ng-field__label{display:block;margin-bottom:8px;font-weight:500;font-size:15px;color:var(--ng-ink)}
.ng-field__opt{font-weight:400;color:var(--ng-sand-700)}
.ng-field__hint{margin:-2px 0 10px;font-size:14px;color:var(--ng-sand-700)}
.ng-field__input{
  display:block;width:100%;min-height:52px;padding:13px 16px;
  background:var(--ng-white);border:1px solid var(--ng-line-strong);border-radius:var(--ng-r-visual);
  font-size:16px;line-height:1.4;color:var(--ng-ink);
  transition:border-color .2s var(--ng-ease),box-shadow .2s var(--ng-ease);
  -webkit-appearance:none;appearance:none;
}
.ng-field__input::placeholder{color:var(--ng-unread)}
.ng-field__input:hover{border-color:var(--ng-sand-700)}
.ng-field__input:focus{outline:none;border-color:var(--ng-royal);box-shadow:0 0 0 3px rgba(29,79,216,.18)}
.ng-field__select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2333' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.ng-field__textarea{min-height:120px;resize:vertical}
.ng-field__err{min-height:0;margin-top:6px;font-size:14px;color:var(--ng-error)}
.ng-field__err:empty{display:none}
.ng-field__input[aria-invalid="true"]{border-color:var(--ng-error)}
.ng-field__input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(166,58,43,.16)}

.ng-choices{display:grid;gap:12px}
@media (min-width:600px){.ng-choices{grid-template-columns:1fr 1fr}}
.ng-choice{position:relative;display:block;cursor:pointer}
.ng-choice input{position:absolute;opacity:0;width:1px;height:1px}
.ng-choice__box{display:block;height:100%;padding:18px 18px 18px 50px;border:1px solid var(--ng-line-strong);border-radius:var(--ng-r-visual);transition:border-color .2s var(--ng-ease),background-color .2s var(--ng-ease)}
.ng-choice__box::before{content:"";position:absolute;left:18px;top:21px;width:18px;height:18px;border:1.5px solid var(--ng-sand-700);border-radius:50%;transition:border .2s var(--ng-ease)}
.ng-choice:hover .ng-choice__box{border-color:var(--ng-sand-700)}
.ng-choice input:checked+.ng-choice__box{border-color:var(--ng-royal);background:var(--ng-alice)}
.ng-choice input:checked+.ng-choice__box::before{border:5.5px solid var(--ng-royal)}
.ng-choice input:focus-visible+.ng-choice__box{outline:2px solid var(--ng-royal);outline-offset:2px}
.ng-choice__title{display:block;font-family:var(--ng-font-display);font-weight:600;font-size:18px;color:var(--ng-navy);line-height:1.2}
.ng-choice__text{display:block;margin-top:4px;font-size:14px;color:var(--ng-sand-700);line-height:1.45}
.ng-field[aria-invalid="true"] .ng-choice__box{border-color:var(--ng-error)}

.ng-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ng-sand-700);cursor:pointer}
.ng-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ng-royal)}
.ng-check a{color:var(--ng-royal)}

.ng-form__nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ng-form__nav [data-next],.ng-form__nav [data-submit]{flex:1 1 auto}
@media (min-width:600px){.ng-form__nav [data-next],.ng-form__nav [data-submit]{flex:0 0 auto;margin-left:auto}}
.ng-form__note{margin-top:16px;font-size:14px;color:var(--ng-sand-700)}
.ng-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 11. Contenus éditoriaux (blog) ----------------------------------------- */
.ng-article__head{padding-top:clamp(32px,5vw,72px)}
.ng-article__title{margin-top:14px;font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.03em}
.ng-article__meta{margin-top:20px;font-size:14px;color:var(--ng-sand-700)}
.ng-article__cover{margin-top:clamp(32px,5vw,56px)}
.ng-article__cover img{width:100%}
.ng-article .ng-prose{padding-block:clamp(40px,5vw,64px) var(--ng-section)}
.ng-prose{font-size:17px;line-height:1.7}
@media (min-width:768px){.ng-prose{font-size:18px}}
.ng-prose>*+*{margin-top:1.15em}
.ng-prose h2{margin-top:2.2em;font-size:clamp(26px,3vw,36px)}
.ng-prose h3{margin-top:1.8em}
.ng-prose h2+*,.ng-prose h3+*{margin-top:.7em}
.ng-prose ul,.ng-prose ol{padding-left:1.25em}
.ng-prose li+li{margin-top:.4em}
.ng-prose li::marker{color:var(--ng-royal)}
.ng-prose blockquote{padding:4px 0 4px 22px;border-left:2px solid var(--ng-royal);font-size:1.1em;color:var(--ng-navy)}
.ng-prose figure img{width:100%}
.ng-prose figcaption{margin-top:10px;font-size:14px;color:var(--ng-sand-700)}
.ng-prose code{padding:.1em .35em;border-radius:4px;background:var(--ng-sand-100);font-size:.9em}
.ng-prose pre{overflow-x:auto;padding:18px;border-radius:var(--ng-r-visual);background:var(--ng-navy);color:var(--ng-sand-50);font-size:14px}
.ng-prose pre code{padding:0;background:none}
.ng-prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.ng-prose th,.ng-prose td{padding:10px 12px;border-bottom:1px solid var(--ng-line);text-align:left;vertical-align:top}
.ng-prose th{font-weight:500;color:var(--ng-navy)}
.ng-prose hr{border:0;border-top:1px solid var(--ng-line);margin-block:2.4em}

/* Listes du blog */
.ng-listing__head{margin-bottom:clamp(40px,6vw,72px);max-width:var(--ng-text)}
.ng-listing__title{font-size:clamp(40px,7vw,88px);line-height:1;letter-spacing:-.035em}
.ng-listing__head .ng-lead{margin-top:20px}
.ng-cards{display:grid;gap:0 32px}
@media (min-width:768px){.ng-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ng-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ng-card{position:relative;padding:28px 0 36px;border-top:1px solid var(--ng-line)}
.ng-card__meta{font-size:13px;color:var(--ng-sand-700)}
.ng-card__title{margin-top:10px;font-size:clamp(22px,2vw,26px);line-height:1.15}
.ng-card__title a{color:inherit;text-decoration:none}
.ng-card__title a::after{content:"";position:absolute;inset:0}
.ng-card__text{margin-top:12px;color:var(--ng-sand-700)}
.ng-card__more{display:inline-block;margin-top:18px;font-family:var(--ng-font-display);font-weight:600;font-size:14px;color:var(--ng-royal)}
.ng-card:hover .ng-card__title{color:var(--ng-royal)}
.ng-pagination{margin-top:48px}
.ng-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.ng-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ng-line-strong);border-radius:var(--ng-r-pill);color:var(--ng-ink);text-decoration:none;font-weight:500}
.ng-pagination .page-numbers.current{background:var(--ng-navy);border-color:var(--ng-navy);color:var(--ng-sand-50)}

/* 404 et Merci */
.ng-404__title,.ng-merci__title{margin-top:14px;max-width:18ch;font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:-.035em}
.ng-merci{min-height:calc(70vh - var(--ng-bar-h));display:flex;align-items:center}
.ng-merci__mark{width:48px;height:48px;margin-bottom:28px;color:var(--ng-navy)}
.ng-merci .ng-lead{margin-top:24px}
.ng-merci__fix{margin-top:16px;font-size:15px;color:var(--ng-sand-700)}

/* 12. Composants de page -------------------------------------------------- */
/* Liste de points : icône au trait, titre, ligne secondaire, filets */
.ng-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--ng-line)}
.ng-points__item{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--ng-line)}
.ng-points__icon{grid-row:span 2;width:24px;height:24px;margin-top:2px;color:var(--ng-royal)}
.ng-points__title{font-family:var(--ng-font-body);font-weight:500;font-size:18px;line-height:1.35;color:var(--ng-ink);letter-spacing:0}
.ng-points__text{color:var(--ng-sand-700);font-size:15px}

/* Grand texte lu au scroll (les mots passent du taupe moyen à l'encre) */
.ng-js .ng-readtext .ng-w{color:var(--ng-unread);transition:color .35s linear}
.ng-js .ng-readtext .ng-w.is-read{color:var(--ng-ink)}

/* Titre décalé : deux lignes qui glissent en sens opposé */
.ng-offset{overflow:hidden}
.ng-offset .ng-display__line{will-change:transform}

/* Apparitions au scroll (seulement sous la ligne de flottaison) */
.ng-js .ng-reveal.is-pending{opacity:0;transform:translateY(28px)}
.ng-js .ng-reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ng-ease),transform .8s var(--ng-ease)}

/* Défilement latéral « étapes » (accueil)
   Desktop : la section se fixe à l'écran et les cartes défilent latéralement
   au scroll vertical (JS : data-hscroll). Mobile : glisser horizontal natif. */
.ng-hscroll{position:relative;background:var(--ng-navy)}
.ng-hscroll__pin{position:relative;overflow:hidden}
.ng-hscroll__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.ng-hscroll__track::-webkit-scrollbar{display:none}
.ng-hcard{
  position:relative;flex:0 0 86vw;scroll-snap-align:start;display:flex;flex-direction:column;
  min-height:min(560px,82svh);padding:clamp(28px,4vw,56px) var(--ng-gutter) clamp(28px,4vw,56px);
  background:var(--ng-sand-100);color:var(--ng-ink);border-left:1px solid var(--ng-line);
}
.ng-hcard--intro{flex-basis:100vw;background:var(--ng-navy);color:var(--ng-sand-50);border-left:0}
.ng-hcard--petal{background:var(--ng-petal)}
.ng-hcard--alice{background:var(--ng-alice)}
.ng-hcard--sand{background:var(--ng-sand-100)}
.ng-hcard .ng-label{color:inherit;opacity:.75}
.ng-hcard--intro .ng-label{color:var(--ng-icy);opacity:1}
.ng-hcard__title{margin-top:16px;max-width:13ch;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.035em;color:var(--ng-sand-50)}
.ng-hcard__lead{margin-top:auto;padding-top:32px;max-width:40ch;color:rgba(245,239,233,.75)}
.ng-hcard--intro .ng-btn{align-self:flex-start;margin-top:28px}
.ng-hcard__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ng-hcard__step{font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.02em;color:var(--ng-navy)}
.ng-hcard__num{
  margin-top:auto;font-family:var(--ng-font-display);font-weight:600;
  font-size:clamp(120px,22vw,320px);line-height:.8;letter-spacing:-.06em;color:var(--ng-navy);
  will-change:transform;
}
.ng-hcard__text{margin-top:28px;max-width:44ch;color:var(--ng-sand-700)}
.ng-hcard__list{margin-top:16px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ng-hcard__list li{padding:6px 12px;border:1px solid var(--ng-line-strong);border-radius:var(--ng-r-pill);font-size:13px;font-weight:500;color:var(--ng-ink)}
.ng-hscroll__bar{position:absolute;z-index:2;left:var(--ng-gutter);right:var(--ng-gutter);bottom:12px;height:3px;background:rgba(107,96,88,.25);border-radius:3px;overflow:hidden;pointer-events:none}
.ng-hscroll__fill{display:block;height:100%;width:100%;background:var(--ng-royal);transform-origin:0 50%;transform:scaleX(var(--ng-p,0))}

@media (min-width:768px){
  .ng-hcard{flex-basis:62vw}
  .ng-hcard--intro{flex-basis:48vw}
}
/* Mode « fixé » (activé par le JS sur desktop, mouvement autorisé) */
.ng-hscroll.is-pinned{height:var(--ng-hs-h,300vh)}
.ng-hscroll.is-pinned .ng-hscroll__pin{position:sticky;top:0;height:100vh;height:100svh}
.ng-hscroll.is-pinned .ng-hscroll__track{overflow:visible;scroll-snap-type:none;height:100%;will-change:transform}
.ng-hscroll.is-pinned .ng-hcard{min-height:0;height:100%;flex-basis:clamp(420px,46vw,760px)}
.ng-hscroll.is-pinned .ng-hcard--intro{flex-basis:clamp(420px,42vw,680px);padding-top:calc(var(--ng-bar-h) + clamp(28px,4vw,56px))}
.ng-hscroll.is-pinned .ng-hcard:not(.ng-hcard--intro){padding-top:calc(var(--ng-bar-h) + clamp(28px,4vw,56px))}

/* 13. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ng-js .ng-reveal.is-pending{opacity:1;transform:none}
  .ng-js .ng-readtext .ng-w{color:var(--ng-ink)}
  .ng-offset .ng-display__line{transform:none!important}
  .ng-js .ng-footer__brand.is-pending .ng-footer__logo-dots,.ng-js .ng-footer__brand.is-pending .ng-footer__logo-word{opacity:1;transform:none}
}

/* 14. Impression ---------------------------------------------------------- */
@media print{
  body{padding-top:0;background:#fff}
  body::after,.ng-bar,.ng-skip{display:none!important}
}