/* ==========================================================================
   Laurelle NOB Consulting : feuille de style unique (v8)
   Rythme sombre dominant, comme la version d'origine, sans ses marqueurs.
   Titres : Gelasio. Texte et interface : Open Sans.
   Or fonctionnel. Aucune ressource externe.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Polices
   Open Sans pour tout le site, comme controlrisks.com : une seule famille,
   titres en 600, texte en 400. Libre Caslon Display n'est conservé que pour
   le filigrane décoratif et le monogramme. */
@font-face{font-family:'OpenSans';src:url('fonts/opensans-latin.woff2') format('woff2-variations');font-weight:300 800;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'OpenSans';src:url('fonts/opensans-latin-ext.woff2') format('woff2-variations');font-weight:300 800;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'OpenSans';src:url('fonts/opensans-latin-italic.woff2') format('woff2-variations');font-weight:300 800;font-style:italic;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Gelasio';src:url('fonts/gelasio.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Caslon';src:url('fonts/caslon-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+2000-206F;}

/* --------------------------------------------------------------- 2. Jetons */
:root{
  --paper:#FFFFFF;
  --surface:#F2F4F7;
  --surface-2:#E8EBF0;
  --line:#D9DDE4;
  --line-soft:#E7EAEF;
  --line-strong:#AFB6C1;

  --ink:#0E151D;
  --ink-body:#2B343F;
  --ink-mute:#55606D;

  --navy:#1B2A41;
  --navy-deep:#121D2C;
  --navy-soft:#1F3C6B;          /* second ton du hero : ecart de luminosite porte de 4 a 9 points */
  --navy-line:#33415A;
  --on-navy:#DCE1E8;
  --on-navy-mute:#98A3B2;
  --on-navy-mute-2:#AEB9C9;     /* meme role, lisible aussi sur le second ton */

  --gold:#D4AF37;
  --gold-soft:#E0C25F;
  --gold-ink:#866D1D;           /* seule variante utilisable en texte sur fond clair */

  /* Une seule famille pour tout le texte. --mark ne sert qu'au filigrane. */
  --sans:'OpenSans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --disp:'Gelasio',Georgia,'Times New Roman',serif;   /* titres */
  --mark:'Caslon',Georgia,serif;

  --shell:1180px;
  --gut:clamp(20px,4vw,48px);
  --sec:clamp(60px,7.5vw,108px);
  --sec-s:clamp(44px,5.5vw,76px);

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:44px;--s8:60px;--s9:80px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --z-drawer:180;--z-head:200;--z-flag:300;--z-skip:400;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;}
body{font-family:var(--sans);font-size:16.5px;line-height:1.7;font-weight:400;
  color:var(--ink-body);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;}
.hero :focus-visible,.pagehead :focus-visible,.band :focus-visible,.sitefoot :focus-visible{outline-color:var(--gold-soft);}
::selection{background:var(--navy);color:#fff;}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);}
.measure{max-width:66ch;}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:14px 22px;z-index:var(--z-skip);text-decoration:none;font-size:14px;}
.skip:focus{left:0;}

/* --------------------------------------------------------------- 3. Titres */
h1,h2{font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.16;text-wrap:balance;}
h3,h4{font-family:var(--sans);font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.2;text-wrap:balance;}
/* Le niveau de titre des entrées d'index suit la structure du document ;
   l'apparence, elle, ne change pas. */
/* Entrees de liste : niveau h2 dans le document, apparence de h3 sur la page. */
.index .row h2,.points li h2,.toolset .grp h2{font-family:var(--sans);font-size:18.5px;letter-spacing:-.006em;line-height:1.35;}
h1{font-size:clamp(34px,4.9vw,60px);line-height:1.1;}
h2{font-size:clamp(26px,3vw,38px);line-height:1.18;}
h3{font-size:18.5px;letter-spacing:-.006em;line-height:1.35;}
p{text-wrap:pretty;}
strong{font-weight:600;color:var(--ink);}
.field{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);}

/* --------------------------------------------------------------- 4. En-tête */
.masthead{position:sticky;top:0;z-index:var(--z-head);background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease);}
.masthead.is-stuck{box-shadow:0 1px 8px rgba(14,21,29,.08);}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:82px;transition:height .3s var(--ease);}
.masthead.is-stuck .bar{height:64px;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none;}
.brand .mono{width:42px;height:42px;background:var(--navy);color:#fff;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;flex:none;transition:width .3s var(--ease),height .3s var(--ease);}
.masthead.is-stuck .brand .mono{width:34px;height:34px;font-size:14px;}
/* Signature en Libre Caslon Display, pour retrouver l'allure de la
   version d'origine. Le sous-titre reste en Open Sans. */
.brand .name{font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);white-space:nowrap;line-height:1.15;}
.brand .name small{display:block;font-family:var(--sans);font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:none;color:var(--ink-mute);margin-top:5px;transition:opacity .25s var(--ease),max-height .3s var(--ease);}
.masthead.is-stuck .brand .name small{opacity:0;max-height:0;overflow:hidden;}
.mainnav>ul{display:flex;align-items:center;gap:30px;list-style:none;}
.mainnav a{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-body);text-decoration:none;padding:30px 0;position:relative;white-space:nowrap;transition:color .18s var(--ease),padding .3s var(--ease);}
.masthead.is-stuck .mainnav a{padding:21px 0;}
.mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);}
.mainnav a:hover{color:var(--ink);}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1);}
.mainnav a[aria-current="page"]{color:var(--ink);font-weight:600;}
/* Sélecteur de langue.
   Le rembourrage vertical de « .mainnav a » s'appliquait aussi à ce lien et
   l'étirait sur toute la hauteur de l'en-tête : d'où la boîte trop haute.
   La règle ci-dessous est plus spécifique et reprend la main. */
.langswitch{display:flex;align-items:center;gap:7px;margin-left:var(--s2);padding-left:var(--s4);position:relative;}
.langswitch::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--line);}
.langswitch .cur,.mainnav .langswitch a{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;padding:0;line-height:1;}
.langswitch .cur{color:var(--ink);}
.mainnav .langswitch a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s var(--ease),border-color .18s var(--ease);}
.mainnav .langswitch a::after{display:none;}
.mainnav .langswitch a:hover{color:var(--ink);border-bottom-color:var(--gold);}
.langswitch .sep{color:var(--line-strong);font-size:12px;line-height:1;}
/* L'en-tête compacté redéfinit le rembourrage des liens de navigation :
   on le neutralise aussi pour le sélecteur de langue. */
.masthead.is-stuck .mainnav .langswitch a{padding:0 0 2px;}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line-strong);cursor:pointer;}
.burger i{display:block;width:17px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .28s var(--ease),opacity .18s var(--ease);}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.drawer{display:none;border-bottom:1px solid var(--line);background:var(--paper);z-index:var(--z-drawer);}
.drawer.open{display:block;}
.drawer ul{list-style:none;padding:var(--s2) 0 var(--s5);}
.drawer a{display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:16.5px;font-weight:500;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line-soft);}
.drawer a[aria-current="page"]{color:var(--ink-mute);}
.drawer a[aria-current="page"]::after{content:"";width:18px;height:2px;background:var(--gold);}
.drawer .minor a{font-size:13.5px;font-weight:400;color:var(--ink-mute);padding:12px 0;}
@media(max-width:1100px){.mainnav li.foldable{display:none;}.burger{display:block;}.mainnav>ul{gap:14px;}}
.brand .court{display:none;}
/* Sous 520 px, la signature complete en Caslon poussait la navigation
   hors de l'ecran : 447 px de contenu pour 375 px de fenetre. On bascule
   sur le nom d'usage, qui est aussi celui employe partout ailleurs. */
@media(max-width:520px){.brand .full{display:none;}.brand .court{display:inline;}}
@media(max-width:430px){.brand .name{font-size:13px;letter-spacing:.11em;}.brand .name small{display:none;}.masthead .bar{height:70px;}}
.no-js .drawer{display:block;}
.no-js .burger{display:none;}

/* --------------------------------------------------------------- 5. Hero sombre
   Le bloc d'ouverture occupe la première fenêtre, comme sur la version d'origine.
   La profondeur vient de trois choses : la masse sombre, un fond en deux tons
   séparés par un filet, et le cartouche clair qui chevauche le bas du bloc. */
.hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden;}
/* Le passage d'un ton à l'autre était une arête franche : elle se lisait
   comme un défaut d'affichage. Elle est remplacée par un fondu de 30 % de
   la largeur. C'est le seul dégradé du site, et il sert à supprimer une
   couture, pas à décorer. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 46%,var(--navy-soft) 76%,var(--navy-soft) 100%);}
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform-origin:left;animation:draw 1.1s var(--ease-out) both;}
/* Hauteur resserrée (août 2026) : à 1440×900, les boutons passaient sous la
   ligne de flottaison. Le bloc tient désormais dans la première fenêtre. */
.hero .shell{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px) calc(clamp(56px,8vw,104px) + 46px);min-height:clamp(400px,58vh,620px);display:grid;grid-template-columns:minmax(0,1fr);align-items:center;column-gap:clamp(40px,6vw,96px);}
.hero .shell.has-ledger{grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);}
@media(max-width:900px){.hero .shell.has-ledger{grid-template-columns:1fr;row-gap:var(--s7);}}
.hero h1{color:#fff;max-width:19ch;}
.hero .standfirst{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.72;color:var(--on-navy);max-width:56ch;margin-top:var(--s6);}
.hero .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);}
.hero .locus{margin-top:var(--s6);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-mute-2);}
@media(max-width:900px){.hero::before{background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 58%,var(--navy-soft) 88%,var(--navy-soft) 100%);}}

/* Cartouche chevauchant */
.docwrap{position:relative;z-index:2;margin-top:-46px;}
.docblock{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--gold);display:grid;grid-template-columns:repeat(4,1fr);}
.docblock>div{padding:22px 24px 24px;border-right:1px solid var(--line-soft);}
.docblock>div:last-child{border-right:none;}
.docblock dt{margin-bottom:var(--s2);}
.docblock dd{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.45;}
@media(max-width:900px){
  .docblock{grid-template-columns:repeat(2,1fr);}
  .docblock>div{border-bottom:1px solid var(--line-soft);}
  .docblock>div:nth-child(2n){border-right:none;}
  .docblock>div:nth-last-child(-n+2){border-bottom:none;}
}
@media(max-width:520px){
  .docwrap{margin-top:-32px;}
  .docblock{grid-template-columns:1fr;}
  .docblock>div{border-right:none;border-bottom:1px solid var(--line-soft);padding:18px 20px 20px;}
  .docblock>div:last-child{border-bottom:none;}
}

/* --------------------------------------------------------------- 6. Bandeau de page intérieure */
.pagehead{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden;}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 54%,var(--navy-soft) 82%,var(--navy-soft) 100%);}
.pagehead::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform-origin:left;animation:draw 1.1s var(--ease-out) both;}
.pagehead .shell{position:relative;z-index:1;padding-block:clamp(46px,6.5vw,88px);}
.pagehead h1{color:#fff;max-width:21ch;}
.pagehead .standfirst{margin-top:var(--s5);max-width:60ch;color:var(--on-navy);font-size:clamp(16px,1.35vw,18.5px);line-height:1.7;}
.crumb{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-mute-2);margin-bottom:var(--s5);}
.crumb a{color:var(--on-navy-mute-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);}
.crumb a:hover{color:var(--gold-soft);border-color:var(--gold-soft);}
.crumb i{font-style:normal;color:var(--gold-soft);margin-inline:var(--s2);}
@media(max-width:900px){.pagehead::before{background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 62%,var(--navy-soft) 100%);}}

/* --------------------------------------------------------------- 7. Boutons */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.04em;text-decoration:none;padding:15px 28px;min-height:50px;border:1px solid var(--navy);background:var(--navy);color:#fff;transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);}
.btn .arw{width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .28s var(--ease);flex:none;}
.btn .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);}
.btn:hover .arw{transform:translateX(4px);}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy-deep);}
.btn-onnavy{background:none;border-color:rgba(220,225,232,.45);color:#fff;}
.btn-onnavy:hover{background:rgba(255,255,255,.09);border-color:#fff;}
.btn-line{background:none;color:var(--ink);border-color:var(--line-strong);}
.btn-line:hover{background:none;border-color:var(--ink);color:var(--ink);}
.btn-invert{background:#fff;border-color:#fff;color:var(--navy);}
.btn-invert:hover{background:var(--on-navy);border-color:var(--on-navy);color:var(--navy-deep);}
.tlink{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .2s var(--ease);}
.tlink:hover{border-color:var(--gold);}

/* --------------------------------------------------------------- 8. Sections */
section{padding-block:var(--sec);}
section.tight{padding-block:var(--sec-s);}
section.hairline{border-top:1px solid var(--line);}
/* --surface n'est plus utilisé que par le bloc d'appel en bas de page.
   Deux blocs voisins de même couleur donnaient l'impression d'un trait
   posé au milieu d'un aplat. Le corps des pages reste blanc. */
section.plate{background:var(--paper);border-top:1px solid var(--line);}
.sectionhead{max-width:60ch;margin-bottom:clamp(34px,4.5vw,56px);}
/* Marque de tête de section : le filet or de la signature du pied de page,
   repris à l'identique (32 px, 2 px). Un seul motif, décliné partout. */
.sectionhead h2::before{content:"";display:block;width:32px;height:2px;background:var(--gold);margin-bottom:var(--s4);}
.sectionhead p{margin-top:var(--s4);color:var(--ink-mute);}

.index{border-top:1px solid var(--ink);}
.index .row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:var(--s2) var(--s7);padding-block:28px;border-bottom:1px solid var(--line-soft);align-items:baseline;position:relative;}
.index .row::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--gold);transition:width .55s var(--ease);}
.index .row:hover::after{width:100%;}
.index .row p{color:var(--ink-mute);font-size:15.5px;}
a.index-row{text-decoration:none;display:block;}
a.index-row h3{transition:color .2s var(--ease);}
a.index-row:hover h3{color:var(--gold-ink);}
@media(max-width:780px){.index .row{grid-template-columns:1fr;gap:var(--s2);padding-block:24px;}}

.points{list-style:none;border-top:1px solid var(--ink);}
.points li{padding-block:26px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:var(--s2) var(--s7);align-items:baseline;}
.points p{color:var(--ink-mute);font-size:15.5px;}
@media(max-width:780px){.points li{grid-template-columns:1fr;gap:var(--s2);padding-block:22px;}}

.commit{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 var(--s7);border-top:1px solid var(--ink);}
.commit dt{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);padding-block:26px;border-bottom:1px solid var(--line-soft);}
.commit dd{padding-block:26px;border-bottom:1px solid var(--line-soft);color:var(--ink-mute);max-width:70ch;}
@media(max-width:780px){.commit{grid-template-columns:1fr;}.commit dt{padding:24px 0 0;border-bottom:none;}.commit dd{padding:var(--s2) 0 24px;}}

/* Outils, groupés par famille */
.toolset{border-top:1px solid var(--ink);}
.toolset .grp{padding-block:24px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s2) var(--s7);align-items:baseline;}
.toolset .grp h3{font-size:15.5px;position:relative;}
.toolset .grp p{font-family:var(--sans);font-size:16px;color:var(--ink-body);line-height:1.85;}
@media(max-width:780px){.toolset .grp{grid-template-columns:1fr;gap:var(--s2);}}

/* --------------------------------------------------------------- 9. Bande sombre */
.band{background:var(--navy);color:var(--on-navy);position:relative;}
.band::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);}
.band .shell{padding-block:clamp(56px,7.5vw,104px);}
/* Ces deux blocs definissent deja leur rythme vertical dans .shell.
   La regle generique « section { padding-block } » s'y ajoutait : les blancs
   etaient comptes deux fois, soit 216 px morts par bloc et par page. */
section.band,section.callout{padding-block:0;}
.band h1,.band h2,.band h3{color:#fff;}
.band p{color:var(--on-navy);}
.band .field{color:var(--on-navy-mute);}
.band .statement{font-family:var(--disp);font-weight:600;font-size:clamp(25px,3vw,38px);line-height:1.22;letter-spacing:-.005em;color:#fff;max-width:19ch;}
.band .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,76px);align-items:start;}
@media(max-width:900px){.band .split{grid-template-columns:1fr;}}
.band .tools{border-top:1px solid var(--navy-line);margin-top:var(--s6);padding-top:var(--s5);}
.band .tools p{font-family:var(--sans);font-size:14.5px;color:var(--on-navy);margin-top:var(--s2);line-height:1.95;}

/* --------------------------------------------------------------- 10. Duo, portrait encadré sombre */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,5vw,76px);align-items:start;}
@media(max-width:900px){.duo{grid-template-columns:1fr;}}
.portrait{background:var(--navy);padding:26px 26px 30px;}
/* Aucun filet sous le portrait : l'espacement suffit à séparer
   l'image de la légende. */
.portrait .nm{font-family:var(--sans);font-weight:600;font-size:20px;color:#fff;margin-top:var(--s5);line-height:1.25;letter-spacing:-.01em;}
.portrait .rule{height:var(--s3);}
.portrait p{font-family:var(--sans);font-size:13.5px;color:var(--on-navy);line-height:1.75;}
.prose p{margin-bottom:var(--s5);max-width:68ch;}
.prose p:last-child{margin-bottom:0;}
.prose .lede{font-size:19px;line-height:1.6;color:var(--ink);}

/* --------------------------------------------------------------- 11. Contact */
.contactlist{list-style:none;border-top:1px solid var(--navy-line);}
.contactlist li{border-bottom:1px solid var(--navy-line);padding-block:18px;display:flex;align-items:center;gap:var(--s5);}
.ico{width:44px;height:44px;flex:none;border:1px solid rgba(201,168,95,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),border-color .25s var(--ease);}
.ico svg{width:17px;height:17px;stroke:var(--gold-soft);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ico svg.fill{fill:var(--gold-soft);stroke:none;}
.contactlist li:hover .ico{background:rgba(176,141,62,.16);border-color:var(--gold);}
.contactlist .lb{display:block;margin-bottom:3px;}
.contactlist a{font-family:var(--sans);font-size:16.5px;color:#fff;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .2s var(--ease);}
.contactlist a:hover{border-color:var(--gold);}
.infoset{border-top:1px solid var(--navy-line);}
.infoset .r{border-bottom:1px solid var(--navy-line);padding-block:16px;}
.infoset dd{font-family:var(--sans);font-size:15.5px;color:#fff;margin-top:3px;}
@media(max-width:430px){.contactlist a{font-size:15px;}.contactlist li{gap:var(--s4);}}

/* --------------------------------------------------------------- 12. Appel */
.callout{border-top:1px solid var(--line);background:var(--surface);}
.callout .shell{padding-block:clamp(48px,6vw,80px);display:flex;justify-content:space-between;align-items:center;gap:var(--s6);flex-wrap:wrap;}
.callout h2{font-size:clamp(25px,2.7vw,34px);margin-bottom:var(--s2);}
.callout p{color:var(--ink-mute);max-width:52ch;}

.onward{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;}
.onward .spacer{border-right:1px solid var(--line-soft);}
.onward a{padding:30px var(--gut);text-decoration:none;border-right:1px solid var(--line-soft);transition:background .22s var(--ease);position:relative;}
.onward a::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.onward a:hover::after{transform:scaleX(1);}
.onward a:last-child{border-right:none;text-align:right;}
.onward a:last-child::after{transform-origin:right;}
.onward a:hover{background:var(--surface);}
.onward .ttl{display:block;font-family:var(--sans);font-weight:600;font-size:19px;color:var(--ink);margin-top:var(--s2);letter-spacing:-.012em;}
.onward .dir{display:flex;align-items:center;gap:10px;}
.onward a.next .dir{justify-content:flex-end;}
.onward .chev{width:18px;height:1.5px;background:var(--gold);position:relative;flex:none;transition:transform .28s var(--ease);}
.onward .chev::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);}
.onward a.next .chev::after{right:0;transform:rotate(45deg);}
.onward a.prev .chev::after{left:0;transform:rotate(-135deg);}
.onward a.next:hover .chev{transform:translateX(4px);}
.onward a.prev:hover .chev{transform:translateX(-4px);}
@media(max-width:620px){.onward{grid-template-columns:1fr;}
  .onward a{border-right:none;border-bottom:1px solid var(--line-soft);text-align:left!important;}
  .onward a:last-child{border-bottom:none;}.onward a:last-child::after{transform-origin:left;}
  .onward .spacer{display:none;}
  .onward a.next .dir{justify-content:flex-start;}}

/* --------------------------------------------------------------- 13. Pied de page */
.sitefoot{background:var(--navy-deep);color:var(--on-navy-mute);font-family:var(--sans);font-size:14px;}
.sitefoot .shell{padding-block:var(--s9) var(--s6);}
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--navy-line);}
@media(max-width:940px){.footgrid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6);}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr;gap:var(--s6);}}
.footgrid .sig{display:block;font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.005em;color:#fff;margin-bottom:var(--s4);}
.footgrid .sig::after{content:"";display:block;width:32px;height:2px;background:var(--gold);margin-top:var(--s4);}
.footgrid p{font-size:14.5px;line-height:1.75;max-width:38ch;color:var(--on-navy-mute);}
.footgrid h2{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-mute);margin-bottom:var(--s4);line-height:1.2;}
.footgrid ul{list-style:none;display:grid;gap:11px;}
.footgrid a{color:#C4CBD5;text-decoration:none;transition:color .18s var(--ease);}
.footgrid a:hover{color:#fff;}
.disclaimer{padding-block:var(--s5);border-bottom:1px solid var(--navy-line);}
.disclaimer p{font-size:13px;line-height:1.75;color:var(--on-navy-mute);max-width:96ch;}
.footbottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s5);font-size:12.5px;}
.footbottom nav{display:flex;gap:var(--s5);flex-wrap:wrap;}
.footbottom a{color:var(--on-navy-mute);text-decoration:none;}
.footbottom a:hover{color:#fff;}

/* --------------------------------------------------------------- 14. Pages légales */
.legal{padding-block:clamp(44px,6vw,76px) clamp(64px,8vw,104px);}
.legal .shell{max-width:790px;}
.legal h1{font-size:clamp(32px,4.4vw,52px);}
.legal h2{font-weight:600;font-size:18.5px;margin:var(--s8) 0 var(--s3);}
.legal p,.legal li{margin-bottom:var(--s3);color:var(--ink-body);}
.legal ul{padding-left:22px;}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);}
.legal .updated{font-family:var(--sans);font-size:12.5px;color:var(--ink-mute);margin-bottom:var(--s7);padding-bottom:var(--s5);border-bottom:1px solid var(--line);}

/* --------------------------------------------------------------- 15. Page 404 */
.notfound .shell{padding-block:clamp(56px,9vw,120px);}
.notfound .code{font-family:var(--mark);font-size:clamp(72px,13vw,170px);line-height:.9;color:rgba(201,168,95,.34);}
.notfound h1{margin-top:var(--s4);color:#fff;}
.notfound p{margin-top:var(--s5);max-width:56ch;color:var(--on-navy);}
.notfound .acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);}

/* --------------------------------------------------------------- 16. Hors ligne */
.offline{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-flag);background:var(--navy-deep);color:#fff;font-family:var(--sans);font-size:13.5px;padding:14px var(--gut);display:none;align-items:center;gap:var(--s3);border-top:2px solid var(--gold);}
.offline.show{display:flex;}
.offline .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;}

/* --------------------------------------------------------------- 17. Mouvement */
@keyframes draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes lift{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero h1,.hero .standfirst,.hero .acts,.hero .locus,.docwrap,
.pagehead .crumb,.pagehead h1,.pagehead .standfirst{animation:lift .78s var(--ease-out) both;}
.hero h1,.pagehead h1{animation-delay:.1s;}
.hero .standfirst,.pagehead .standfirst{animation-delay:.2s;}
.hero .acts{animation-delay:.3s;}
.hero .locus{animation-delay:.38s;}
.docwrap{animation-delay:.44s;}

/* Durées raccourcies et déclenchement anticipé (réglage d'août 2026) :
   au défilement rapide, les sections arrivaient encore vides à l'écran. */
.js [data-rise]{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);}
.js [data-rise].seen{opacity:1;transform:none;}
.js [data-rise-group]>*{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);}
.js [data-rise-group].seen>*{opacity:1;transform:none;}
.js [data-rise-group].seen>*:nth-child(1){transition-delay:0ms;}
.js [data-rise-group].seen>*:nth-child(2){transition-delay:45ms;}
.js [data-rise-group].seen>*:nth-child(3){transition-delay:90ms;}
.js [data-rise-group].seen>*:nth-child(4){transition-delay:135ms;}
.js [data-rise-group].seen>*:nth-child(5){transition-delay:180ms;}
.js [data-rise-group].seen>*:nth-child(6){transition-delay:225ms;}

@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .22s var(--ease) both;}
::view-transition-new(root){animation:vt-in .36s var(--ease-out) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;}
  .js [data-rise],.js [data-rise-group]>*{opacity:1!important;transform:none!important;}
  @view-transition{navigation:none;}
}

/* --------------------------------------------------------------- 18. Impression */
@media print{
  .masthead,.drawer,.onward,.callout,.burger,.skip,.offline{display:none!important;}
  body{color:#000;background:#fff;font-size:11pt;line-height:1.45;}
  .hero,.pagehead,.band,.sitefoot,.portrait,.notfound{background:#fff!important;color:#000!important;}
  .hero h1,.pagehead h1,.band h2,.band .statement,.band p,.hero .standfirst,
  .pagehead .standfirst,.portrait p,.portrait .nm,.sitefoot a,.contactlist a,.notfound h1,.notfound p{color:#000!important;}
  .hero::before,.hero::after,.pagehead::before,.pagehead::after,.band::before{display:none!important;}
  .docwrap{margin-top:12pt;}
  .ico{border-color:#000;} .ico svg{stroke:#000;} .ico svg.fill{fill:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
  section{padding-block:16pt;}
}


/* ==========================================================================
   19. Texture des fonds
   Deux couches, uniquement sur les surfaces sombres :
   un filigrane LN repris de la version d'origine, et un grain très fin qui
   casse l'aplat. Le grain est un SVG intégré au fichier CSS : aucune image
   à télécharger, aucune requête réseau.
   ========================================================================== */
/* Le grain est un élément à part entière, pas un pseudo-élément :
   ::before et ::after sont déjà pris sur ces blocs par le panneau bicolore
   et par le filet doré. Deux règles sur le même pseudo-élément se seraient
   écrasées. */
.tex{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.05;
}
.sitefoot{position:relative;overflow:hidden;}
.sitefoot .tex{opacity:.04;}
.band{overflow:hidden;}

.watermark{
  position:absolute;pointer-events:none;user-select:none;z-index:0;
  font-family:var(--mark);line-height:.78;color:rgba(255,255,255,.05);
  letter-spacing:.01em;
}
/* Le filigrane ne subsiste que sur le hero, seul bloc assez haut pour
   l'accueillir. Il déborde par le bas et par la droite de façon franche,
   pas d'un demi-jambage. Ailleurs, il ne produisait que des fragments. */
.hero .watermark{right:.04em;bottom:-.30em;font-size:clamp(230px,30vw,420px);}
.notfound .watermark{display:none;}
@media(max-width:640px){.hero .watermark{font-size:clamp(180px,52vw,260px);right:-.08em;bottom:-.26em;}}

/* Le contenu passe devant les deux couches */
.hero .shell,.pagehead .shell,.band .shell,.sitefoot .shell{position:relative;z-index:1;}

@media print{.tex,.watermark{display:none!important;}}


/* ==========================================================================
   20. Variantes sombres des blocs de contenu
   Sur trois pages, deux blocs voisins partageaient une couleur de fond :
   le trait de séparation donnait l'impression d'être posé au milieu d'un
   aplat. Les blocs « Méthode de travail » et « Environnement de travail »
   passent donc sur fond bleu nuit, ce qui rétablit l'alternance.
   ========================================================================== */
.band .sectionhead p{color:var(--on-navy-mute);}
.band .commit{border-top-color:rgba(255,255,255,.7);}
.band .commit dt{color:#fff;border-bottom-color:var(--navy-line);}
.band .commit dd{color:var(--on-navy);border-bottom-color:var(--navy-line);}
.band .toolset{border-top-color:rgba(255,255,255,.7);}
.band .toolset .grp{border-bottom-color:var(--navy-line);}
.band .toolset .grp h3{color:#fff;}
.band .toolset .grp p{color:var(--on-navy);}
.band .measure{color:var(--on-navy-mute);}

/* Page Contact : le bandeau et les coordonnées ne forment plus qu'un bloc. */
.pagehead.contactblock .shell{padding-bottom:clamp(56px,7.5vw,96px);}
.pagehead.contactblock .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,76px);align-items:start;margin-top:clamp(36px,5vw,60px);}
@media(max-width:900px){.pagehead.contactblock .split{grid-template-columns:1fr;}}


/* ==========================================================================
   21. Repères chiffrés (fiche signalétique du hero)
   Une fiche à filets, dans la logique des listes-définition du site :
   chiffres en Caslon (la police retrouve enfin un usage éditorial),
   libellés en capitales espacées. Pas de cartes, pas d'aplats.
   ========================================================================== */
.ledger{border-top:1px solid rgba(220,225,232,.7);animation:lift .78s var(--ease-out) both;animation-delay:.34s;}
.ledger>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);padding-block:16px;border-bottom:1px solid var(--navy-line);}
.ledger .num{font-family:var(--mark);font-size:clamp(34px,3vw,46px);line-height:1;color:var(--gold-soft);font-variant-numeric:lining-nums;white-space:nowrap;}
.ledger .num sup{font-size:.45em;vertical-align:.7em;letter-spacing:.02em;}
.ledger .lb{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-mute-2);text-align:right;max-width:24ch;line-height:1.6;}
@media(max-width:900px){.ledger{max-width:430px;}}

/* ==========================================================================
   22. Parcours (chronologie à filets, page À propos)
   ========================================================================== */
.timeline{border-top:1px solid var(--ink);}
.timeline>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s2) var(--s7);padding-block:24px;border-bottom:1px solid var(--line-soft);align-items:baseline;}
.timeline .yrs{font-family:var(--mark);font-size:19px;color:var(--gold-ink);font-variant-numeric:lining-nums;white-space:nowrap;}
.timeline h3{font-size:17px;}
.timeline p{color:var(--ink-mute);font-size:15px;margin-top:var(--s1);max-width:64ch;}
@media(max-width:780px){.timeline>div{grid-template-columns:1fr;gap:var(--s1);}}

/* ==========================================================================
   23. Citation client (témoignage)
   Guillemet en Caslon, filet d'introduction : même grammaire que le reste.
   ========================================================================== */
.pull{border-top:1px solid var(--ink);padding-top:var(--s6);max-width:62ch;}
.pull .qm{display:block;font-family:var(--mark);font-size:52px;line-height:.6;color:var(--gold);margin-bottom:var(--s4);}
.pull p{font-family:var(--disp);font-weight:400;font-size:clamp(19px,1.9vw,24px);line-height:1.55;color:var(--ink);}
.pull footer{margin-top:var(--s5);font-size:13.5px;color:var(--ink-mute);}
.pull footer strong{font-weight:600;color:var(--ink);}
.band .pull{border-top-color:rgba(255,255,255,.7);}
.band .pull p{color:#fff;}
.band .pull footer{color:var(--on-navy-mute);}

/* ==========================================================================
   24. Schémas de méthode (SVG en ligne)
   Trait fin, filets, or fonctionnel : la signature graphique du cabinet.
   ========================================================================== */
.figure{margin-top:clamp(34px,4.5vw,56px);border:1px solid var(--line);padding:clamp(20px,3vw,36px);}
.figure svg{width:100%;height:auto;display:block;}
.figure svg text{font-family:var(--sans);}
.figure figcaption{margin-top:var(--s4);font-size:13px;color:var(--ink-mute);}

/* ==========================================================================
   25. Formulaire de contact
   Champs à filets, sans arrondis ni ombres : la papeterie du site.
   ========================================================================== */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5.5vw,84px);align-items:start;}
@media(max-width:900px){.contactgrid{grid-template-columns:1fr;}}
.form{display:grid;gap:var(--s5);}
.form .duo-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);}
@media(max-width:560px){.form .duo-f{grid-template-columns:1fr;}}
.form label{display:block;}
.form .field{display:block;margin-bottom:var(--s2);color:var(--ink-mute);}
.form .req{color:var(--gold-ink);}
.form input,.form textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:0;padding:13px 14px;
  transition:border-color .2s var(--ease);}
.form input:hover,.form textarea:hover{border-color:var(--ink-mute);}
.form input:focus,.form textarea:focus{border-color:var(--navy);outline:none;box-shadow:inset 0 -2px 0 var(--gold);}
.form textarea{min-height:160px;resize:vertical;line-height:1.6;}
.form ::placeholder{color:var(--ink-mute);opacity:1;}
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form .send{justify-self:start;}
.form button.btn{cursor:pointer;font-size:13.5px;}
.form button.btn[disabled]{opacity:.55;cursor:progress;}
.form-status{display:none;padding:14px 16px;font-size:14.5px;line-height:1.55;border:1px solid var(--line-strong);}
.form-status.show{display:block;}
.form-status.ok{border-color:var(--gold);background:var(--surface);color:var(--ink);}
.form-status.err{border-color:#B4443C;color:#7C2D27;background:#FBF4F3;}
.form-note{font-size:12.5px;color:var(--ink-mute);max-width:52ch;}
/* Colonne latérale : autres canaux et cadre, sur filets clairs */
.aside-contact .grp{border-bottom:1px solid var(--line-soft);padding-block:18px;}
.aside-contact .grp:first-child{border-top:1px solid var(--ink);}
.aside-contact .lb{display:block;margin-bottom:4px;}
.aside-contact a{font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .2s var(--ease);}
.aside-contact a:hover{border-color:var(--gold);}
.aside-contact p{font-size:15px;color:var(--ink-body);}

/* ==========================================================================
   26. Tiroir mobile : voile et verrouillage du défilement
   ========================================================================== */
html.drawer-open body{overflow:hidden;}
html.drawer-open body::after{content:"";position:fixed;inset:0;background:rgba(14,21,29,.45);z-index:calc(var(--z-drawer) - 10);}
.drawer.open{box-shadow:0 18px 30px -18px rgba(14,21,29,.35);}
.drawer{max-height:calc(100dvh - 70px);overflow:auto;}

/* ==========================================================================
   27. Cibles tactiles du pied de page
   ========================================================================== */
@media(max-width:940px){
  .footgrid a{display:inline-block;padding-block:5px;}
  .footbottom a{display:inline-block;padding-block:8px;}
}

/* ==========================================================================
   28. Pictogrammes de la colonne contact (variante fond clair)
   Les cercles or de la v14, adaptés au blanc : trait or sombre, lisible.
   ========================================================================== */
.aside-contact .grp.ch{display:flex;align-items:center;gap:16px;}
.aside-contact .grp.ch>span:last-child{flex:1;}
.aside-contact .ico{border-color:rgba(134,109,29,.45);}
.aside-contact .ico svg{stroke:var(--gold-ink);}
.aside-contact .ico svg.fill{fill:var(--gold-ink);stroke:none;}

/* ==========================================================================
   29. Schémas sur petit écran : défilement horizontal contenu
   Sous 640 px, un schéma réduit à la largeur de l'écran devient illisible.
   Il garde donc une largeur minimale lisible et défile dans son cadre.
   ========================================================================== */
@media(max-width:640px){
  .figure{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .figure svg{min-width:660px;}
  .figure figcaption{position:sticky;left:0;}
}

/* ==========================================================================
   30. Impression des composants ajoutés en 2026
   ========================================================================== */
@media print{
  .contactgrid>div:first-child,.form,.form-status,.aside-contact .ico{display:none!important;}
  .ledger{border-color:#000;} .ledger .num{color:#000;} .ledger .lb{color:#000;}
  .ledger>div{border-color:#000;}
  .timeline .yrs{color:#000;}
  .figure{border-color:#000;page-break-inside:avoid;}
  .sectionhead h2::before{background:#000;}
  .contactgrid{grid-template-columns:1fr;}
}

/* ==========================================================================
   31. Schémas : variante verticale sous 640 px (v22)
   La version large defile mal sur telephone ; chaque schema possede
   desormais une declinaison portrait, affichee a la place de la large.
   ========================================================================== */
.figure.has-tall .fig-tall{display:none;}
@media(max-width:640px){
  .figure.has-tall .fig-wide{display:none;}
  .figure.has-tall .fig-tall{display:block;min-width:0;width:100%;height:auto;}
  .figure.has-tall{overflow-x:visible;}
}

/* CTA : alternative rendez-vous sous le bouton (v22) */
.callout .cta-col{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;max-width:100%;}
.callout .cta-alt{font-size:13.5px;margin:0;}
.callout .cta-alt .tlink{color:var(--ink-mute);}
.callout .cta-alt .tlink:hover{color:var(--ink);}
@media(max-width:900px){.callout .cta-col{align-items:flex-start;}}

/* Schémas : chiffres et mentions en serif (v22) */
.figure svg text.serif{font-family:var(--disp);}

/* ==========================================================================
   32. Signature « registre » (v22) : encarts cadre, numérotation éditoriale,
   navigation 15 px, cibles tactiles du pied de page
   ========================================================================== */
.cadre{position:relative;margin-top:var(--s7);border:1px solid var(--line-strong);padding:24px 28px;max-width:70ch;background:var(--paper);}
.cadre::before{content:"";position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-top:2px solid var(--gold);border-left:2px solid var(--gold);}
.cadre::after{content:"";position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold);}
.cadre-lb{display:block;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;}
.cadre p{font-size:14px;color:var(--ink-mute);margin:0;max-width:none;}
.cadre p+p{margin-top:10px;}
.band .cadre{background:none;border-color:var(--navy-line);}
.band .cadre .cadre-lb{color:var(--gold-soft);}
.band .cadre p{color:var(--on-navy-mute);}

/* Numérotation éditoriale : uniquement là où une vraie séquence existe
   (pages service, 3 sections) ; ailleurs, tiret or d'origine. */
main.numbered{counter-reset:sec;}
main.numbered .sectionhead h2::before{counter-increment:sec;content:"0" counter(sec);width:auto;height:auto;background:none;font-family:var(--disp);font-style:italic;font-weight:500;font-size:16px;letter-spacing:.06em;color:var(--gold-ink);margin-bottom:var(--s3);}
main.numbered .band .sectionhead h2::before{color:var(--gold-soft);}

.mainnav a{font-size:15px;}
.footgrid a{display:inline-block;padding-block:11px;margin-block:-11px;}

/* ==========================================================================
   33. Sommaire de page (v22) : visible sur petit écran uniquement
   ========================================================================== */
.pagetoc{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:14px;padding-inline:max(var(--gut),calc(50vw - var(--shell)/2 + var(--gut)));border-bottom:1px solid var(--line);background:var(--paper);}
.pagetoc-lb{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);}
.pagetoc a{font-size:13.5px;font-weight:500;color:var(--ink-body);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:14px 2px;margin-block:-8px;margin-inline:-2px;transition:color .18s var(--ease),border-color .18s var(--ease);}
.pagetoc a:hover{color:var(--ink);border-color:var(--gold);}
#couvre,#demarche,#livrables{scroll-margin-top:96px;}
@media(max-width:900px){
  .pagetoc{gap:18px;}
}

/* ==========================================================================
   34. Chiffres d'un cas (v22) : bande de preuve sur la page References
   ========================================================================== */
.casestats{margin-top:clamp(34px,4.5vw,52px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);}
.casestats>div{padding:26px 26px 26px 0;border-right:1px solid var(--line-soft);}
.casestats>div:last-child{border-right:none;}
.casestats>div+div{padding-left:26px;}
.cs-num{display:block;font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(30px,3vw,40px);color:var(--gold-ink);line-height:1;}
.cs-num sup{font-size:.5em;}
.cs-lb{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);line-height:1.75;}
@media(max-width:780px){
  .casestats{grid-template-columns:1fr;}
  .casestats>div{border-right:none;border-bottom:1px solid var(--line-soft);padding:20px 0;}
  .casestats>div+div{padding-left:0;}
  .casestats>div:last-child{border-bottom:none;}
}

/* ==========================================================================
   35. Icônes des domaines de service (v22) : même langage que le panneau
   contact — trait fin, anneau, touche or au survol
   ========================================================================== */
.index .row h2,.index .row h3{display:flex;align-items:center;gap:16px;}
.svcico{width:44px;height:44px;flex:none;border:1px solid rgba(201,168,95,.5);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .25s var(--ease),border-color .25s var(--ease);}
.svcico svg{width:21px;height:21px;fill:none;stroke:var(--gold-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
a.index-row:hover .svcico{background:rgba(176,141,62,.16);border-color:var(--gold);}
@media(max-width:780px){.index .row h2,.index .row h3{gap:13px;}.svcico{width:38px;height:38px;}.svcico svg{width:18px;height:18px;}}

/* Formulaire : rappel avant envoi (v22) */
.form-reassure{font-size:13px;color:var(--ink-mute);margin:4px 0 14px;}

/* Icônes de la liste Appui aux cabinets (v22) — même composant que les services */
.points li h2{display:flex;align-items:center;gap:16px;}
@media(max-width:780px){.points li h2{gap:13px;}}

/* ==========================================================================
   35. Cibles tactiles (v23) : zones de touche >= 44px sans deplacement visuel
   ========================================================================== */
.mainnav .langswitch a{position:relative;}
.mainnav .langswitch a::before{content:"";position:absolute;inset:-14px -9px;}
.crumb a{display:inline-block;padding:13px 4px;margin:-13px -4px;}

/* ==========================================================================
   36. Barre d'action mobile (v23) : contact + rendez-vous sur pages longues
   ========================================================================== */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-flag) - 10);display:none;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--navy-deep);border-top:2px solid var(--gold);transform:translateY(102%);visibility:hidden;transition:transform .32s var(--ease),visibility 0s .32s;}
.ctabar.show{transform:none;visibility:visible;transition:transform .32s var(--ease);}
.ctabar .btn{flex:1;justify-content:center;padding:12px 10px;min-height:46px;font-size:13px;white-space:nowrap;}
@media(max-width:780px){.ctabar{display:flex;}}
@media print{.ctabar{display:none;}}

/* ==========================================================================
   37. Tres petits ecrans (v23) : le header tenait sur >=390px seulement
   ========================================================================== */
@media(max-width:430px){
  .masthead .bar{gap:12px;}
  .brand{gap:10px;}
  .mainnav ul{gap:9px;}
  .langswitch{margin-left:2px;padding-left:10px;}
}
@media(max-width:355px){
  .masthead .bar{gap:8px;}
  .brand .mono{width:36px;height:36px;font-size:14px;}
  .brand .name{font-size:13px;letter-spacing:.08em;}
  .mainnav ul{gap:6px;}
  .langswitch{margin-left:0;padding-left:8px;}
  .burger{width:40px;}
}