.pic{display:contents;}

/* ── Repli sans JavaScript ──
   Le menu en tiroir ne peut pas s'ouvrir sans script : il est seulement translaté
   hors écran. Un téléphone sans JavaScript n'avait donc AUCUNE navigation, et
   l'accueil ne contenait pas un seul lien vers les quatre pages de domaine.
   Cette barre de repli n'apparaît que lorsque le script ne s'exécute pas. ── */
.nav-repli{position:relative;z-index:101;background:var(--navy-2);border-bottom:1px solid var(--line);
  padding:12px 16px;display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;}
.nav-repli a{display:inline-block;padding:11px 12px;min-height:44px;color:var(--cream);
  font-family:var(--body);font-size:14px;letter-spacing:.04em;line-height:22px;}
.nav-repli a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;}

/* ============================================================
   POLICES AUTO-HÉBERGÉES
   Cormorant Garamond et EB Garamond, servies depuis ce site.
   Blocs repris à l'identique de la feuille Google (sous-ensemble
   latin), URL redirigées vers /polices/. Aucun appel à un tiers.
   Les 12 déclarations pointent vers 4 fichiers : ce sont des
   polices à graisse variable, une seule par famille et par style.
   ============================================================ */
@font-face {font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/polices/cormorant-garamond-italic.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/polices/cormorant-garamond-italic.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url(/polices/cormorant-garamond-italic.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/polices/cormorant-garamond-normal.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/polices/cormorant-garamond-normal.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/cormorant-garamond-normal.woff2) format('woff2'); 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: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url(/polices/cormorant-garamond-normal.woff2) format('woff2'); 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: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/polices/eb-garamond-italic.woff2) format('woff2'); 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: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/polices/eb-garamond-italic.woff2) format('woff2'); 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: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/polices/eb-garamond-normal.woff2) format('woff2'); 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: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/polices/eb-garamond-normal.woff2) format('woff2'); 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: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/eb-garamond-normal.woff2) format('woff2'); 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;}

/* La liste des articles d'un domaine — même dessin que « À lire également »
   sur les pages d'article, pour qu'on reconnaisse le même objet. */
.dom-articles{padding:0 0 6px;}
.dom-articles .art-lies h2{font-family:var(--body);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.dom-articles .art-lies{max-width:860px;margin:0 auto;}
.dom-articles .art-lies ul{display:grid;gap:2px;list-style:none;padding:0;}
.dom-articles .art-lies a{display:block;padding:13px 0;color:var(--navy);
  font-family:var(--display);font-size:1.18rem;line-height:1.32;border-bottom:1px solid #F5F0E5;}
.dom-articles .art-lies li:last-child a{border-bottom:none;}
.dom-articles .art-lies a small{display:block;font-family:var(--body);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.dom-articles .art-lies a:hover{color:var(--gold-d);text-decoration:none;}


/* ============================================================
   SYSTÈME DE DESIGN — identique à la page d'accueil
   ============================================================ */
:root{
  --navy:#001B3A; --navy-2:#00122A; --navy-soft:#0A2A50;
  --gold:#C9A24A; --gold-l:#E6CB84; --gold-d:#A9832F;
  --cream:#F7F3EA; --ink:#1E2430; --muted:#5C6472;
  --line:rgba(201,162,74,.28);
  --display:'Cormorant Garamond',Cochin,Baskerville,'Times New Roman',Georgia,serif;
  --body:'EB Garamond',Cochin,Baskerville,'Times New Roman',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.7;font-size:18px;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;}
a{text-decoration:none;color:inherit;}
/* Règle mixte : elle s'applique aussi à des liens sur fond sombre. Le
   soulignement doré confirme la cliquabilité sur les deux fonds, sans
   dégrader la lisibilité d'aucun. */
a:hover{text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px;text-underline-offset:4px;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--gold);color:var(--navy);}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 30px;}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-size:13px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--navy);margin-bottom:20px;}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--gold);}

.btn-gold{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);
  font-family:var(--body);font-weight:600;font-size:16px;letter-spacing:.04em;
  padding:14px 40px;border-radius:2px;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 8px 22px rgba(201,162,74,.28);}
.btn-gold::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#fff,var(--gold-l));opacity:0;transition:opacity .35s var(--ease);}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(201,162,74,.42);color:var(--navy);}
.btn-gold:hover::before{opacity:1;}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--body);font-weight:600;font-size:16px;
  padding:14px 30px;border:1px solid rgba(255,255,255,.4);border-radius:2px;transition:all .35s var(--ease);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,74,.06);}

/* ── Le lien d'évitement ──
   Il était appelé par les pages mais n'avait AUCUNE règle dans cette
   feuille : « Aller au contenu » restait peint en haut à gauche de chaque
   page d'article, en flux normal — il repoussait <main> de 31 px et
   désalignait la manchette de l'en-tête fixe. Il doit être hors écran
   jusqu'à ce que le clavier l'atteigne, et seulement alors. */
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;
  background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);
  padding:11px 18px;border-radius:2px;font-family:var(--body);font-weight:600;
  font-size:15px;transition:top .3s var(--ease);}
.skip-link:focus{top:16px;}
.skip-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

/* ── Le bouton « haut de page » ──
   Même oubli : le bouton existait dans le balisage, sans règle. Il tombait
   après le pied de page, large de zéro, son icône affaissée. Il s'efface
   tant qu'on n'a pas défilé, et sur téléphone il se pose AU-DESSUS du
   bouton d'appel collant — jamais dessus. */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:50px;height:50px;
  border-radius:50%;display:grid;place-items:center;background:var(--navy);
  border:1px solid var(--gold);color:var(--gold-l);
  box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),
             background .3s var(--ease),color .3s var(--ease),visibility 0s linear .4s;}
.to-top.show{opacity:1;visibility:visible;transform:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),
             background .3s var(--ease),color .3s var(--ease),visibility 0s;}
.to-top:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);}
.to-top:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;}
.to-top svg{width:20px;height:20px;}
@media (max-width:900px){
  .to-top{bottom:calc(78px + 16px + env(safe-area-inset-bottom));right:16px;}
}
@media print{.skip-link,.to-top{display:none!important;}}

/* Barre de progression + curseur (repris de l'accueil) */
/* ── La barre de défilement ──
   Elle fonctionnait : mesurée à 89,7 px sur 392 quand la page était lue à
   22,9 %. Mais trois pixels d'or au ras du bord, désormais posés sur un
   en-tête devenu opaque, se lisaient comme un filet de bordure. On l'épaissit
   d'un pixel, on lui donne une lueur, et on la fait passer AU-DESSUS de
   l'en-tête : elle redevient ce qu'elle était, un repère qui avance. */
.scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:130;box-shadow:0 0 12px rgba(201,162,74,.55),0 1px 3px rgba(0,0,0,.35);
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l));transition:width .1s linear;}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);}
.cursor-dot{width:6px;height:6px;background:var(--gold);}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(201,162,74,.6);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);}
.cursor-ring.hovering{width:56px;height:56px;background:rgba(201,162,74,.1);border-color:var(--gold);}
@media (hover:none){.cursor-dot,.cursor-ring{display:none;}}

/* ============================================================
   EN-TÊTE (repris de l'accueil, simplifié)
   ============================================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:26px 0;
  background:rgba(0,15,33,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);}
.site-header.scrolled{padding:14px 0;border-bottom:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.28);}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:18px;color:#fff;}
.brand .emblem{width:82px;height:82px;flex:none;object-fit:contain;border-radius:50%;
  filter:drop-shadow(0 6px 18px rgba(201,162,74,.4));transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease);}
.site-header.scrolled .brand .emblem{width:70px;height:70px;}
.brand:hover .emblem{transform:rotate(-3deg) scale(1.05);}
.nav{display:flex;align-items:center;gap:26px;}
.nav a{color:rgba(255,255,255,.86);font-size:16px;font-weight:500;letter-spacing:.02em;
  position:relative;padding:4px 0;white-space:nowrap;transition:color .3s var(--ease);}
.nav a:not(.btn-gold)::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--gold);transition:width .35s var(--ease);}
.nav a:not(.btn-gold):hover{color:#fff;}
.nav a:not(.btn-gold):hover::after{width:100%;}
.nav .btn-gold{padding:13px 30px;font-size:15px;}
/* ── La cible du menu ──
   Les trois barres mesuraient 32 × 24 px : sous les 44 × 44 exigés au
   niveau AA, et c'est le seul moyen de naviguer sur un téléphone. Les huit
   pages principales étendaient déjà la zone par un pseudo-élément hors
   flux ; cette feuille-ci ne le faisait pas. Même remède, même dessin :
   aucun pixel visible ne bouge. */
.burger{display:none;flex-direction:column;gap:5px;width:32px;height:24px;
  justify-content:center;position:relative;z-index:120;}
.burger::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;}
.burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .4s var(--ease),opacity .3s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   HERO DE PAGE (bandeau marine + photo du domaine)
   ============================================================ */
.page-hero{position:relative;color:#fff;overflow:hidden;padding:clamp(150px,20vw,220px) 0 clamp(64px,9vw,110px);
  background:
    linear-gradient(115deg,rgba(0,19,58,.94) 0%,rgba(0,17,43,.82) 46%,rgba(0,8,20,.95) 100%),
    url("/images/sp_travail.jpg") center/cover no-repeat,var(--navy);background:
    linear-gradient(115deg,rgba(0,19,58,.94) 0%,rgba(0,17,43,.82) 46%,rgba(0,8,20,.95) 100%),
    image-set(url("/images/sp_travail.avif") type("image/avif"), url("/images/sp_travail.webp") type("image/webp"), url("/images/sp_travail.jpg") type("image/jpeg")) center/cover no-repeat,var(--navy);}
.page-hero::after{content:"";position:absolute;top:-30%;right:-8%;width:55%;height:130%;z-index:0;
  background:radial-gradient(circle,rgba(201,162,74,.14),transparent 65%);pointer-events:none;}
.page-hero .wrap{position:relative;z-index:2;max-width:900px;}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--body);font-size:13.5px;
  letter-spacing:.06em;color:rgba(255,255,255,.62);margin-bottom:26px;}
.breadcrumb a{color:rgba(255,255,255,.72);transition:color .3s var(--ease);}
.breadcrumb a:hover{color:var(--gold-l);}
.breadcrumb .sep{color:var(--gold);opacity:.7;}
.breadcrumb [aria-current]{color:var(--gold-l);}
.page-hero .eyebrow{color:var(--gold-l);}
.page-hero h1{font-size:clamp(2.8rem,7vw,5.2rem);letter-spacing:.5px;margin-bottom:8px;}
.page-hero h1 .accent{color:var(--gold);font-style:italic;}
.page-hero .lead{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:rgba(255,255,255,.82);max-width:44ch;margin:20px 0 12px;line-height:1.4;}
.page-hero .intro-p{max-width:60ch;font-size:1.12rem;color:rgba(255,255,255,.78);margin-bottom:34px;text-align:justify;-webkit-hyphens:auto;hyphens:auto;}
.page-hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ============================================================
   CORPS — rubriques du domaine (vrai texte, hiérarchie H2/H3)
   ============================================================ */
.domaine-body{background:#fff;padding:clamp(70px,10vw,120px) 0;}
.domaine-intro{max-width:760px;margin:0 auto clamp(56px,7vw,80px);text-align:center;}
.domaine-intro .eyebrow{justify-content:center;}
.domaine-intro h2{font-size:clamp(2rem,4vw,2.9rem);color:var(--navy);letter-spacing:.4px;}
.domaine-intro h2 .accent{color:var(--navy);font-style:italic;}
.domaine-intro p{color:var(--muted);font-size:1.15rem;margin-top:18px;}

.rub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;}
.rub{position:relative;border:1px solid #ECE6D8;border-radius:6px;padding:38px 36px 34px;background:#fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.rub:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,27,58,.14);border-color:var(--line);}
.rub .rub-no{font-family:var(--display);font-size:1.05rem;color:var(--navy);letter-spacing:.1em;display:block;margin-bottom:10px;}
.rub h3{font-size:1.55rem;color:var(--navy);margin-bottom:20px;padding-bottom:14px;position:relative;}
.rub h3::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-l));}
.rub ul li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #F0EADD;color:var(--ink);font-size:1.04rem;line-height:1.5;}
.rub ul li:last-child{border-bottom:none;}
.rub ul li::before{content:"—";color:var(--gold);flex:none;}

/* ============================================================
   BANDEAU CTA
   ============================================================ */
.cta-band{position:relative;color:#fff;text-align:center;overflow:hidden;padding:clamp(70px,10vw,110px) 0;
  background:linear-gradient(rgba(0,15,33,.92),rgba(0,10,25,.95)),url("/images/columns.jpg") center/cover no-repeat;background:linear-gradient(rgba(0,15,33,.92),rgba(0,10,25,.95)),image-set(url("/images/columns.avif") type("image/avif"), url("/images/columns.webp") type("image/webp"), url("/images/columns.jpg") type("image/jpeg")) center/cover no-repeat;}
.cta-band .eyebrow{color:var(--gold-l);justify-content:center;}
.cta-band h2{font-size:clamp(2rem,4.4vw,3.1rem);max-width:20ch;margin:0 auto 14px;letter-spacing:.4px;}
.cta-band h2 .accent{color:var(--gold-l);font-style:italic;}
.cta-band p{color:rgba(255,255,255,.75);max-width:52ch;margin:0 auto 34px;font-size:1.1rem;}
.cta-band-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   AUTRES DOMAINES (maillage interne)
   ============================================================ */
.others{background:var(--cream);padding:clamp(64px,9vw,104px) 0;}
.others-head{max-width:640px;margin:0 auto 50px;text-align:center;}
.others-head .eyebrow{justify-content:center;}
.others-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--navy);}
.others-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.other-card{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:200px;
  background:#fff;border:1px solid #ECE6D8;border-radius:6px;padding:32px 30px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.other-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,27,58,.16);border-color:var(--line);color:inherit;}
.other-card .other-no{font-family:var(--display);font-size:1rem;color:var(--navy);letter-spacing:.1em;}
.other-card h3{font-size:1.5rem;color:var(--navy);margin-top:8px;}
.other-card p{color:var(--muted);font-size:1rem;margin-top:10px;}
.other-card .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);transition:gap .3s var(--ease);}
.other-card:hover .go{gap:14px;}
@media (hover:none){.other-card .go{gap:14px;}}

/* ============================================================
   PIED DE PAGE (repris de l'accueil)
   ============================================================ */
.site-footer{background:var(--navy-2);color:#8893a4;padding:70px 0 34px;border-top:1px solid var(--line);}
.footer-top{display:grid;grid-template-columns:1fr auto auto;gap:56px;align-items:start;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .brand{margin-bottom:20px;}
.site-footer .brand .emblem{width:96px;height:96px;}
.site-footer .brand .name{display:flex;flex-direction:column;line-height:1.05;}
.site-footer .brand .name b{font-family:var(--display);font-size:1.7rem;font-weight:600;letter-spacing:.5px;color:#fff;}
.site-footer .brand .name b .fam{font-size:1.06em;text-transform:uppercase;letter-spacing:1px;}
.site-footer .brand .name span{font-family:var(--body);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:5px;}
.footer-brand p{max-width:340px;font-size:15px;line-height:1.7;}
.footer-col h2{font-family:var(--body);color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;font-weight:600;}
.footer-col a,.footer-col p{display:block;font-size:15px;padding:5px 0;transition:color .3s var(--ease);}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;font-size:13.5px;}
.footer-bottom .legal a{color:#8893a4;margin:0 4px;}
.footer-bottom .legal a:hover{color:var(--gold);}

/* ============================================================
   APPARITIONS AU DÉFILEMENT (sobres)
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.16s;}.reveal.d3{transition-delay:.24s;}.reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  /* ── Le filet universel ──
     Ce bloc nommait onze sélecteurs : l'intro, les deux bandeaux, la galerie,
     les apparitions au défilement. C'est ce qu'exige le niveau AA — tout ce
     qui bouge SEUL était couvert. Mais 182 éléments bougent sur cette page,
     et les 171 autres — survols, ouvertures, glissements — ne l'étaient pas.
     Une personne sujette au vertige ou aux migraines vestibulaires n'a pas à
     énumérer les cas : elle règle son système une fois, et tout s'arrête.
     Ajouté le 14 août 2026, à la passe des garde-fous. */
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;}
.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Téléphone (≤ 430 px) — même correction que sur l'accueil : l'en-tête fixe
   occupait 134 px. ── */
@media (max-width:430px){
  .site-header{padding:12px 0;}
  .brand-header .emblem,.brand .emblem{width:60px;height:60px;}
}

@media(max-width:960px){
  .burger{display:flex;}
  /* ── Le tiroir passait de 849 px de haut à 86 dès qu'on défilait ──
     « backdrop-filter » sur l'en-tête en fait le RÉFÉRENTIEL de ses enfants
     en position fixe : « inset:0 » ne désignait plus l'écran mais la barre
     du haut. Le menu se repliait dedans, et ses entrées flottaient par-dessus
     la page, sans fond. Tant que le menu est ouvert, l'en-tête renonce donc à
     son flou — il est de toute façon recouvert. Mesuré, pas supposé. */
  .site-header.menu-ouvert{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:transparent!important;box-shadow:none!important;border-bottom-color:transparent!important;}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);
    /* Fermé, le tiroir restait « présent » à droite de l'écran : ses entrées
       débordaient la page de deux pixels une fois l'en-tête devenu opaque.
       On le rend franchement invisible — il sort ainsi du calcul de la largeur,
       du survol et des lecteurs d'écran. La visibilité revient sans délai à
       l'ouverture, et attend la fin du glissement à la fermeture. */
    visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s linear .5s;
    /* Le fond du tiroir reprend la bibliothèque de l'accueil, très assombrie :
       le menu appartient au site, il n'est pas une page à part. */
    background:
      linear-gradient(160deg,rgba(0,15,33,.93) 0%,rgba(0,10,26,.97) 60%,rgba(0,8,20,.99) 100%),
      image-set(url("/images/hero.avif") type("image/avif"), url("/images/hero.webp") type("image/webp"),
                url("/images/hero.jpg") type("image/jpeg")) 22% center/cover no-repeat,
      var(--navy-2);}
  .nav.open{transform:translateX(0);visibility:visible;transition:transform .5s var(--ease),visibility 0s;}
  .nav a{font-size:1.6rem;font-family:var(--display);}
  .rub-grid{grid-template-columns:1fr;}
  .others-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
  .footer-top{grid-template-columns:1fr 1fr;gap:34px;}
}
@media(max-width:720px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  .page-hero .intro-p{text-align:left;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

.lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:6px;border:1px solid var(--line);border-radius:40px;padding:3px;}
.lang-switch button{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.72);padding:5px 12px;border-radius:40px;transition:background .3s var(--ease),color .3s var(--ease);}
.lang-switch button.active{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);}
/* ═══════════════════════════════════════════════════════════════════════
   LA PAGE D'ARTICLE
   Cette page est une PORTE D'ENTRÉE : le visiteur arrive d'un moteur et ne
   verra rien d'autre du cabinet. Elle s'ouvre donc comme la page des
   publications s'ouvre — bleu nuit, emblème, or — puis rend la parole au
   texte sur fond clair, et se referme dans le même bleu.

   Architecture : DEUX blocs sombres, et ce sont les deux extrémités. Entre
   elles, le texte respire sur blanc. L'or ne fait plus les filets (neutre
   chaud) : il ne paraît qu'aux points qui le méritent — le domaine, les
   numéros de l'essentiel, la lettrine, le téléphone.
   ═══════════════════════════════════════════════════════════════════════ */
.art-page{
  --art-mesure:42rem;          /* mesure de lecture ≈ 672 px, 68 signes */
  --art-rail:12rem;
  --art-filet:#E4DDCE;         /* filet neutre chaud */
  --art-filet-f:#F0EBE0;
  --art-corps:#3B4251;         /* texte courant — 9,2:1 sur blanc */
  --art-or-texte:#7A5C1B;      /* or lisible en petit corps — 6,2:1 sur blanc.
                                  #C9A24A ne fait que 3,5:1 : il ne peut pas
                                  porter de texte sur fond clair. */
  --art-rouge:#8A2E1C;         /* 8,4:1 sur blanc */
  --art-clair:#B9C6D6;         /* texte secondaire sur bleu nuit */
}

/* ── Ornement : le filet doré à losange, comme sur la page publications ── */
.art-orn{display:flex;align-items:center;justify-content:center;gap:15px;}
.art-orn i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:block;flex:none;}
.art-orn::before,.art-orn::after{content:"";height:1px;width:clamp(44px,14vw,86px);}
.art-orn::before{background:linear-gradient(90deg,transparent,var(--art-filet));}
.art-orn::after{background:linear-gradient(90deg,var(--art-filet),transparent);}
.art-orn--d::before{background:linear-gradient(90deg,transparent,rgba(201,162,74,.72));}
.art-orn--d::after{background:linear-gradient(90deg,rgba(201,162,74,.72),transparent);}

/* ══ MANCHETTE — pleine largeur, bleu nuit ══════════════════════════════
   La bibliothèque, très voilée : une atmosphère qui vaut pour TOUTE matière,
   y compris celles qui ne sont pas au cabinet. Ce n'est pas une illustration
   de l'article — c'est l'identité de la section. */
.art-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:132px 22px 56px;
  background:
    /* Le voile montait à .93 / .965 / .99 : la photographie de l'article
       était bien chargée, et parfaitement invisible dessous. Il descend à
       .62 / .74 / .86 — l'image paraît, et le titre garde son contraste
       parce que le dégradé reste le plus dense là où le texte se pose.
       Un voile radial doré éclaire toujours l'angle haut droit. */
    radial-gradient(120% 80% at 84% -12%,rgba(201,162,74,.16),transparent 58%),
    linear-gradient(165deg,rgba(0,23,52,.62) 0%,rgba(0,14,34,.74) 56%,rgba(0,8,20,.86) 100%),
    image-set(url("/images/library.avif") type("image/avif"), url("/images/library.webp") type("image/webp"), url("/images/library.jpg") type("image/jpeg")) center 28%/cover no-repeat,
    var(--navy-2);}
/* ── La photographie de l'article, en vraie image ──
   Elle était posée en propriété personnalisée, donc en url() de feuille de
   style. Deux inconvénients : la résolution du chemin dépend de la feuille
   et non de la page — ce qui casse toute copie déplacée — et l'image échappe
   à « loading », « decoding » et au choix de résolution du navigateur.
   C'est désormais une balise <img> : elle se résout contre la page, elle est
   décodée hors du fil principal, et les voiles passent au-dessus d'elle. */
.art-hero-fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;}
.art-hero-voile{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 84% -12%,rgba(201,162,74,.16),transparent 58%),
    linear-gradient(165deg,rgba(0,23,52,.62) 0%,rgba(0,14,34,.74) 56%,rgba(0,8,20,.86) 100%);}
@media print{.art-hero-fond,.art-hero-voile{display:none!important;}}
@media(min-width:900px){ .art-hero{padding:172px 30px 68px;} }
.art-hero-in{max-width:46rem;margin:0 auto;}

/* 1 · Fil d'Ariane — cible tactile portée à 45 px sans déplacer le texte */
.art-fil{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;
  margin-bottom:30px;font-family:var(--body);font-size:12.5px;letter-spacing:.05em;
  color:rgba(255,255,255,.62);}
.art-fil a{color:rgba(255,255,255,.72);padding:12px 0;}
.art-fil a:hover{color:var(--gold-l);}
.art-fil i{font-style:normal;color:rgba(201,162,74,.8);}
.art-fil [aria-current]{color:var(--gold-l);}

.art-emblem{width:88px;height:88px;margin:0 auto 26px;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(201,162,74,.42));}
@media(min-width:900px){ .art-emblem{width:108px;height:108px;} }

/* 2 · Domaine, en cartouche doré — le même objet que sur les cartes */
.art-badge{display:inline-block;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy);padding:9px 20px;
  background:linear-gradient(135deg,var(--gold-l),var(--gold));
  box-shadow:0 8px 22px rgba(201,162,74,.26);}

.art-titre{font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(2.1rem,8.4vw,3.7rem);line-height:1.06;letter-spacing:-.006em;
  text-wrap:pretty;margin:24px auto 26px;max-width:26ch;}
@media(min-width:900px){ .art-titre{font-size:clamp(2.7rem,4.6vw,3.7rem);} }
.art-titre em{font-style:italic;color:var(--gold);}

/* 3 · Crédit et dates — la date de mise à jour est VISIBLE : un texte de
      droit se périme, et le dire est une protection. */
.art-dateline{margin-top:26px;font-family:var(--body);font-size:15px;color:rgba(255,255,255,.82);}
.art-dateline b{color:#fff;font-weight:600;}
.art-dates{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;
  margin-top:12px;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--art-clair);}
.art-dates time{color:var(--gold-l);}
.art-dates i{width:5px;height:5px;background:rgba(201,162,74,.85);transform:rotate(45deg);
  display:block;flex:none;}

/* ══ CORPS DE PAGE ══════════════════════════════════════════════════════ */
.art-shell{max-width:var(--art-mesure);margin:0 auto;padding:0 22px;}
.art-flux{min-width:0;}
.art-shell-a{padding-top:56px;}
.art-flux>*:first-child{margin-top:0;}
.art-shell-b{padding-top:4px;}

/* Sommaire — marge gauche, à partir de 1240 px seulement.
   DONNÉE : les intertitres h2 de l'article, que le script connaît déjà.
   Aucun champ à ajouter au fichier de données. Retirable sans rien casser. */
.art-rail{display:none;}
@media(min-width:1240px){
  .art-shell{max-width:calc(var(--art-rail) + 4.5rem + var(--art-mesure));
    display:grid;grid-template-columns:var(--art-rail) 1fr;column-gap:4.5rem;align-items:start;}
  .art-flux{grid-column:2;grid-row:1;}
  .art-rail{grid-column:1;grid-row:1;display:block;position:sticky;top:150px;
    padding-top:4px;border-top:1px solid var(--art-filet);}
  .art-rail h2{font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);margin:14px 0 4px;}
  .art-rail ol{list-style:none;margin:0;padding:0;counter-reset:art-som;}
  .art-rail a{display:block;padding:11px 0;font-family:var(--display);font-size:1.02rem;
    line-height:1.3;color:var(--navy);border-bottom:1px solid var(--art-filet-f);}
  .art-rail li:last-child a{border-bottom:none;}
  .art-rail a::before{counter-increment:art-som;content:counter(art-som,upper-roman) ". ";
    color:var(--art-or-texte);font-size:.8em;letter-spacing:.06em;}
  .art-rail a:hover{color:var(--art-or-texte);text-decoration:none;}
}

/* ── Rappel d'urgence (texte imposé) : un filet, du texte, rien d'autre.
      Un avertissement d'avocat n'est pas une alarme. ── */
.art-urgence{display:block;margin:0;padding:2px 0 2px 20px;background:none;border:none;
  border-left:2px solid var(--art-rouge);border-radius:0;}
.art-urgence p{margin:0;max-width:58ch;font-size:15px;line-height:1.66;color:var(--art-rouge);}
.art-urgence b{color:var(--art-rouge);font-weight:600;}
.art-urgence a{color:var(--art-rouge);font-weight:600;white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--art-rouge);text-underline-offset:3px;}

/* ── 4 · L'essentiel — cartouche crème à cadre doré ────────────────────
   Il n'est plus bleu nuit : la manchette et la clôture portent le bleu, et
   deux blocs sombres de même poids se disputaient la page. Un résumé se lit
   comme un extrait officiel, sur parchemin. ── */
.art-essentiel{margin:40px 0 0;padding:30px 24px 32px;border-radius:0;
  background:linear-gradient(180deg,#FFFDF8,var(--cream));
  box-shadow:inset 0 0 0 1px rgba(201,162,74,.42),0 16px 40px rgba(0,27,58,.07);}
@media(min-width:760px){ .art-essentiel{margin-left:-2rem;margin-right:-2rem;padding:36px 40px 38px;} }
.art-essentiel h2{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--art-or-texte);margin:0 0 20px;}
.art-essentiel ol{list-style:none;margin:0;padding:0;counter-reset:art-ess;}
.art-essentiel li{counter-increment:art-ess;display:grid;grid-template-columns:2.7rem 1fr;
  padding:16px 0;border-top:1px solid rgba(201,162,74,.24);}
.art-essentiel li:first-child{border-top:none;padding-top:0;}
.art-essentiel li:last-child{padding-bottom:0;}
.art-essentiel li::before{content:counter(art-ess,decimal-leading-zero);
  font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:.03em;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  color:var(--gold-d);line-height:1.35;}
.art-essentiel li span{color:var(--ink);font-size:1.05rem;line-height:1.62;}

/* ── Les exposants ──
   « 1er », « 3e civ. », « n° » : composés en <sup>, ils poussaient la ligne
   au-dessus d'eux et se détachaient du chiffre en fin de ligne. line-height:0
   les sort du calcul de l'interligne — le paragraphe garde son rythme — et un
   liant invisible posé devant chaque exposant empêche « 1 » et « er » d'être
   séparés par un retour à la ligne. */
sup{font-size:.68em;line-height:0;vertical-align:super;}

/* ── 5 · Le corps ─────────────────────────────────────────────────────
   Quatre voix : le chapeau à lettrine, le texte justifié, la liste,
   l'exergue. Les intertitres sont numérotés en chiffres romains. ── */
.art-corps{margin-top:52px;counter-reset:art-h2;}
.art-corps>p{color:var(--art-corps);font-size:1.09rem;line-height:1.78;margin:0 0 20px;}
@media(min-width:620px){
  .art-corps>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty;}
}
.art-corps>p.chapeau{font-size:1.2rem;line-height:1.66;color:var(--ink);margin-bottom:26px;
  text-align:left;-webkit-hyphens:none;hyphens:none;}
.art-corps>p.chapeau::first-letter{font-family:var(--display);font-weight:600;font-size:3.05em;
  line-height:.78;float:left;padding:6px 12px 0 0;color:var(--art-or-texte);}
.art-corps h2{font-family:var(--display);font-weight:500;font-size:clamp(1.44rem,3.4vw,1.95rem);
  line-height:1.16;color:var(--navy);text-wrap:pretty;counter-increment:art-h2;position:relative;
  margin:54px 0 16px;padding-top:22px;padding-bottom:0;border-top:1px solid var(--art-filet);}
.art-corps h2::after{content:none;}
.art-corps h2::before{content:counter(art-h2,upper-roman);font-family:var(--body);font-size:11px;
  font-weight:600;letter-spacing:.16em;color:var(--art-or-texte);display:block;margin-bottom:8px;}
@media(min-width:1000px){
  .art-corps h2::before{position:absolute;left:-3.1rem;top:24px;margin:0;text-align:right;width:2rem;}
}
.art-corps h3{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.28rem;
  color:var(--navy);margin:32px 0 10px;}
.art-liste{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:11px;}
.art-liste li{display:grid;grid-template-columns:1.15rem 1fr;color:var(--art-corps);
  font-size:1.06rem;line-height:1.66;}
.art-liste li::before{content:"—";color:var(--gold-d);}
.art-cite{margin:36px 0;padding:0;border:none;text-align:center;}
.art-cite p{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.42rem;
  line-height:1.4;color:var(--navy);margin:0 auto;max-width:34ch;}

/* ── Le tableau d'un article ──
   Un tableau de droit se lit comme un tableau : filets horizontaux
   seulement, en-tête en petites capitales dorées, pas de fond alterné.
   Sur téléphone il défile DANS son cadre, jamais la page — et un dégradé
   en bord droit dit qu'il reste quelque chose à voir. */
.art-tab{margin:30px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
             linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
             radial-gradient(farthest-side at 100% 50%,rgba(0,27,58,.14),transparent) 100% 0;
  background-repeat:no-repeat;background-size:34px 100%,34px 100%,16px 100%;
  background-attachment:local,local,scroll;}
.art-tab table{width:100%;min-width:520px;border-collapse:collapse;
  font-size:.97rem;line-height:1.5;}
.art-tab th{text-align:left;vertical-align:bottom;font-family:var(--body);font-size:10.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--art-or-texte);
  padding:0 20px 10px 0;border-bottom:2px solid var(--navy);}
.art-tab td{text-align:left;vertical-align:top;color:var(--art-corps);
  padding:14px 20px 14px 0;border-bottom:1px solid var(--art-filet-f);}
.art-tab tr:last-child td{border-bottom:none;}
.art-tab th:last-child,.art-tab td:last-child{padding-right:0;}
.art-tab td b,.art-tab td strong{color:var(--navy);font-weight:600;}

/* ── L'encart d'échéance ──
   Une date qui décide de tout mérite d'être vue sans être criée : un filet
   marine à gauche, du texte, rien d'autre. Même famille que le rappel
   d'urgence, en bleu au lieu du rouge — celui-ci informe, il n'alerte pas. */
.art-encart{margin:32px 0;padding:4px 0 4px 22px;border-left:2px solid var(--navy);}
.art-encart p{margin:0;font-size:1.03rem;line-height:1.68;color:var(--art-corps);}
.art-encart b{color:var(--navy);font-weight:600;}

/* Emplacement d'image, si un article en demande une un jour. Le gabarit la
   porte ; aucun article n'en reçoit par défaut. */
.art-figure{margin:36px 0;}
.art-figure img{width:100%;height:auto;}
.art-figure figcaption{margin-top:10px;font-family:var(--body);font-size:13px;color:var(--muted);}

.art-pause{margin:60px 0 0;}

/* ── 6 · L'auteur ──
   Décadré, centré : c'est la seule photographie de la page, elle se
   présente de face, à une taille qui se regarde. ── */
.art-auteur{display:block;text-align:center;margin:56px 0 68px;padding:30px 0 0;
  background:none;border:none;border-top:1px solid var(--art-filet);border-radius:0;}
/* ── Le portrait ──
   Quatre traitements soumis au Maître : nu, adossé à un bloc bleu nuit,
   côte à côte en colophon, en débord sur un aplat crème. Choix retenu : le
   nu. Aucun cadre, aucune monture, aucune ombre, aucun fond — la
   photographie tient seule, plus grande, et c'est le blanc autour d'elle
   qui la présente. Le seul ornement est le filet doré court qui la sépare
   du nom. C'est le parti le plus difficile à tenir et le plus sûr : rien
   ne peut s'y démoder. */
.art-auteur{position:relative;}
.art-auteur img{display:block;width:196px;height:256px;object-fit:cover;object-position:50% 28%;
  margin:0 auto 30px;padding:0;background:none;border:none;border-radius:0;box-shadow:none;}
@media(min-width:760px){ .art-auteur img{width:228px;height:298px;} }
/* Le filet du socle, court et centré, tient le nom sous la photographie. */
.art-auteur h2::before{content:"";display:block;width:58px;height:1px;
  margin:0 auto 22px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.art-auteur h2{font-family:var(--display);font-weight:500;font-size:1.68rem;color:var(--navy);
  margin:0 0 9px;line-height:1.14;letter-spacing:.005em;}
@media(min-width:760px){ .art-auteur h2{font-size:1.92rem;} }
/* ── La qualité ──
   Trois lignes, et « SEINE-SAINT-DENIS » coupé en plein milieu d'un nom
   propre : la mesure était trop courte de moitié pour du texte espacé à
   .18em. Elle s'élargit, l'interlettrage se resserre d'un cheveu, et les
   traits d'union du nom du barreau sont devenus insécables — il ne peut
   plus se briser. */
.art-auteur .qual{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--art-or-texte);margin:0 auto 20px;max-width:34rem;
  line-height:1.85;-webkit-hyphens:none;hyphens:none;}
.art-auteur p{font-size:15.5px;line-height:1.68;color:var(--art-corps);margin:0 auto 16px;max-width:48ch;}
.art-auteur a.dom{display:inline-flex;align-items:center;min-height:44px;font-weight:600;
  color:var(--navy);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--gold);}
.art-auteur a.dom:hover{color:var(--art-or-texte);}

/* ══ 7 · CLÔTURE — pleine largeur, bleu nuit ════════════════════════════
   Le téléphone d'abord : à 23 h on appelle, on ne remplit pas un formulaire.
   C'est le seul or plein de la page, avec le bouton collant. */
.art-cta{position:relative;isolation:isolate;overflow:hidden;text-align:center;border-radius:0;
  box-shadow:none;padding:64px 22px 66px;margin:0;
  background:
    radial-gradient(110% 80% at 16% 112%,rgba(201,162,74,.18),transparent 60%),
    linear-gradient(160deg,rgba(0,21,48,.94) 0%,rgba(0,13,31,.97) 60%,rgba(0,8,20,.99) 100%),
    image-set(url("/images/library.avif") type("image/avif"), url("/images/library.webp") type("image/webp"), url("/images/library.jpg") type("image/jpeg")) center 62%/cover no-repeat,
    var(--navy-2);}
@media(min-width:900px){ .art-cta{padding:82px 30px 84px;} }
.art-cta-in{max-width:40rem;margin:0 auto;}
.art-cta .lab{display:block;margin-top:22px;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);}
.art-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,5.4vw,2.7rem);
  line-height:1.12;color:#fff;margin:14px 0 10px;text-wrap:pretty;}
.art-cta h2 em{font-style:italic;color:var(--gold);}
.art-cta .rappel{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--art-clair);margin:0 0 30px;}
.art-cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;}
.art-tel{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:15px 34px;
  border-radius:0;background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);
  font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:.02em;line-height:1;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  box-shadow:0 12px 30px rgba(201,162,74,.3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.art-tel:hover{text-decoration:none;filter:none;transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(201,162,74,.42);}
.art-tel svg{flex:none;}
.art-form{display:inline-flex;align-items:center;min-height:56px;padding:15px 28px;border-radius:0;
  border:1px solid rgba(255,255,255,.34);color:#fff;font-family:var(--body);font-weight:600;
  font-size:15.5px;transition:border-color .3s var(--ease),color .3s var(--ease);}
.art-form:hover{border-color:var(--gold);color:var(--gold-l);text-decoration:none;}

/* ── 9 · Questions fréquentes ─────────────────────────────────────────── */
.art-faq{margin:64px 0 0;text-align:center;}
.art-faq>h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.6vw,2rem);
  color:var(--navy);margin:20px 0 6px;padding:0;}
.art-faq>h2::after{content:none;}
.art-faq-list{margin-top:18px;text-align:left;}
.art-faq-item{padding:22px 0;border-bottom:1px solid var(--art-filet-f);}
.art-faq-item:last-child{border-bottom:none;}
.art-faq-item h3{display:grid;grid-template-columns:1.1rem 1fr;gap:2px;font-family:var(--display);
  font-weight:500;font-size:1.22rem;line-height:1.3;color:var(--navy);margin:0 0 8px;
  text-wrap:pretty;}
.art-faq-item h3::before{content:"◆";color:var(--gold-d);font-size:.52em;line-height:2.5;}
.art-faq-item p{color:var(--art-corps);font-size:1.03rem;line-height:1.68;margin:0;
  padding-left:1.1rem;}

/* ── 10 · Avertissement (texte imposé) : petit corps, mesure courte, sans
      cadre. La mention légale doit être lisible et se tenir en retrait. ── */
.art-avert{margin:52px 0 0;padding:20px 0 0;background:none;border:none;
  border-top:1px solid var(--art-filet);border-radius:0;}
.art-avert p{margin:0;max-width:60ch;font-size:14px;line-height:1.72;color:var(--muted);}
.art-avert b{color:var(--ink);font-weight:600;}
.art-avert a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--art-filet);}
.art-avert a:hover{text-decoration-color:var(--navy);}

/* ── 11 · À lire également ────────────────────────────────────────────── */
.art-lies{margin:50px 0 0;padding-top:20px;border-top:1px solid var(--art-filet);}
.art-lies h2{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.art-lies ul{display:grid;gap:0;list-style:none;padding:0;}
.art-lies a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--art-filet-f);color:var(--navy);
  font-family:var(--display);font-size:1.17rem;line-height:1.3;}
.art-lies li:last-child a{border-bottom:none;}
.art-lies a small{display:block;font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.art-lies a i{font-style:normal;color:var(--gold-d);transition:transform .3s var(--ease);}
.art-lies a:hover{color:var(--art-or-texte);text-decoration:none;}
.art-lies a:hover i{transform:translateX(5px);}

.art-fin{height:76px;}

/* ── Focus visible ───────────────────────────────────────────────────── */
.art-page a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
.art-hero a:focus-visible,.art-cta a:focus-visible,
.appel-collant:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;}

/* ── 8 · Le bouton d'appel collant, TÉLÉPHONE UNIQUEMENT ───────────────
   Il ne masque JAMAIS de texte : .art-fin réserve exactement sa hauteur,
   zone sûre de l'écran comprise. ── */
.appel-collant{display:none;}
@media (max-width:900px){
  .appel-collant{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:118;
    font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
    align-items:center;justify-content:center;gap:11px;min-height:48px;
    padding:9px 20px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--navy);
    border-top:1px solid rgba(0,27,58,.18);font-family:var(--body);font-weight:600;
    font-size:16.5px;letter-spacing:.02em;box-shadow:0 -10px 30px rgba(0,27,58,.24);}
  .appel-collant:hover{text-decoration:none;}
  .art-fin{height:calc(78px + env(safe-area-inset-bottom));}
  /* une seule invitation à la fois, toujours à la même place */
  .fab,.header-rdv{display:none!important;}
}
@media (max-width:400px){
  .art-shell{padding:0 18px;}
  .art-essentiel{padding:26px 20px 28px;}
  .art-tel{width:100%;justify-content:center;font-size:1.28rem;}
  .art-form{width:100%;justify-content:center;}
}
@media print{
  .appel-collant,.art-cta,.art-lies,.art-rail,.art-pause,.art-emblem{display:none!important;}
  .art-hero{background:#fff!important;color:#000;padding:0 0 12pt;text-align:left;}
  .art-titre,.art-titre em{color:#000!important;font-size:22pt!important;font-style:normal;}
  .art-fil,.art-fil a,.art-dateline,.art-dateline b,.art-dates,.art-dates time{color:#000!important;}
  .art-badge{background:none!important;color:#000!important;box-shadow:none;padding:0;}
  .art-essentiel{background:#fff;box-shadow:none;border:1px solid #999;padding:12pt;}
  .art-tab{overflow:visible;background:none;}
  .art-tab table{min-width:0;font-size:9.5pt;}
  .art-tab th,.art-tab td{color:#000;}
  .art-tab tr{break-inside:avoid;}
  .art-auteur img{box-shadow:none;border:none;}
  .art-auteur h2::before{display:none;}
  .art-encart{border-left-color:#000;}
  .art-encart p{color:#000;}
  .art-corps>p,.art-liste li,.art-faq-item p{color:#000;}
}

/* ── Les ancres atterrissent SOUS l'en-tête fixe ──
   Mesuré : l'en-tête fait 93 px, et cinq sections sur six posaient leur titre
   entre 48 et 83 px du haut — couvert. Une marge de défilement sur toute
   cible d'ancre : le titre arrive sous l'en-tête, pas derrière.
   (Ne joue que sur les sauts d'ancre — aucune incidence sur la mise en page.) */
[id]{scroll-margin-top:106px;}