@charset "UTF-8";
/* ===========================================================================
   Mozaë — Clarté · Thème Zendesk Guide · Templating API v4
   ---------------------------------------------------------------------------
   Règles de maintenance :
   · Toute couleur passe par une variable CSS déclarée dans :root.
     Le mode sombre se contente de redéfinir ces variables (document_head.hbs).
   · Les réglages du back-office sont injectés par Sass côté Zendesk. Dans une
     propriété personnalisée, Sass n'évalue que l'interpolation : on écrit donc
     toujours la forme interpolee, jamais la variable nue.
     (Attention : Sass interprete aussi l'interpolation a l'interieur des
     commentaires CSS — ne jamais en ecrire ici.)
   · Aucune image n'est requise pour le fonctionnement du thème : les visuels
     de rubrique sont des icônes vectorielles générées par script.js.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Jetons */
/* Cette feuille est volontairement autonome : elle ne contient AUCUNE valeur
   calculée par le préprocesseur de Zendesk. Les jetons ci-dessous sont la
   palette livrée ; templates/document_head.hbs les remplace par les couleurs
   et les dimensions choisies dans le back-office. Si quoi que ce soit échoue
   en amont, le thème reste complet et coloré au lieu de perdre ses couleurs.
   Seules exceptions, éprouvées : les trois règles font-family plus bas, qui
   utilisent la forme de substitution documentée par Zendesk. */
:root{
  --brand:#E58A2B;
  --brand-fill:#E58A2B;
  --brand-fill-hover:#CA7926;
  --brand-strong:#A85A0B;
  --brand-deep:#7C3F05;
  --brand-tint:#FAE8D5;
  --brand-veil:#FDF4EC;
  --on-brand:#FFFFFF;
  --on-fill:#1A1D19;

  --accent:#4E8A4A;
  --accent-strong:#3E6F3B;
  --accent-tint:#DFEADE;
  --accent-veil:#F1F6F1;

  --ink:#1A1D19;
  --bg:#FFFFFF;
  --surface:#FAF8F5;
  --surface-2:#F1EFEC;
  --line:#E7E2D9;
  --hairline:#F2EFEA;
  --muted:#5A5C59;
  --faint:#717370;
  --ghost:#919391;
  --field-bg:#FFFFFF;

  --link:#A85A0B;
  --link-hover:#7C3F05;
  --link-visited:#7C3F05;
  --focus:#E58A2B;
  --selection:#F7DCBF;

  --shadow-hue:rgba(58,42,20,.10);
  --shadow-hue-soft:rgba(58,42,20,.055);

  --font:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --title-weight:700;

  --maxw:1600px;
  --radius:14px;
  --fs-article:17px;
  --logo-h:36px;
  --measure:78ch;
  --hero-veil:0;
  --hero-image:none;
  --cover-opacity:1;
  --cover-inner-opacity:.45;
  --cover-pos:center bottom;
  --cover-blur:0px;
  --cover-veil:var(--bg);

  /* Teintes de section (6.5). Valeurs livrées ; document_head.hbs les
     recalcule à partir des couleurs du back-office et du réglage
     « Intensité des couleurs ». */
  --mood-w:10%;
  --mood-c:9%;
  --mood-tile:24%;
  --band-warm:#FCEFE2;
  --band-cool:#EEF4EE;
  --band-warm-line:#F6D8B8;
  --band-cool-line:#D3E3D2;
  --tile-warm:#F8DCC0;
  --tile-cool:#D2E3D1;
  --deep:#22361F;
  --grad-1:#E58A2B;
  --grad-2:#F4C27F;
  --gband-1:#FCEFE2;
  --gband-2:#FDF6EC;
  --gtile-1:#F8DCC0;
  --gtile-2:#FCEBD3;

  /* — Échelles — */
  --space-scale:1;
  --h-scale:1;
  --sp1:calc(4px * var(--space-scale));
  --sp2:calc(8px * var(--space-scale));
  --sp3:calc(12px * var(--space-scale));
  --sp4:calc(16px * var(--space-scale));
  --sp5:calc(20px * var(--space-scale));
  --sp6:calc(24px * var(--space-scale));
  --sp7:calc(32px * var(--space-scale));
  --sp8:calc(44px * var(--space-scale));
  --sp9:calc(64px * var(--space-scale));
  --sp10:calc(88px * var(--space-scale));

  --r-xs:calc(var(--radius) * .35);
  --r-sm:calc(var(--radius) * .6);
  --r-md:var(--radius);
  --r-lg:calc(var(--radius) * 1.35);
  --r-xl:calc(var(--radius) * 1.8);
  --r-pill:999px;

  --e1:0 1px 2px var(--shadow-hue-soft);
  --e2:0 2px 6px var(--shadow-hue-soft),0 1px 2px var(--shadow-hue-soft);
  --e3:0 8px 22px var(--shadow-hue-soft),0 2px 6px var(--shadow-hue-soft);
  --e4:0 18px 44px var(--shadow-hue),0 4px 12px var(--shadow-hue-soft);

  --ease:cubic-bezier(.2,.7,.3,1);
  --fast:.14s;
  --base:.22s;
  --slow:.34s;

  --gutter:clamp(16px,4vw,40px);
  --header-h:68px;
  --scroll-offset:calc(var(--header-h) + 28px);

  color-scheme:light;
}

/* Polices du back-office. Forme documentée par Zendesk et utilisée telle
   quelle par le thème Copenhagen : substitution directe dans une propriété
   ordinaire, jamais dans une propriété personnalisée. */
body,input,select,textarea,button{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5,h6,.brand__name,.spec-l{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
code,kbd,samp,pre,.kbd,.mono,
.tree__cat,.sidenav__title,.toc__title,.aside__title,.drawer__label,
.art__eyebrow,.card__count,.filters__n{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Le mode sombre est injecté par templates/document_head.hbs afin qu'il soit
   pilotable depuis le back-office sans dépendre de JavaScript. */

/* ------------------------------------------------------------ 2. Fondations */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--scroll-offset);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--selection);color:var(--ink)}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-heading);
  font-weight:var(--title-weight);
  line-height:1.18;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h1{font-size:calc(clamp(28px,3.6vw,40px) * var(--h-scale))}
h2{font-size:calc(clamp(21px,2.4vw,27px) * var(--h-scale))}
h3{font-size:calc(clamp(17px,1.6vw,19px) * var(--h-scale))}
h4{font-size:16px}
p{margin:0}
ul,ol{margin:0}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:min(var(--maxw),960px)}
.wrap--reading{max-width:min(var(--maxw),820px)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:200;background:var(--brand-fill);color:var(--on-fill);
  padding:12px 22px;border-radius:0 0 var(--r-md) var(--r-md);
  font-size:14px;font-weight:600;transition:transform var(--base) var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}
.stack>*+*{margin-top:var(--sp4)}
[hidden]{display:none !important}

/* --------------------------------------------------------------- 3. Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);
  padding:11px 20px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;
  cursor:pointer;text-align:center;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.btn svg{flex:none}
.btn--primary{background:var(--brand-fill);color:var(--on-fill);box-shadow:var(--e1)}
.btn--primary:hover{background:var(--brand-fill-hover);box-shadow:var(--e2);transform:translateY(-1px)}
.btn--accent{background:var(--accent-strong);color:#fff}
.btn--accent:hover{filter:brightness(.93);transform:translateY(-1px)}
.btn--ghost{background:var(--bg);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--brand);background:var(--brand-veil);color:var(--brand-strong)}
.btn--quiet{background:transparent;color:var(--muted);padding-inline:12px}
.btn--quiet:hover{background:var(--surface);color:var(--ink)}
.btn--block{width:100%}
.btn--lg{padding:14px 26px;font-size:15.5px}
.btn--sm{padding:8px 14px;font-size:13.5px}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;pointer-events:none}

/* Zendesk applique .button à certains contrôles générés */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);
  padding:11px 20px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer;
}
.button-primary,.button-large{background:var(--brand-fill);border-color:transparent;color:var(--on-fill)}

/* ------------------------------------------------- 4. Bandeau d'annonce */
.notice{
  display:flex;align-items:center;justify-content:center;gap:var(--sp3);
  flex-wrap:wrap;padding:10px var(--gutter);
  font-size:14px;line-height:1.45;text-align:center;
  background:var(--surface-2);color:var(--ink);
  border-bottom:1px solid var(--line);
}
.notice__icon{flex:none;color:var(--muted)}
.notice__link{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.notice--warn{background:var(--brand-veil);border-bottom-color:var(--brand-tint)}
.notice--warn .notice__icon{color:var(--brand-strong)}
.notice--brand{background:var(--brand-fill);color:var(--on-fill);border-bottom-color:transparent}
.notice--brand .notice__icon{color:currentColor}

/* --------------------------------------------------------------- 5. En-tête */
.hdr{
  position:relative;z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hdr--sticky{position:sticky;top:0}
.hdr__in{
  display:flex;align-items:center;gap:var(--sp5);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:10px var(--gutter);min-height:var(--header-h);
}
.hdr__left{display:flex;align-items:center;gap:var(--sp4);min-width:0}
.hdr__right{display:flex;align-items:center;gap:var(--sp4);margin-left:auto}

.brand{display:flex;align-items:center;gap:10px;min-width:0;border-radius:var(--r-sm)}
.brand__img{height:var(--logo-h);width:auto;max-width:190px;object-fit:contain;display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-family:var(--font-heading);font-weight:var(--title-weight);font-size:16.5px;letter-spacing:-.02em}
.brand__sub{font-size:11.5px;font-weight:500;color:var(--faint);letter-spacing:.015em}
.hdr__sep{width:1px;height:26px;background:var(--line);flex:none}

.nav{display:flex;align-items:center;gap:var(--sp5);font-size:14.5px;font-weight:500;color:var(--muted)}
.nav a{position:relative;padding:6px 0;transition:color var(--fast) var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}

/* Recherche compacte de l'en-tête */
.hdr__search{
  flex:1;max-width:380px;min-width:0;
  display:flex;align-items:center;gap:8px;
}
.hdr__search .search{margin:0;flex:1;min-width:0}
.hdr__search form{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 8px 6px 14px;
}
.hdr__search input[type=search]{
  flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:14px;padding:4px 0;
}
.hdr__search input[type=submit],.hdr__search button[type=submit]{
  flex:none;appearance:none;-webkit-appearance:none;
  border:0;border-radius:var(--r-pill);background:var(--brand-fill);color:var(--on-fill);
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;
  padding:8px 15px;cursor:pointer;transition:background var(--fast) var(--ease);
}
.hdr__search input[type=submit]:hover,.hdr__search button[type=submit]:hover{background:var(--brand-fill-hover)}


/* Sélecteur de gamme */
.picker{position:relative}
.picker__btn{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 13px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.picker__btn{white-space:nowrap}
.picker__btn:hover{border-color:var(--brand);background:var(--brand-veil)}
.picker__btn .chev{transition:transform var(--base) var(--ease)}
.picker.is-open .picker__btn .chev{transform:rotate(180deg)}
.picker__menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:70;
  min-width:270px;max-height:min(60vh,440px);overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:6px;box-shadow:var(--e4);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast);
}
.picker.is-open .picker__menu{opacity:1;visibility:visible;transform:none}
.picker__menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.picker__menu a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.8;flex:none}
.picker__menu a:hover{background:var(--brand-veil);color:var(--brand-strong)}
.picker__menu a:hover::before{opacity:1}
.picker__empty{padding:12px;font-size:13.5px;color:var(--faint)}

/* Sélecteur de langue */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--muted);padding:6px 4px;
}
.lang__btn:hover{color:var(--ink)}
.lang__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:200px;max-height:min(70vh,460px);overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:6px;box-shadow:var(--e4);list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast);
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:none}
.lang__menu a{display:block;padding:8px 11px;border-radius:var(--r-sm);font-size:13.5px;white-space:nowrap}
.lang__menu a:hover{background:var(--brand-veil);color:var(--brand-strong)}

.burger{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  border-radius:var(--r-sm);color:var(--ink);
}
.burger:hover{background:var(--surface)}

/* En-tête : variantes de style */
.hdr--brand{background:var(--brand-fill);border-bottom-color:transparent;color:var(--on-fill)}
.hdr--dark{background:#16181a;border-bottom-color:rgba(255,255,255,.1);color:#f3f3ef}
.hdr--brand .brand__name,.hdr--dark .brand__name{color:inherit}
.hdr--brand .brand__sub,.hdr--dark .brand__sub{color:rgba(255,255,255,.72)}
.hdr--brand .hdr__sep,.hdr--dark .hdr__sep{background:rgba(255,255,255,.24)}
.hdr--brand .nav,.hdr--dark .nav{color:rgba(255,255,255,.84)}
.hdr--brand .nav a:hover,.hdr--dark .nav a:hover,
.hdr--brand .nav a[aria-current],.hdr--dark .nav a[aria-current]{color:#fff}
.hdr--brand .nav a::after,.hdr--dark .nav a::after{background:#fff}
.hdr--brand .lang__btn,.hdr--dark .lang__btn{color:rgba(255,255,255,.84)}
.hdr--brand .lang__btn:hover,.hdr--dark .lang__btn:hover{color:#fff}
.hdr--brand .burger,.hdr--dark .burger{color:#fff}
.hdr--brand .burger:hover,.hdr--dark .burger:hover{background:rgba(255,255,255,.14)}
.hdr--brand .picker__btn,.hdr--dark .picker__btn{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff;
}
.hdr--brand .picker__btn:hover,.hdr--dark .picker__btn:hover{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);
}
.hdr--brand .hdr__search form,.hdr--dark .hdr__search form{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff;
}
.hdr--brand .hdr__search input[type=search],.hdr--dark .hdr__search input[type=search]{color:#fff}
.hdr--brand .hdr__search input[type=search]::placeholder,
.hdr--dark .hdr__search input[type=search]::placeholder{color:rgba(255,255,255,.66)}
.hdr--brand .hdr__search input[type=submit],.hdr--brand .hdr__search button[type=submit]{
  background:#fff;color:var(--brand-strong);
}
.hdr--brand .btn--ghost,.hdr--dark .btn--ghost{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;
}
.hdr--brand .btn--ghost:hover,.hdr--dark .btn--ghost:hover{background:rgba(255,255,255,.22);border-color:#fff;color:#fff}
.hdr--brand .btn--primary{background:#fff;color:var(--brand-strong)}
.hdr--brand .btn--primary:hover{background:#fff;filter:brightness(.94)}
.hdr--brand :focus-visible,.hdr--dark :focus-visible{outline-color:#fff}

/* ---------------------------------------------------------- 6. Menu mobile */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(15,14,10,.5);opacity:0;
  transition:opacity var(--base) var(--ease);
}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(88vw,360px);
  background:var(--bg);box-shadow:var(--e4);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp5) var(--sp5) var(--sp8);
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform var(--base) var(--ease);
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp3)}
.drawer__close{background:none;border:0;cursor:pointer;padding:8px;border-radius:var(--r-sm);color:var(--ink)}
.drawer__close:hover{background:var(--surface)}
.drawer a{padding:12px 14px;border-radius:var(--r-sm);font-size:15.5px;font-weight:500}
.drawer a:hover{background:var(--brand-veil);color:var(--brand-strong)}
.drawer__sep{height:1px;background:var(--line);margin:var(--sp3) 0}
.drawer__label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:0 14px;margin-bottom:var(--sp1);
}
.drawer__actions{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp4)}
.drawer__search{margin-bottom:var(--sp2)}
.drawer__search form{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:6px 6px 6px 14px;
}
.drawer__search input[type=search]{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:15px;padding:8px 0}
.drawer__search input[type=submit],.drawer__search button[type=submit]{
  flex:none;appearance:none;-webkit-appearance:none;
  border:0;border-radius:var(--r-sm);background:var(--brand-fill);color:var(--on-fill);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 15px;cursor:pointer;
}
.drawer .search-results-column,.drawer .instant-results{position:static;box-shadow:none;margin-top:8px}
body.no-scroll{overflow:hidden}

/* ----------------------------------------------------- 7. Recherche générale */
.searchbox{width:100%;max-width:680px;position:relative;z-index:2}
.searchbox--inline{max-width:400px;min-width:min(100%,300px)}
.searchbox--inline form{padding:5px 5px 5px 15px;border-radius:var(--r-md)}
.searchbox--inline input[type=search]{font-size:15px;padding:7px 0}
.searchbox--inline input[type=submit],.searchbox--inline button[type=submit]{padding:9px 18px;font-size:14px}
.searchbox form{
  display:flex;align-items:center;gap:var(--sp2);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:8px 8px 8px 18px;box-shadow:var(--e2);
  transition:box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);
}
.searchbox form:hover{box-shadow:var(--e3)}
.searchbox form:focus-within{
  border-color:var(--brand);box-shadow:var(--e3),0 0 0 4px var(--brand-tint);
}
.searchbox input[type=search]{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:16px;padding:10px 0;
}
.searchbox input[type=search]::placeholder{color:var(--faint)}
.searchbox input[type=submit],.searchbox button[type=submit]{
  flex:none;appearance:none;-webkit-appearance:none;
  border:0;cursor:pointer;border-radius:var(--r-md);
  background:var(--brand-fill);color:var(--on-fill);
  font-family:inherit;font-size:14.5px;font-weight:600;padding:12px 24px;
  transition:background var(--fast) var(--ease);
}
.searchbox input[type=submit]:hover,.searchbox button[type=submit]:hover{background:var(--brand-fill-hover)}
.searchbox .search-icon{flex:none;color:var(--faint)}

/* Suggestions instantanées de Zendesk */
.search-results-column,.instant-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--e4);overflow:hidden;text-align:left;
}
.instant-results ul{list-style:none;padding:6px;margin:0}
.instant-results a{display:block;padding:11px 13px;border-radius:var(--r-sm);font-size:14.5px}
.instant-results a:hover{background:var(--brand-veil);color:var(--brand-strong)}

/* -------------------------------------------------------- 8. Bandeau d'accueil */
.hero{
  position:relative;overflow:hidden;
  padding-block:var(--sp10) var(--sp9);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp4);
}
.hero--left .hero__in{align-items:flex-start;text-align:left}
.hero h1{font-size:calc(clamp(30px,5vw,50px) * var(--h-scale));line-height:1.05;max-width:20ch}
.hero__sub{font-size:clamp(15.5px,1.7vw,18px);color:var(--muted);max-width:60ch;line-height:1.55}
.hero .searchbox{margin-top:var(--sp3)}
.hero--left .searchbox{margin-inline:0}

.hero--gradient{
  background:
    radial-gradient(78ch 44ch at 12% -12%, var(--brand-tint), transparent 66%),
    radial-gradient(64ch 36ch at 92% -6%, var(--accent-tint), transparent 62%),
    radial-gradient(50ch 30ch at 55% 118%, var(--brand-veil), transparent 70%),
    var(--surface);
}
.hero--plain{background:var(--brand-veil)}
.hero--compact{background:none;border-bottom:1px solid var(--line);padding-block:var(--sp8) var(--sp7)}
.hero--compact h1{font-size:calc(clamp(24px,3vw,34px) * var(--h-scale))}
.hero__links{display:flex;flex-wrap:wrap;gap:var(--sp2);justify-content:center;margin-top:var(--sp3)}
.hero--left .hero__links{justify-content:flex-start}
.hero__links a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--muted);
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.hero__links a:hover{border-color:var(--brand);color:var(--brand-strong);transform:translateY(-1px)}

/* -------------------------------------------------------------- 9. Sections */
.band{padding-block:var(--sp9)}
.band--tint{background:var(--surface);border-block:1px solid var(--line)}
.band--tight{padding-block:var(--sp8)}
.band+.band--tint{border-top:0}
.sec__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp4);flex-wrap:wrap;margin-bottom:var(--sp2);
}
.sec__sub{font-size:15px;color:var(--muted);max-width:66ch;margin-bottom:var(--sp6)}
/* Cibles tactiles : les liens d'action isolés gardent une hauteur d'au moins
   24 px, conformément au critère « taille de cible » du WCAG 2.2. */
.sec__link{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  min-height:24px;padding-block:2px;
  font-size:14px;font-weight:600;color:var(--link);
  transition:gap var(--fast) var(--ease);
}
.sec__link:hover{gap:10px;color:var(--link-hover)}

.grid{display:grid;gap:var(--sp5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------- 10. Porte-icônes de carte */
.ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:calc(var(--radius) * .9);
  background:var(--brand-tint);color:var(--brand-strong);
  transition:transform var(--base) var(--ease);
}
.ico svg{width:22px;height:22px}
.ico--lg{width:56px;height:56px}
.ico--lg svg{width:26px;height:26px}
.ico__mono{
  font-family:var(--font-heading);font-weight:var(--title-weight);
  font-size:17px;letter-spacing:-.02em;text-transform:uppercase;
}
.ico--lg .ico__mono{font-size:21px}

/* Forme et teinte pilotées depuis le conteneur : aucun réglage n'a ainsi
   besoin d'être lu à l'intérieur des boucles des gabarits. */
.icons--circle .ico{border-radius:50%}
.icons--square .ico{border-radius:var(--r-xs)}
.icons--none .card__media,.icons--none .ico{display:none}
.tint--accent .ico{background:var(--accent-tint);color:var(--accent-strong)}
.tint--neutral .ico{background:var(--surface-2);color:var(--muted)}
.tint--alternate>*:nth-child(3n+2) .ico{background:var(--accent-tint);color:var(--accent-strong)}
.tint--alternate>*:nth-child(3n+3) .ico{background:var(--surface-2);color:var(--muted)}

/* ----------------------------------------------------------- 11. Cartes */
.card{
  position:relative;display:flex;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e1);overflow:hidden;
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),
             border-color var(--base) var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--e3);border-color:var(--brand)}
.card:hover .ico{transform:scale(1.06)}
.card__body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.card__body h3{font-size:calc(17px * var(--h-scale))}
.card__body p{
  font-size:14px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card__count{
  margin-top:auto;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.card__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--sp2);
  font-size:13.5px;font-weight:600;color:var(--link);
}
.card__go svg{transition:transform var(--base) var(--ease)}
.card:hover .card__go svg{transform:translateX(4px)}
.card__arrow{flex:none;align-self:center;color:var(--ghost);transition:transform var(--base) var(--ease),color var(--base) var(--ease)}
.card:hover .card__arrow{color:var(--brand);transform:translateX(4px)}

/* Vignette illustrée */
.cards--tile .card{flex-direction:column}
.cards--tile .card__media{
  position:relative;height:96px;flex:none;
  background:var(--surface);border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;padding-inline:var(--sp5);
}
.cards--tile .card__media::before{
  content:"";position:absolute;inset:0;opacity:.6;
  background-image:radial-gradient(var(--brand-tint) 1px,transparent 1px);
  background-size:13px 13px;
}
.cards--tile .ico{position:relative;z-index:2;box-shadow:var(--e1);background:var(--bg)}
.cards--tile.tint--accent .ico,.cards--tile.tint--neutral .ico{background:var(--bg)}
.cards--tile .card__body{padding:var(--sp4) var(--sp5) var(--sp5)}

/* Ligne compacte */
.cards--compact .card__media,.cards--plain .card__media{display:contents}
.cards--compact .card{align-items:center;gap:var(--sp4);padding:var(--sp4) var(--sp5)}
.cards--compact .card__body p{-webkit-line-clamp:2}

/* Sobre, sans cadre */
.cards--plain .card{
  border-color:transparent;box-shadow:none;background:transparent;
  align-items:flex-start;gap:var(--sp4);padding:var(--sp4) 0;
}
.cards--plain .card:hover{transform:none;box-shadow:none;border-color:transparent}
.cards--plain .card:hover .card__body h3{color:var(--link)}

/* --------------------------------------------------- 12. Listes d'articles */
.alist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp8)}
@media (max-width:820px){.alist{grid-template-columns:minmax(0,1fr)}}
.alist a{
  display:flex;align-items:center;gap:var(--sp3);
  padding:var(--sp4) 0;border-bottom:1px solid var(--hairline);
  font-size:15px;font-weight:500;transition:color var(--fast) var(--ease);
}
.alist a:hover{color:var(--link)}
.alist__ico{flex:none;color:var(--brand)}
.alist__label{flex:1;min-width:0}
.alist__arrow{flex:none;color:var(--ghost);transition:transform var(--base) var(--ease),color var(--base) var(--ease)}
.alist a:hover .alist__arrow{color:var(--brand);transform:translateX(4px)}

/* Liste dense de rubrique */
.rows{display:flex;flex-direction:column}
.rows a{
  display:flex;align-items:center;gap:var(--sp3);
  padding:14px var(--sp5);border-bottom:1px solid var(--hairline);
  font-size:15px;font-weight:500;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),padding-inline-start var(--fast) var(--ease);
}
.rows a:last-child{border-bottom:0}
.rows a:hover{background:var(--brand-veil);color:var(--brand-strong);padding-inline-start:calc(var(--sp5) + 6px)}
.rows__dot{width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.85;flex:none;transition:opacity var(--fast) var(--ease)}
.rows a:hover .rows__dot{opacity:1}
.rows__label{flex:1;min-width:0}
.rows__arrow{flex:none;color:var(--ghost);transition:transform var(--base) var(--ease),color var(--base) var(--ease)}
.rows a:hover .rows__arrow{color:var(--brand);transform:translateX(4px)}

/* Panneau de rubrique (page catégorie) */
.panel{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--e1);margin-bottom:var(--sp6);
}
.panel__head{
  display:flex;align-items:flex-start;gap:var(--sp4);
  padding:var(--sp5);border-bottom:1px solid var(--hairline);background:var(--surface);
}
.panel__titles{flex:1;min-width:0}
.panel__titles h2{font-size:calc(19px * var(--h-scale));line-height:1.3}
.panel__titles h2 a:hover{color:var(--link)}
.panel__desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:5px}
.pill{
  flex:none;font-size:12px;font-weight:600;white-space:nowrap;
  padding:4px 11px;border-radius:var(--r-pill);
  background:var(--brand-veil);border:1px solid var(--brand-tint);color:var(--brand-deep);
}
.panel__all{
  display:inline-flex;align-items:center;gap:6px;margin:var(--sp4) var(--sp5) var(--sp5);
  min-height:24px;padding-block:2px;
  font-size:13.5px;font-weight:600;color:var(--link);transition:gap var(--fast) var(--ease);
}
.panel__all:hover{gap:10px;color:var(--link-hover)}

/* --------------------------------------------------- 13. Bandeau de contact */
.helpband{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp6);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp7);
}
.helpband h2{font-size:calc(21px * var(--h-scale));margin-bottom:6px}
.helpband p{font-size:15px;color:var(--muted);max-width:54ch}
.helpband__actions{display:flex;gap:var(--sp3);flex-wrap:wrap}

/* --------------------------------------------- 14. En-têtes de page + fil */
.crumbs{font-size:13px;min-height:20px}
.crumbs ol,ol.breadcrumbs{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:0;margin:0;padding:0;font-weight:500;
}
.breadcrumbs li{display:inline-flex;align-items:center;color:var(--faint)}
.breadcrumbs li:not(:first-child)::before{content:"›";margin-inline:9px;color:var(--ghost)}
.breadcrumbs a{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--faint);transition:color var(--fast) var(--ease);
}
.breadcrumbs a:hover{color:var(--link)}
.breadcrumbs li:last-child{color:var(--ink);font-weight:600}

.pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding-block:var(--sp6) var(--sp7)}
.pagehead__row{display:flex;align-items:center;gap:var(--sp4);margin-top:var(--sp4)}
.pagehead h1{margin-bottom:6px}
.pagehead__desc{font-size:15.5px;color:var(--muted);line-height:1.55;max-width:72ch}
.pagehead__actions{margin-left:auto;flex:none;display:flex;gap:var(--sp2);flex-wrap:wrap}
@media (max-width:700px){
  .pagehead__row{flex-wrap:wrap}
  .pagehead__actions{margin-left:0;width:100%}
}

/* ----------------------------------------------------------- 15. Gabarits */
.cols{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:var(--sp7) var(--gutter) var(--sp6);
  display:grid;grid-template-columns:272px minmax(0,1fr);gap:clamp(28px,4vw,64px);
}
.cols--reverse{grid-template-columns:minmax(0,1fr) 340px}
.cols--single{grid-template-columns:minmax(0,1fr)}
@media (max-width:1000px){
  .cols,.cols--reverse{grid-template-columns:minmax(0,1fr);gap:var(--sp6)}
}

.sidenav{align-self:start;position:sticky;top:calc(var(--header-h) + 16px);min-width:0}
@media (max-width:1000px){.sidenav{position:static}}
.sidenav__title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--sp3);padding-inline-start:12px;
}
.sidenav a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--muted);line-height:1.4;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.sidenav a:hover{background:var(--brand-veil);color:var(--brand-strong)}
.sidenav a.is-active{
  background:var(--brand-tint);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand);
}

.skel{
  display:block;height:36px;border-radius:var(--r-sm);margin-bottom:6px;
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:skel 1.3s ease-in-out infinite;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================================
   16. PAGE ARTICLE — gabarit documentaire pleine largeur
   ========================================================================== */
.readbar{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:150;
  height:3px;width:0;background:var(--brand);
  border-end-end-radius:2px;transition:width .1s linear;
}

.subbar{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.hdr--sticky~.subbar,.hdr--sticky+.subbar{top:var(--header-h)}
.subbar__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:10px var(--gutter);
  display:flex;align-items:center;gap:var(--sp4);
}
.subbar__crumbs{flex:1;min-width:0;overflow:hidden}
.subbar__crumbs .breadcrumbs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.subbar__crumbs .breadcrumbs::-webkit-scrollbar{display:none}
.subbar__tools{display:flex;align-items:center;gap:6px;flex:none}
/* Boutons générés par Zendesk (abonnement, partage) alignés sur le thème */
.subbar__follow button,.subbar__follow a,
.section-subscribe button,.section-subscribe a{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:13.5px;font-weight:600;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.subbar__follow button:hover,.subbar__follow a:hover,
.section-subscribe button:hover,.section-subscribe a:hover{
  border-color:var(--brand);color:var(--brand-strong);background:var(--brand-veil);
}
.article-share ul,.share ul{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.article-share a,.share a{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--faint);background:var(--bg);
}
.article-share a:hover,.share a:hover{border-color:var(--brand);color:var(--brand-strong)}

/* Une seule colonne par défaut ; les colonnes latérales n'apparaissent qu'à
   partir des largeurs où elles sont réellement utiles. La classe .doc--hasnav
   est posée par le gabarit selon le réglage « Arborescence à gauche ». */
.doc{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:var(--sp7) var(--gutter) var(--sp8);
  display:grid;gap:clamp(28px,3.4vw,60px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1001px) and (max-width:1240px){
  .doc--hasnav{grid-template-columns:262px minmax(0,1fr)}
}
@media (min-width:1241px){
  .doc--three.doc--hasnav{grid-template-columns:270px minmax(0,1fr) 250px}
  .doc--three:not(.doc--hasnav){grid-template-columns:minmax(0,1fr) 250px}
  .doc--two:not(.doc--hasnav){grid-template-columns:minmax(0,1fr) 260px}
  .doc--two.doc--hasnav{
    grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:"aside main" "nav main";
    /* La première rangée se dimensionne sur le sommaire seul : sans cela, la
       colonne centrale (qui couvre les deux rangées) l'étirerait et
       repousserait l'arborescence très bas. */
    grid-template-rows:max-content 1fr;
    row-gap:var(--sp6);
  }
  .doc--two.doc--hasnav .doc__nav{grid-area:nav}
  .doc--two.doc--hasnav .doc__main{grid-area:main}
  .doc--two.doc--hasnav .doc__aside{grid-area:aside;max-height:none;position:static}
}
.doc--centered{max-width:min(var(--maxw),940px)}
.doc--centered .doc__nav,.doc--centered .doc__aside{display:none}
.doc--centered .toc-mobile{display:block}

.doc__nav{position:sticky;top:calc(var(--header-h) + var(--sp7));min-width:0;max-height:calc(100vh - var(--header-h) - 60px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--sp4)}
.doc__aside{position:sticky;top:calc(var(--header-h) + var(--sp7));min-width:0;max-height:calc(100vh - var(--header-h) - 60px);overflow-y:auto;overscroll-behavior:contain}
.doc__main{min-width:0}
.doc__nav::-webkit-scrollbar,.doc__aside::-webkit-scrollbar{width:6px}
.doc__nav::-webkit-scrollbar-thumb,.doc__aside::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* Arborescence de navigation */
.tree{display:flex;flex-direction:column;gap:2px;font-size:14px}
.tree__group+.tree__group{margin-top:var(--sp2)}
.tree__cat{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:0 12px;margin-bottom:var(--sp2);
}
.tree__sec{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px 12px;border:0;background:none;cursor:pointer;text-align:start;
  border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--ink);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.tree__sec:hover{background:var(--surface)}
.tree__sec .chev{flex:none;color:var(--ghost);transition:transform var(--base) var(--ease)}
.tree__sec[aria-expanded=true] .chev{transform:rotate(90deg)}
.tree__sec.is-current{color:var(--brand-strong)}
.tree__list{
  display:flex;flex-direction:column;gap:1px;
  margin:2px 0 var(--sp2);padding-inline-start:12px;
  border-inline-start:1px solid var(--line);
}
.tree__list a{
  display:block;padding:7px 12px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:450;line-height:1.45;color:var(--muted);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.tree__list a:hover{background:var(--surface);color:var(--ink)}
.tree__list a.is-active{
  color:var(--brand-strong);font-weight:650;background:var(--brand-veil);
  box-shadow:inset 2px 0 0 var(--brand);
}
.tree__more{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  font-size:13px;font-weight:600;color:var(--link);
}

/* Sommaire */
.toc__title,.aside__title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--sp3);
}
.toc__list{display:flex;flex-direction:column;gap:1px;position:relative}
.toc__list a{
  padding:6px 12px;border-inline-start:2px solid var(--line);
  font-size:13px;line-height:1.45;color:var(--muted);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.toc__list a:hover{color:var(--ink);background:var(--surface)}
.toc__list a.is-active{color:var(--brand-strong);font-weight:650;border-inline-start-color:var(--brand)}
.toc__list a.lvl-3{padding-inline-start:26px;font-size:12.5px}
.toc__list a.lvl-4{padding-inline-start:38px;font-size:12.5px}

.aside__box{
  margin-top:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--hairline);
}
.aside__box:first-child{margin-top:0;padding-top:0;border-top:0}
.aside__actions{display:flex;flex-direction:column;gap:8px}

/* Sommaire replié pour les écrans étroits */
.toc-mobile{display:none;margin-bottom:var(--sp5)}
.toc-mobile>summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);font-size:14.5px;font-weight:600;
}
.toc-mobile>summary::-webkit-details-marker{display:none}
.toc-mobile>summary .chev{margin-inline-start:auto;transition:transform var(--base) var(--ease)}
.toc-mobile[open]>summary{border-end-start-radius:0;border-end-end-radius:0}
.toc-mobile[open]>summary .chev{transform:rotate(180deg)}
.toc-mobile__body{
  border:1px solid var(--line);border-top:0;
  border-end-start-radius:var(--r-md);border-end-end-radius:var(--r-md);
  padding:var(--sp3);max-height:52vh;overflow-y:auto;
}

/* En-tête d'article */
.art__head{margin-bottom:var(--sp6);padding-bottom:var(--sp5);border-bottom:1px solid var(--hairline)}
.art__eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp3);
  min-height:24px;padding-block:3px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--link);
}
.art__eyebrow:hover{color:var(--link-hover)}
.art h1{font-size:calc(clamp(29px,3.6vw,42px) * var(--h-scale));line-height:1.1;margin-bottom:var(--sp4)}
.art__meta{
  display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
  font-size:13.5px;color:var(--faint);
}
.art__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ghost);flex:none}
.art__meta .avatar img,.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block}
.art__meta-item{display:inline-flex;align-items:center;gap:6px}

/* ---------------------------------------------- 17. Corps rédactionnel */
/* La colonne occupe toute la largeur disponible, mais le texte courant reste
   à une longueur de ligne confortable. Tableaux, images, blocs de code et
   iframes débordent volontairement de cette mesure pour profiter de la place :
   c'est ce qui rend le gabarit pleine largeur réellement utile. */
.prose{
  font-size:var(--fs-article);
  line-height:1.75;
  color:var(--ink);
  max-width:none;
}
.prose>p,.prose>ul,.prose>ol,.prose>dl,
.prose>h2,.prose>h3,.prose>h4,.prose>h5,.prose>h6,
.prose>blockquote,.prose>figcaption{max-width:var(--measure)}
.prose>*+*{margin-top:1.05em}
.prose h2{
  font-size:calc(1.5em * var(--h-scale));margin-top:2em;
  scroll-margin-top:var(--scroll-offset);position:relative;
}
.prose h3{font-size:calc(1.2em * var(--h-scale));margin-top:1.7em;scroll-margin-top:var(--scroll-offset);position:relative}
.prose h4{font-size:1.02em;margin-top:1.4em;scroll-margin-top:var(--scroll-offset);position:relative}
.prose a{
  color:var(--link);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px;
  transition:text-decoration-thickness var(--fast) var(--ease),color var(--fast) var(--ease);
}
.prose a:hover{color:var(--link-hover);text-decoration-thickness:2px}
.prose a:visited{color:var(--link-visited)}
.prose ul,.prose ol{padding-inline-start:1.5em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--ink)}
.prose strong{font-weight:650}
.prose img{
  display:block;border-radius:var(--r-md);border:1px solid var(--hairline);
  margin-block:1.6em;max-width:100%;
}
.prose figure{margin:1.6em 0}
.prose figcaption{margin-top:.6em;font-size:.82em;color:var(--faint);text-align:center}
.prose code{
  font-family:var(--font-mono);font-size:.86em;
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-xs);padding:.12em .38em;
}
.prose pre{
  position:relative;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp5);font-family:var(--font-mono);font-size:.86em;line-height:1.65;
}
.prose pre code{background:none;border:0;padding:0;font-size:1em}
.prose blockquote{
  margin-block:1.6em;padding:var(--sp4) var(--sp5);
  background:var(--brand-veil);border:1px solid var(--brand-tint);
  border-inline-start:3px solid var(--brand);border-radius:var(--r-md);
  color:var(--muted);
}
.prose blockquote>*+*{margin-top:.8em}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.prose table{
  width:100%;border-collapse:collapse;font-size:.92em;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.prose thead th{
  background:var(--surface);text-align:start;font-weight:650;
  padding:11px 14px;border-bottom:1px solid var(--line);
}
.prose td,.prose tbody th{padding:11px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose iframe,.prose video{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-md)}
.prose .wysiwyg-text-align-center{text-align:center}
.prose .wysiwyg-text-align-right{text-align:right}
.prose .wysiwyg-text-align-justify{text-align:justify}
.prose .wysiwyg-indent1{padding-inline-start:2em}
.prose .wysiwyg-indent2{padding-inline-start:4em}
.prose .wysiwyg-indent3{padding-inline-start:6em}

/* --------------------------------------------------------------------------
   Encadrés, surlignages et cellules colorées.
   L'éditeur de Zendesk écrit la couleur de FOND dans le contenu de l'article,
   mais jamais la couleur du TEXTE : celle-ci vient du thème. En mode sombre,
   l'encre claire du thème se retrouvait donc posée sur un fond pâle figé dans
   l'article — donc illisible. script.js mesure le fond réellement peint et
   repose une encre contrastée ; ces règles habillent le résultat, et le
   `mark` reste lisible même si le script ne s'exécute pas.
   -------------------------------------------------------------------------- */
.prose [data-onbg]{border-radius:calc(var(--r-sm) - 1px)}
.prose [data-onbg="light"]{--onbg-link:#8A3B00;--onbg-rule:rgba(0,0,0,.14)}
.prose [data-onbg="dark"]{--onbg-link:#F3B173;--onbg-rule:rgba(255,255,255,.20)}
.prose [data-onbg] a{color:var(--onbg-link);text-decoration-color:var(--onbg-link)}
.prose [data-onbg] a:hover{color:var(--onbg-link)}
.prose [data-onbg] code{background:var(--onbg-rule);border-color:var(--onbg-rule);color:inherit}
.prose [data-onbg] hr{border-top-color:var(--onbg-rule)}
.prose [data-onbg] :is(td,th){border-color:var(--onbg-rule)}
/* Un bloc entier peint mérite un peu d'air, sinon le texte touche le bord. */
.prose>:is(p,div,table)[data-onbg]{padding:.85em 1em}
.prose mark{background:#FDE68A;color:#16181A;padding:.06em .28em;border-radius:3px}

/* Enrichissements appliqués par script.js */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.6em;border-radius:var(--r-md)}
.table-scroll table{margin:0;min-width:520px}
.anchor-link{
  position:absolute;inset-inline-start:-1.35em;top:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:var(--ghost);opacity:0;
  transition:opacity var(--fast) var(--ease),color var(--fast) var(--ease);
}
.prose :is(h2,h3,h4):hover .anchor-link,.anchor-link:focus-visible{opacity:1}
.anchor-link:hover{color:var(--brand)}
@media (max-width:820px){.anchor-link{display:none}}
.copy-btn{
  position:absolute;top:8px;inset-inline-end:8px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--bg);color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  opacity:0;transition:opacity var(--fast) var(--ease),color var(--fast) var(--ease);
}
.prose pre:hover .copy-btn,.copy-btn:focus-visible{opacity:1}
.copy-btn:hover{color:var(--ink);border-color:var(--brand)}
.copy-btn.is-done{color:var(--accent-strong);border-color:var(--accent)}
.ext-icon{display:inline-block;vertical-align:baseline;margin-inline-start:.25em;opacity:.55}
.zoomable{cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(12,11,8,.86);padding:var(--gutter);cursor:zoom-out;
  opacity:0;visibility:hidden;transition:opacity var(--base) var(--ease),visibility var(--base);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:92vh;border-radius:var(--r-md);box-shadow:var(--e4)}
.lightbox__close{
  position:absolute;top:16px;inset-inline-end:16px;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__close:hover{background:rgba(255,255,255,.3)}

/* ------------------------------------------------ 18. Fin d'article */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp3)}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);font-size:13.5px;font-weight:500;color:var(--muted);
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.chip:hover{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-veil)}
.chips--tags .chip{border-radius:var(--r-pill);font-size:13px}

.blockend{margin-top:var(--sp7)}
.blockend__title{font-size:13px;font-weight:650;color:var(--faint);margin-bottom:var(--sp3)}

.vote{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap;
  margin-top:var(--sp7);padding:var(--sp6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.vote h2{font-size:calc(17px * var(--h-scale))}
.vote__controls{display:flex;gap:var(--sp2);flex-wrap:wrap}
.vote__controls .article-vote,.vote__controls .button{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.vote__controls .article-vote:hover{border-color:var(--brand);background:var(--brand-veil);color:var(--brand-strong)}
.vote__controls .button-primary{background:var(--brand-fill);border-color:transparent;color:var(--on-fill)}
.vote__count{display:block;width:100%;margin-top:var(--sp2);font-size:12.5px;color:var(--faint)}

.artnav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp4);margin-top:var(--sp7);
}
@media (max-width:640px){.artnav{grid-template-columns:minmax(0,1fr)}}
/* Sur deux colonnes, « Suivant » reste à droite même s'il est seul. */
@media (min-width:641px){.artnav a.is-next{grid-column:2}}
.artnav a{
  display:flex;flex-direction:column;gap:5px;padding:var(--sp4) var(--sp5);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.artnav a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--e2)}
.artnav__dir{font-size:12px;font-weight:600;color:var(--faint);display:inline-flex;align-items:center;gap:6px}
.artnav__title{font-size:15px;font-weight:600;line-height:1.35}
.artnav a.is-next{text-align:end}
.artnav a.is-next .artnav__dir{justify-content:flex-end}

.relatives{margin-top:var(--sp8)}
.relatives h2,.relatives h3{font-size:calc(18px * var(--h-scale));margin-bottom:var(--sp4)}
.relatives ul{list-style:none;padding:0;margin:0;display:grid;gap:0 var(--sp8);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.relatives ul{grid-template-columns:minmax(0,1fr)}}
.relatives li{border-bottom:1px solid var(--hairline)}
.relatives li a{display:block;padding:13px 0;font-size:14.5px;font-weight:500}
.relatives li a:hover{color:var(--link)}

/* ------------------------------------------------------ 19. Commentaires */
.comments{margin-top:var(--sp8);padding-top:var(--sp7);border-top:1px solid var(--line)}
.comments__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;margin-bottom:var(--sp5)}
.comments__head h2{font-size:calc(20px * var(--h-scale))}
.comment-list{list-style:none;padding:0;margin:0}
.comment{padding:var(--sp5) 0;border-bottom:1px solid var(--hairline)}
.comment-author{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp3);font-size:14px;font-weight:600}
.comment-author .meta-data{font-weight:400;color:var(--faint);font-size:13px}
.comment-body{font-size:15px;line-height:1.68;color:var(--ink)}
.comment-body>*+*{margin-top:.9em}
.comment-body img{max-width:100%;border-radius:var(--r-sm)}
.comment-form{margin-top:var(--sp6)}
.comment-form textarea{
  width:100%;min-height:130px;resize:vertical;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--field-bg);font-size:15px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.comment-form textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.comment-form-controls{display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;margin-top:var(--sp3)}
.comment-form-controls input[type=submit]{
  border:0;cursor:pointer;border-radius:var(--r-sm);
  background:var(--brand-fill);color:var(--on-fill);
  font-weight:600;font-size:14.5px;padding:11px 22px;
}
.comment-sorter{position:relative}
.comment-sorter .dropdown-toggle{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 12px;font-size:13.5px;font-weight:600;
}
.comment-sorter .dropdown-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;min-width:180px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--e4);padding:6px;display:none;
}
.comment-sorter .dropdown-menu a{display:block;padding:8px 11px;border-radius:var(--r-sm);font-size:13.5px}
.comment-sorter .dropdown-menu a:hover{background:var(--brand-veil);color:var(--brand-strong)}
.comment-sorter.is-open .dropdown-menu{display:block}
.attachments{list-style:none;margin:var(--sp3) 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.attachment-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attachments a{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--link);text-decoration:underline;text-underline-offset:2px;
}
.attachment-meta{display:flex;gap:10px}
.meta-group{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp3);margin:var(--sp2) 0 0;padding:0}
.meta-data{font-size:13px;color:var(--faint)}
.comment-pending,.escalation-badge{font-size:11.5px}
.community-badge-titles,.community-badge-achievements{
  list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center;
}
.community-badge{font-size:11px;color:var(--faint)}
.community-badge-achievement img{width:18px;height:18px}

/* --------------------------------------------------- 20. Résultats de recherche */
.results{padding-block:var(--sp7) var(--sp8)}
.results__head{margin-bottom:var(--sp6)}
.results__count{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}

/* Filtres de la colonne latérale */
.filters{display:flex;flex-direction:column;gap:2px}
.filters a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--muted);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.filters a:hover{background:var(--brand-veil);color:var(--brand-strong)}
.filters a.is-active{
  background:var(--brand-tint);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand);
}
.filters__n{
  flex:none;font-family:var(--font-mono);font-size:11px;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:1px 8px;
}
.result{padding:var(--sp5) 0;border-bottom:1px solid var(--hairline)}
.result__path{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-size:12px;font-weight:600}
.result__path a{
  background:var(--brand-veil);color:var(--brand-strong);
  padding:3px 10px;border-radius:var(--r-pill);
}
.result__path a:hover{background:var(--brand-tint)}
.result h2,.result h3{font-size:calc(18px * var(--h-scale));line-height:1.4;margin-bottom:6px}
.result h2 a:hover,.result h3 a:hover{color:var(--link)}
.result p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:88ch}
.result h2,.result h3{max-width:70ch}
.result em{background:var(--brand-tint);font-style:normal;padding:0 3px;border-radius:3px}
.empty{
  padding:var(--sp9) var(--sp5);text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.empty h2{font-size:calc(19px * var(--h-scale));margin-bottom:var(--sp2);color:var(--ink)}
.no-activities,.no-activity{display:block;padding:var(--sp8) 0;text-align:center;color:var(--muted);font-size:15px}

/* ------------------------------------------------------- 21. Formulaires */
.form-field,.hbs-form .form-field{margin-bottom:var(--sp5)}
label,.label,.form-field>label{
  display:block;margin-bottom:7px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=url],input[type=date],textarea,select,.nesty-input{
  width:100%;padding:12px 15px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--field-bg);color:var(--ink);font-size:15px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
input:focus,textarea:focus,select:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}
textarea{min-height:150px;resize:vertical}
.form-field .description,.form-field .nesty-input+p{font-size:13px;color:var(--faint);margin-top:6px}
input[type=submit],button[type=submit]{
  cursor:pointer;border:0;border-radius:var(--r-sm);appearance:none;-webkit-appearance:none;
  background:var(--brand-fill);color:var(--on-fill);
  font-family:inherit;font-size:15px;font-weight:600;padding:13px 28px;
}
input[type=submit]:hover,button[type=submit]:hover{background:var(--brand-fill-hover)}
.form-field input[type=checkbox],.form-field input[type=radio]{width:auto;margin-inline-end:8px}
.upload-dropzone{
  border:1px dashed var(--line);border-radius:var(--r-md);
  padding:var(--sp5);text-align:center;color:var(--muted);font-size:14px;background:var(--surface);
}

/* Encarts latéraux de la page contact */
.box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp5);margin-bottom:var(--sp4);
}
.box--accent{background:var(--accent-veil);border-color:var(--accent-tint)}
.box--brand{background:var(--brand-veil);border-color:var(--brand-tint)}
.box h2,.box h3{font-size:calc(16px * var(--h-scale));margin-bottom:var(--sp3)}
.box p{font-size:13.5px;color:var(--muted);line-height:1.55}
.box__link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp3);min-height:24px;font-size:13.5px;font-weight:600;color:var(--link)}
.tree__more{min-height:24px}
.ftr__nav a{display:inline-flex;align-items:center;min-height:24px}
.box__link:hover{gap:10px;color:var(--link-hover)}
.crow{display:flex;gap:var(--sp3);padding:var(--sp3) 0;border-bottom:1px solid var(--hairline)}
.crow:last-child{border-bottom:0}
.crow__ico{
  width:38px;height:38px;flex:none;border-radius:calc(var(--radius) * .8);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--accent-strong);border:1px solid var(--line);
}
.crow b{display:block;font-size:14.5px}
.crow span{font-size:13px;color:var(--muted)}

/* Composants React de Zendesk (Garden) — accord avec le thème */
#new-request-form,#service-catalog-item,#approval-request,#approval-request-list,
#service-catalog-main-content,.request-list-root{
  --zd-radius:var(--r-md);
}
[data-garden-id^="forms."],[data-garden-id^="dropdowns."]{border-radius:var(--r-md) !important}
[data-garden-id="buttons.button"]{border-radius:var(--r-sm) !important}
[data-garden-id],[data-garden-id] *{font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* --------------------------------------------------- 22. Pages du compte */
.acctnav{margin-bottom:var(--sp6);border-bottom:1px solid var(--line)}
.acctnav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;flex-wrap:wrap}
.acctnav a{
  display:block;padding:11px 16px;border-bottom:2px solid transparent;
  font-size:14.5px;font-weight:500;color:var(--muted);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.acctnav a:hover{color:var(--ink);background:var(--surface)}
.acctnav .current a,.acctnav a[aria-current]{color:var(--brand-strong);border-bottom-color:var(--brand);font-weight:650}

.toolbar{display:flex;gap:var(--sp3);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--sp5)}
.toolbar>div{display:flex;flex-direction:column;gap:6px}
.toolbar input,.toolbar select{width:auto;min-width:200px}

.table{
  width:100%;border-collapse:collapse;font-size:14.5px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.table th{
  text-align:start;padding:12px 16px;background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
}
.table td{padding:15px 16px;border-bottom:1px solid var(--hairline)}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--fast) var(--ease)}
.table tbody tr:hover{background:var(--surface)}
.table a{font-weight:600}
.table a:hover{color:var(--link)}

.status-label{
  display:inline-block;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:650;background:var(--surface-2);color:var(--muted);
}
.status-label-open,.status-label-new{background:var(--brand-tint);color:var(--brand-deep)}
.status-label-pending,.status-label-hold{background:var(--surface-2);color:var(--muted)}
.status-label-solved,.status-label-closed{background:var(--accent-tint);color:var(--accent-strong)}

.request-details{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp2) var(--sp5);
  font-size:14.5px;padding:var(--sp5);margin:0 0 var(--sp4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.request-details dt{font-weight:650;color:var(--muted)}
.request-details dd{margin:0}
.request-collaborators{list-style:none;margin:0;padding:0}
.request-follow-up{margin-top:var(--sp5);font-size:14.5px;color:var(--muted)}

.profile-header{text-align:center;padding-bottom:var(--sp6);margin-bottom:var(--sp6);border-bottom:1px solid var(--line)}
.profile-header .user-avatar{width:80px;height:80px;margin-inline:auto;box-shadow:var(--e2)}
.profile-contribution-list{list-style:none;margin:0;padding:0}
.profile-contribution{padding:var(--sp5) 0;border-bottom:1px solid var(--hairline)}
.profile-contribution h3{font-size:calc(16.5px * var(--h-scale));margin-bottom:5px}
.profile-contribution .breadcrumbs{margin:5px 0;font-size:12.5px}
.community-follow{display:flex;justify-content:center;margin-top:var(--sp3)}
.subscriptions-table td:last-child{text-align:end}

/* -------------------------------------------------------- 23. Pagination */
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:var(--sp7) 0}
.pagination li a,.pagination li span{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid transparent;font-size:14px;font-weight:500;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.pagination li a:hover{background:var(--surface);border-color:var(--line);color:var(--link)}
.pagination-current,.pagination [aria-current]{background:var(--brand-tint);color:var(--brand-deep);font-weight:650}

/* -------------------------------------------------------- 24. Pied de page */
.ftr{margin-top:var(--sp10);border-top:1px solid var(--line);background:var(--bg)}
.ftr--tinted{background:var(--surface)}
.ftr--dark{background:#16181a;border-top-color:transparent;color:#dcdcd6}
.ftr--dark a{color:#dcdcd6}
.ftr--dark .ftr__note{color:rgba(255,255,255,.6)}
.ftr--dark .ftr__social a{border-color:rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.75)}
.ftr--dark .ftr__social a:hover{border-color:#fff;color:#fff}
.ftr__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:var(--sp7) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap;
}
.ftr__note{font-size:13.5px;color:var(--faint)}
.ftr__nav{display:flex;align-items:center;gap:var(--sp5);flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.ftr__nav a:hover{color:var(--link)}
.ftr__social{display:flex;gap:var(--sp2)}
.ftr__social:empty{display:none}
.ftr__social a{
  width:38px;height:38px;border-radius:calc(var(--radius) * .75);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg);color:var(--faint);
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.ftr__social a:hover{color:var(--brand-strong);border-color:var(--brand);transform:translateY(-2px)}

.totop{
  position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:90;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brand-fill);color:var(--on-fill);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--e4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--base) var(--ease),visibility var(--base),transform var(--base) var(--ease),background var(--fast) var(--ease);
}
.totop.is-shown{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-fill-hover)}

/* --------------------------------------------------------- 25. Communauté */
.topic-card{
  display:flex;flex-direction:column;gap:8px;padding:var(--sp5);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.topic-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--e2)}
.topic-card h2,.topic-card h3{font-size:calc(17px * var(--h-scale))}
.topic-card p{font-size:14px;color:var(--muted);line-height:1.55}
.post-list{list-style:none;margin:0;padding:0}
.post{display:flex;gap:var(--sp4);padding:var(--sp5) 0;border-bottom:1px solid var(--hairline)}
.post__body{flex:1;min-width:0}
.post__title{font-size:calc(16.5px * var(--h-scale));margin-bottom:5px}
.post__title a:hover{color:var(--link)}
.post__meta{display:flex;gap:var(--sp3);flex-wrap:wrap;font-size:13px;color:var(--faint);margin-top:6px}
.post__stats{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;min-width:64px}
.post__stat-n{font-size:17px;font-weight:650}
.post__stat-l{font-size:11px;color:var(--faint)}
.striped-list{list-style:none;margin:0;padding:0}
.striped-list-item{padding:var(--sp4) 0;border-bottom:1px solid var(--hairline)}

/* --------------------------------------------------------- 26. Réactif */
@media (max-width:1240px){
  .doc__aside{display:none}
  .toc-mobile{display:block}
}
@media (max-width:1080px){
  .hdr__search{max-width:260px}
}
@media (max-width:1000px){
  .nav,.picker,.hdr__sep,.lang,.hdr__search{display:none}
  .hdr__right>.btn{display:none}
  .burger{display:inline-flex}
  .doc{padding-top:var(--sp5)}
  .doc__nav{position:static;max-height:none;overflow:visible;padding-bottom:0}
  .toc-mobile{display:block}
}
@media (max-width:520px){
  /* Le champ et son bouton s'empilent : libelle entier visible et cible
     tactile pleine largeur. */
  .searchbox form{flex-wrap:wrap;padding:10px;border-radius:var(--r-md)}
  .searchbox input[type=search]{flex:1 1 100%;padding:6px 6px 10px}
  .searchbox input[type=submit],.searchbox button[type=submit]{flex:1 1 100%;padding:13px}
}
@media (max-width:760px){
  :root{--header-h:60px}
  .hero{padding-block:var(--sp8) var(--sp7)}
  .helpband{padding:var(--sp5);flex-direction:column;align-items:flex-start}
  .helpband__actions{width:100%}
  .helpband__actions .btn{flex:1}
  .panel__head{padding:var(--sp4)}
  .rows a{padding:13px var(--sp4)}
  .rows a:hover{padding-inline-start:calc(var(--sp4) + 4px)}
  .panel__all{margin:var(--sp3) var(--sp4) var(--sp4)}
  .vote{flex-direction:column;align-items:flex-start;padding:var(--sp5)}
  .totop{inset-inline-end:14px;inset-block-end:14px;width:42px;height:42px}
  .prose{font-size:calc(var(--fs-article) - 1px)}
  .prose pre{padding:var(--sp4);border-radius:var(--r-sm)}
  .subbar__tools .btn__label{display:none}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border-bottom:1px solid var(--line);padding:var(--sp3) 0}
  .table td{border:0;padding:5px var(--sp4)}
  .table td::before{content:attr(data-th);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
  .request-details{grid-template-columns:minmax(0,1fr);gap:2px}
  .request-details dt{margin-top:var(--sp3)}
  .toolbar input,.toolbar select{min-width:0;width:100%}
  .toolbar>div{width:100%}
}

/* Écran mobile : arborescence repliée par défaut */
@media (max-width:1000px){
  .tree-mobile>summary{
    display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--surface);font-size:14.5px;font-weight:600;
  }
  .tree-mobile>summary::-webkit-details-marker{display:none}
  .tree-mobile>summary .chev{margin-inline-start:auto;transition:transform var(--base) var(--ease)}
  .tree-mobile[open]>summary .chev{transform:rotate(180deg)}
  .tree-mobile__body{padding:var(--sp3) 0}
}
@media (min-width:1001px){
  .tree-mobile>summary{display:none}
}

/* ============================================================================
   29. AMBIANCE 6.5 — sections plus marquées
   Chaque zone de page reçoit sa propre teinte (chaude, froide, neutre ou
   profonde) pour que l'œil distingue les blocs sans lire les titres. Toutes
   les teintes viennent de variables : le mode sombre et le réglage
   « Intensité des couleurs » les recalculent dans document_head.hbs.
   ========================================================================== */

/* En-tête : liseré dégradé */
.hdr--accent{border-bottom-color:transparent}
.hdr--accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--grad-1),var(--grad-2));
}

/* Bandeau d'accueil : fonds */
.hero{border-bottom:0;background:var(--band-warm)}
.hero--gradient{
  background:
    radial-gradient(90ch 52ch at 6% -14%, var(--gtile-1), transparent 68%),
    radial-gradient(70ch 44ch at 96% 0%, var(--gtile-2), transparent 64%),
    var(--gband-1);
}
.hero--plain{background:var(--band-warm)}
.hero--image{background:var(--surface)}
.hero--compact{background:var(--bg)}
.hero--vivid{
  background:
    radial-gradient(80ch 50ch at 12% -20%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(60ch 40ch at 100% 120%, rgba(0,0,0,.10), transparent 70%),
    var(--brand-fill);
  color:var(--on-fill);
}
.hero--vivid .hero__sub{color:inherit;opacity:.82}
.hero--h-compact{padding-block:var(--sp8) var(--sp7)}
.hero--h-tall{padding-block:calc(var(--sp10) * 1.6) calc(var(--sp10) * 1.3)}

/* Image de couverture : deux calques sous le contenu.
   ::before porte l'image (opacité, flou, cadrage), ::after le voile. Le fond
   propre du bandeau reste dessous : en baissant l'opacité, l'image se fond
   dans le dégradé ou l'aplat choisi. */
:is(.hero.cover--home,.hero.cover--all,.hero--image,.pagehead.cover--all,.pagehead.has-pimg){
  position:relative;isolation:isolate;overflow:hidden;
}
:is(.hero.cover--home,.hero.cover--all,.hero--image,.pagehead.cover--all)::before{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  inset:calc(var(--cover-blur) * -3);
  background-image:var(--hero-image);background-repeat:no-repeat;
  background-size:cover;background-position:var(--cover-pos);
  opacity:var(--cover-opacity);filter:blur(var(--cover-blur));
}
.pagehead.cover--all::before{opacity:var(--cover-inner-opacity)}
:is(.hero.cover--home,.hero.cover--all,.hero--image,.pagehead.cover--all)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--cover-veil);opacity:var(--hero-veil);
}
/* Texte clair : la couverture repose alors sur une base sombre, pour qu'une
   photo sombre reste sombre même à opacité réduite. */
:is(.hero.cover--home,.hero.cover--all,.hero--image,.pagehead.cover--all).cover-text--light{
  background:#151812;color:#FFFFFF;
}
:is(.hero.cover--home,.hero.cover--all,.hero--image).cover-text--light .hero__sub,
.pagehead.cover--all.cover-text--light .pagehead__desc{color:rgba(255,255,255,.86)}
.pagehead.cover--all.cover-text--light .breadcrumbs :is(li,a){color:rgba(255,255,255,.8)}
.pagehead.cover--all.cover-text--light .breadcrumbs li:last-child{color:#fff}

/* Visuel par produit sur la page catégorie : photo fondue à droite. */
.pagehead__pimg{
  position:absolute;z-index:-1;pointer-events:none;
  inset:0 0 0 auto;width:min(46%,620px);
  background:var(--pimg) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);
          mask-image:linear-gradient(90deg,transparent,#000 45%);
}
.pagehead.has-pimg .pagehead__desc,.pagehead.has-pimg h1{max-width:min(60ch,52vw)}
@media (max-width:700px){.pagehead__pimg{width:100%;opacity:.28}}

/* Liens rapides du bandeau */
.hero__links a{box-shadow:var(--e1)}
.hero--vivid .hero__links a{background:rgba(255,255,255,.9);border-color:transparent;color:#2a2a24}

/* Titres de section : barre de couleur */
.sec__head h2{display:flex;align-items:center;gap:12px}
.sec__head h2::before{
  content:"";flex:none;width:6px;height:.95em;border-radius:3px;
  background:linear-gradient(180deg,var(--grad-1),var(--grad-2));
}
.band--products .sec__sub{margin-bottom:var(--sp7)}

/* Bande « produits » : teinte chaude + trame de points */
.band--warm{
  background-color:var(--band-warm);
  background-image:radial-gradient(var(--band-warm-line) 1.3px,transparent 1.6px);
  background-size:24px 24px;
  border-block:1px solid var(--band-warm-line);
}
.band--warm+.band{border-top:0}

/* Cartes produit plus colorées */
.cards--tile .card{box-shadow:var(--e2)}
.cards--tile .card__media{background:var(--tile-warm);border-bottom:0;height:104px}
.cards--tile .card__media::before{
  background-image:radial-gradient(rgba(255,255,255,.55) 1.2px,transparent 1.5px);
  background-size:14px 14px;opacity:1;
}
.cards--tile.tint--alternate>:nth-child(3n+2) .card__media,
.cards--tile.tint--accent .card__media{background:var(--tile-cool)}
.cards--tile.tint--alternate>:nth-child(3n+3) .card__media,
.cards--tile.tint--neutral .card__media{background:var(--surface-2)}
.cards--tile .card:hover{border-color:var(--brand);box-shadow:var(--e4)}
.cards--tile .card__body h3{font-size:calc(18px * var(--h-scale))}
/* Avec un visuel produit : la photo remplit l'entête de carte, l'icône
   reste en pastille par-dessus. */
.cards--tile .card.has-pimg .card__media{
  height:156px;background:var(--pimg) center/cover no-repeat;align-items:flex-end;padding-bottom:var(--sp3);
}
.cards--tile .card.has-pimg .card__media::before{display:none}
.cards--plain .card.has-pimg .card__media,.cards--compact .card.has-pimg .card__media{background:none}

/* « Les plus consultés » : lignes à pastille */
.band--promoted .alist a{padding-inline:12px;border-radius:var(--r-sm);border-bottom-color:var(--line)}
.band--promoted .alist a:hover{background:var(--band-warm)}
.band--promoted .alist__ico{
  box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:50%;
  background:var(--tile-warm);color:var(--brand-strong);
}

/* Une bande par catégorie, teintes alternées */
.catbands>.band--cat:nth-child(odd){background:var(--band-cool);border-block:1px solid var(--band-cool-line)}
.catbands>.band--cat:nth-child(even){background:var(--bg)}
.catbands>.band--cat+.band--cat{border-top:0}
.sec__head--cat{align-items:center;flex-wrap:nowrap;gap:var(--sp4);margin-bottom:var(--sp5)}
.sec__head--cat h2::before{display:none}
.sec__head--cat .ico{width:52px;height:52px;border-radius:calc(var(--radius) * .95);background:var(--brand-fill);color:var(--on-fill);box-shadow:var(--e2)}
.sec__head--cat .ico svg{width:25px;height:25px}
.catbands>.band--cat:nth-child(odd) .sec__head--cat .ico{background:var(--accent-strong);color:#fff}
.sec__titles{flex:1;min-width:0}
.sec__desc{font-size:14.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.sec__link--pill{
  flex:none;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--e1);
}
.sec__link--pill:hover{border-color:var(--brand)}
.band--cat .card{box-shadow:var(--e1)}
@media (max-width:620px){
  .sec__head--cat{flex-wrap:wrap}
  .sec__link--pill{margin-inline-start:calc(52px + var(--sp4))}
}

/* Bandeau d'aide : vert profond */
.band--help{padding-top:var(--sp9)}
.helpband--deep{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--deep);border-color:transparent;color:#F3F6EE;
  box-shadow:var(--e3);
}
.helpband--deep::before{
  content:"";position:absolute;z-index:-1;inset-block-start:-150px;inset-inline-start:-110px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--grad-1),transparent 68%);opacity:.4;
}
.helpband--deep::after{
  content:"";position:absolute;z-index:-1;inset-block-end:-140px;inset-inline-start:20%;
  width:420px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);
}
.helpband--deep h2{color:#fff}
.helpband--deep p{color:rgba(243,246,238,.82)}
.helpband--deep .btn--primary{background:var(--brand);color:var(--on-fill)}
.helpband--deep .btn--ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.helpband--deep .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.helpband--deep :focus-visible{outline-color:#fff}

/* En-têtes des pages internes */
.pagehead{
  background:linear-gradient(115deg,var(--gband-1) 0%,var(--gband-1) 40%,var(--gband-2) 100%);
  border-bottom:1px solid var(--band-warm-line);
  padding-block:var(--sp6) var(--sp8);
}
.pagehead h1{font-size:calc(clamp(30px,3.8vw,44px) * var(--h-scale))}

/* Colonnes latérales sur carte */
.sidenav{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp4) var(--sp3);
}
.sidenav a.is-active,.filters a.is-active{background:var(--tile-warm)}

/* Page catégorie : en-têtes de rubrique alternés */
.panel{box-shadow:var(--e2)}
.panel__head{background:var(--band-warm);border-bottom-color:var(--band-warm-line);box-shadow:inset 4px 0 0 var(--brand)}
#main-content>.panel:nth-of-type(even) .panel__head{
  background:var(--band-cool);border-bottom-color:var(--band-cool-line);box-shadow:inset 4px 0 0 var(--accent);
}
#main-content>.panel:nth-of-type(even) .pill{background:var(--tile-cool);border-color:var(--band-cool-line);color:var(--ink)}
.panel__head .ico{background:var(--bg);box-shadow:var(--e1)}

/* Article */
.subbar{background:var(--surface)}
.art__eyebrow{
  padding:4px 12px;border-radius:var(--r-pill);
  background:var(--band-warm);border:1px solid var(--band-warm-line);color:var(--brand-deep);
}
.prose h2{padding-bottom:.35em;border-bottom:2px solid var(--band-warm-line)}
.doc__aside [data-toc]{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp4) var(--sp3) var(--sp4) var(--sp4);
}
.doc__aside .aside__box+.aside__box{border-top:0}
.vote{background:var(--band-cool);border-color:var(--band-cool-line);box-shadow:inset 4px 0 0 var(--accent)}
.vote .vote__count{color:var(--muted)}
.artnav a:hover{background:var(--band-warm)}

/* Résultats de recherche : cartes + emplacement des réponses rapides IA */
.results>.result-list{display:flex;flex-direction:column;gap:var(--sp3)}
.result{
  padding:var(--sp5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  box-shadow:var(--e1);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.result:hover{border-color:var(--brand);box-shadow:var(--e3)}
/* Le helper generative_answers est rendu par Zendesk en tête de colonne : on lui
   laisse de l'air et une largeur de lecture confortable. */
.results>:not(.results__head):not(.result-list):not(.empty):not(.pagination):first-child{
  margin-bottom:var(--sp6);max-width:min(100%,960px);
}
.results__head{padding-bottom:var(--sp3);border-bottom:2px solid var(--band-warm-line)}

/* Pied de page vert profond */
.ftr--deep{background:var(--deep);border-top:0;color:#E4E9DD}
.ftr--deep a,.ftr--deep .lang__btn,.ftr--deep .ftr__nav{color:#E4E9DD}
.ftr--deep .ftr__nav a:hover,.ftr--deep .lang__btn:hover{color:#fff}
.ftr--deep .ftr__note{color:rgba(228,233,221,.72)}
.ftr--deep .ftr__social a{border-color:rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.8)}
.ftr--deep .ftr__social a:hover{border-color:#fff;color:#fff}
.ftr--deep :focus-visible{outline-color:#fff}
.ftr--tinted{background:var(--band-warm)}
.ftr--tinted .ftr__note{color:var(--muted)}

/* -------------------------------------- 27. Mouvement réduit et impression */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
@media print{
  .hdr,.ftr,.subbar,.drawer,.totop,.readbar,.doc__nav,.doc__aside,.toc-mobile,
  .vote,.comment-form,.artnav,.helpband,.notice,.skip-link,.copy-btn,.anchor-link{display:none !important}
  body{background:#fff;color:#000}
  .doc,.cols{display:block;padding:0;max-width:none}
  .prose{max-width:none;font-size:11.5pt}
  .prose a{text-decoration:none;color:#000}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .prose pre,.prose table{break-inside:avoid}
  .prose h2,.prose h3{break-after:avoid}
}

/* --------------------------------- 28. Attente de chargement des formulaires */
.form-loading{display:flex;flex-direction:column;gap:var(--sp4);max-width:640px}
.form-loading .skel{margin:0}

/* Colonne latérale masquée (aucune catégorie lisible) : le contenu reprend
   toute la largeur au lieu de s'entasser dans la colonne de 272 px. */
.cols:has(>.sidenav[hidden]){grid-template-columns:minmax(0,1fr)}

/* Menu des langues du pied de page : s'ouvre vers le haut et garde une
   encre lisible sur son fond clair, quel que soit le style du pied. */
.ftr .lang__menu{top:auto;bottom:calc(100% + 8px)}
.ftr .lang__menu a,.ftr--deep .lang__menu a,.ftr--dark .lang__menu a{color:var(--ink)}
.ftr .lang__menu a:hover{color:var(--brand-strong)}