/* =====================================================================
   RIVE DROITE M5 · la feuille de la maquette, servie par le site.

   PROVENANCE. Ce fichier est le bloc <style> de
   « C:/Users/wahid/Desktop/Cabinet ACI - Maquettes/M5-Rive-Droite.html »
   (lignes 9 a 617), recopie a l'identique, sans reecriture, sans
   simplification et sans « optimisation ». La seule ligne retiree est
   l'@import de fonts.googleapis.com : les deux familles de la maquette,
   Bodoni Moda et Jost, sont deja auto-hebergees et declarees par
   public/assets/css/polices.css, charge juste avant celui-ci. La
   politique de contenu du site n'autorise aucun hote externe : un
   @import Google aurait ete bloque, et la maquette serait tombee sur
   ses piles de repli.

   Ce que la feuille contient, dans l'ordre :
     1. la feuille de la maquette, telle quelle (partie « MAQUETTE ») ;
     2. les deux classes qui remplacent les trois attributs style= de la
        maquette, interdits par la politique de contenu (partie
        « ATTRIBUTS style= DEPLACES ») ;
     3. la pastille de recette et le lien d'evitement (partie
        « CHROME DU SITE ») ;
     4. les pages interieures, ecrites dans la langue de la maquette
        (memes variables, memes filets, memes courbes) : article,
        blog, rubrique, domaines, decisions, contact, recherche,
        mentions, plan, 404 (partie « PAGES INTERIEURES »).

   RIEN DANS LA PARTIE 1 NE DOIT ETRE MODIFIE POUR ARRANGER UNE PAGE
   INTERIEURE. Si une page interieure a besoin d'autre chose, elle le
   demande dans la partie 4, avec ses propres classes.
   ===================================================================== */

/* ============================ 1. MAQUETTE ============================ */


:root{
  --charbon:#171616;
  --charbon-2:#141312;
  --charbon-3:#1B1917;
  --ambre:#DE9B41;
  --ambre-clair:#EFC582;
  --ambre-fonce:#A66C12;
  --grege:#999488;
  --grege-cl:#B5AFA3;
  --blanc:#EDEAE3;
  --blanc-2:#F0EDE6;
  --papier:#F1EDE4;
  --encre:#171616;
  --encre-2:rgba(23,22,22,.76);
  --encre-3:rgba(23,22,22,.6);
  --filet:rgba(23,22,22,.18);
  --filet-nuit:rgba(237,234,227,.16);
  --e1:cubic-bezier(.76,0,.24,1);
  --e2:cubic-bezier(.22,1,.36,1);
  --e3:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--ambre-fonce) var(--blanc)}
html.apercu{scroll-behavior:auto}
body{
  background:var(--papier);
  color:var(--encre);
  font-family:'Jost',system-ui,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.68;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  caret-color:var(--ambre-fonce);
}
::selection{background:var(--ambre);color:var(--charbon)}
::-webkit-scrollbar{width:9px;background:var(--blanc)}
::-webkit-scrollbar-thumb{background:var(--ambre-fonce);border:2px solid var(--blanc)}
:focus-visible{outline:2px solid var(--ambre-fonce);outline-offset:3px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;text-underline-offset:.28em}
h1,h2,h3{font-family:'Bodoni Moda',Didot,serif;font-weight:500}

/* ---------- primitives ---------- */
.wrap{width:min(1220px,calc(100% - 9vw));margin:0 auto}
.label{
  display:flex;align-items:center;gap:1rem;
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600; /* AA : l'ambre foncé (3,8:1) est réservé au filet */
}
.label::before{content:"";width:2.6rem;height:1px;background:var(--ambre-fonce);flex:none}
.hero .label{color:var(--encre-2);font-weight:600}
.hero .label::before{background:var(--ambre-fonce)}
.lk{position:relative;display:inline-block;padding-bottom:.2rem}
.lk::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--e2);
}
.lk:hover::after{transform:scaleX(1);transform-origin:left}
.cta{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--encre);
  transition:color .25s var(--e2),transform .15s var(--e2);
}
/* flèche : SVG dessiné (un trait, cohérent avec les filets 1px), hérité par masque */
.cta::after{
  content:"";width:1.3rem;height:.65rem;flex:none;background:var(--ambre-fonce);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4 21.8 6l-5.2 4.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4 21.8 6l-5.2 4.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .3s var(--e2);
}
.cta:hover{color:var(--ambre-fonce)}
.cta:hover::after{transform:translateX(.5rem)}
.cta:active{transform:scale(.98)}
.btn{
  display:inline-block;
  background:var(--charbon);color:var(--blanc-2);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;
  padding:1.15rem 2.7rem 1.05rem;
  background-image:linear-gradient(105deg,rgba(222,155,65,0) 42%,rgba(222,155,65,.5) 50%,rgba(222,155,65,0) 58%),linear-gradient(var(--charbon),var(--charbon));
  background-size:260% 100%,100% 100%;
  background-position:-160% 0,0 0;
  background-repeat:no-repeat;
  transition:letter-spacing .35s var(--e2);
}
.btn:hover{background-position:160% 0,0 0;transition:background-position .9s var(--e2),letter-spacing .35s var(--e2);letter-spacing:.4em}
.btn:active{transform:scale(.985)}

/* ---------- révélations : entrées propres à chaque section, aucun clip-path fermé nulle part.
     Tous les éléments observés sont pleinement mesurables par IntersectionObserver. ---------- */
html.js .rise{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e3),transform .8s var(--e3)}
html.js .rise.in{opacity:1;transform:none}
html.js .fade{opacity:0;transition:opacity 1s var(--e2)}
html.js .fade.in{opacity:1}
/* rangées éditoriales : elles se posent depuis la marge, comme une ligne composée */
html.js .rangee{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--e3),transform .7s var(--e3)}
html.js .rangee.in{opacity:1;transform:none}
/* images : fondu + le cadrage se resserre lentement (Ken Burns au long cours sur l'image) */
html.js .cadre{opacity:0;transition:opacity 1.4s var(--e2)}
html.js .cadre.in{opacity:1}
html.js .cadre .kb{transform:scale(1.055);transition:transform 2.4s var(--e2)}
html.js .cadre.in .kb{transform:scale(1)}
.cadre .kb img{animation:kenburns 18s var(--e2) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
/* urgence : le numéro se resserre en s'éclairant */
html.js .tel-in{opacity:0;letter-spacing:.08em;transition:opacity 1.15s var(--e3),letter-spacing 1.15s var(--e3)}
html.js .tel-in.in{opacity:1;letter-spacing:.01em}
html.js .rise.d1,html.js .fade.d1,html.js .rangee.d1{transition-delay:.08s}
html.js .rise.d2,html.js .fade.d2,html.js .rangee.d2{transition-delay:.16s}
html.js .rise.d3,html.js .fade.d3,html.js .rangee.d3{transition-delay:.24s}
html.js .rise.d4,html.js .fade.d4,html.js .rangee.d4{transition-delay:.32s}
html.js .rise.d5,html.js .fade.d5,html.js .rangee.d5{transition-delay:.4s}
html.apercu .rise,html.apercu .fade,html.apercu .rangee,html.apercu .cadre,html.apercu .tel-in{opacity:1 !important;transform:none !important;transition:none !important}
html.apercu .tel-in{letter-spacing:.01em !important}
html.apercu .cadre .kb{transform:none !important;transition:none !important}
html.apercu .cadre .kb img{animation:none !important}

/* ---------- LA SIGNATURE : la lumière du matin se lève sur les sections claires ----------
   Chaque section porteuse de .lum reçoit une nappe de lumière ambrée très douce (::before)
   qui s'intensifie à la révélation ; l'angle de la lumière tourne de section en section,
   comme le soleil qui monte sur les façades. Purement décoratif : le contenu ne dépend
   jamais de la mécanique. */
.lum{position:relative}
.lum::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;
}
html.js .lum::before{transition:opacity 2.4s var(--e2)}
html.js .lum.in::before,html.apercu .lum::before,html:not(.js) .lum::before{opacity:1}
.lum-d::before{background:radial-gradient(110% 85% at 88% -12%,rgba(239,197,130,.42),rgba(239,197,130,0) 58%);transform-origin:88% 0}
.lum-g::before{background:radial-gradient(110% 85% at 10% -12%,rgba(239,197,130,.38),rgba(239,197,130,0) 58%);transform-origin:10% 0}
.lum-h::before{background:linear-gradient(to bottom,rgba(239,197,130,.3),rgba(239,197,130,0) 34%);transform-origin:50% 0}
.lum > *{position:relative;z-index:1}
/* la lumière n'est jamais immobile : l'angle des nappes glisse sur 20 s (transform seul,
   les bords des dégradés sont transparents bien avant la limite : rien ne déborde visiblement) */
@keyframes lum-glisse{from{transform:rotate(-1.1deg) scale(1.03)}to{transform:rotate(1.1deg) scale(1.06)}}
html.js .lum.in::before{animation:lum-glisse 20s ease-in-out infinite alternate}
html.apercu .lum::before{animation:none !important;transform:none !important}
/* filets fins des labels : ils se tracent à la révélation */
html.js .label::before,html.js .label::after{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e2) .4s}
html.js .in .label::before,html.js .in .label::after,
html.js .label.in::before,html.js .label.in::after,
html.js.ouverte .hero .label::before,
html.apercu .label::before,html.apercu .label::after{transform:scaleX(1)}
/* ---------- LA POUSSIÈRE DU MATIN : calque Three.js d'embellissement, jamais porteur de contenu ---------- */
#jour{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  width:100%;height:100%;display:block;
  opacity:1;transition:opacity 1.6s var(--e2);
}
#jour.nuit{opacity:0}
html.sans3d #jour{display:none}

/* ---------- ouverture du hero : la nuit se dissipe, le titre monte ligne à ligne ---------- */
.hero-lever{position:absolute;inset:0;z-index:4;background:var(--charbon);pointer-events:none;opacity:0}
html.js .hero-lever{transition:opacity 1.5s var(--e2)}
html.js:not(.ouverte) .hero-lever{opacity:1}
.hl{display:block;overflow:hidden}
.hw{display:block}
html.js .hw{transition:transform .95s var(--e3) .12s}
html.js .hl-2 .hw{transition-delay:.26s}
html.js .hl-3 .hw{transition-delay:.4s}
html.js:not(.ouverte) .hw{transform:translateY(115%)}
html.js .ov{transition:opacity .85s var(--e3),transform .85s var(--e3)}
html.js:not(.ouverte) .ov{opacity:0;transform:translateY(22px)}
html.js .ov.o1{transition-delay:.6s}
html.js .ov.o2{transition-delay:.74s}
html.js .top{transition:opacity .7s var(--e2) 1s,color .45s var(--e2)}
html.js:not(.ouverte) .top{opacity:0}
html.js .hero-frame{transition:opacity 1.2s var(--e2) 1.1s}
html.js:not(.ouverte) .hero-frame{opacity:0}
html.js .scroll-cue{transition:opacity .9s var(--e2) 1.25s}
html.js:not(.ouverte) .scroll-cue{opacity:0}
html.apercu .hero-lever{display:none}

/* ---------- barre haute ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 3rem;
  color:var(--blanc-2);
  transition:color .45s var(--e2);
}
/* lisibilité : la barre change de teinte selon la section traversée (classe posée par le script),
   avec un léger scrim assorti — plus aucun blend difference. */
.top::before,.top::after{content:"";position:absolute;inset:0 0 -1.4rem 0;pointer-events:none;z-index:-1;transition:opacity .45s var(--e2)}
.top::before{background:linear-gradient(to bottom,rgba(23,22,22,.5),rgba(23,22,22,0));opacity:1}
.top::after{background:linear-gradient(to bottom,rgba(241,237,228,.9),rgba(241,237,228,0));opacity:0}
html.top-clair .top{color:var(--encre)}
html.top-clair .top::before{opacity:0}
html.top-clair .top::after{opacity:1}
.brand{font-size:.74rem;font-weight:500;letter-spacing:.52em;text-transform:uppercase;white-space:nowrap}
/* rubriques visibles sur ordinateur (12 septembre 2026) ; sous 1100px, le menu latéral seul */
.top-nav{display:flex;gap:2.1rem;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.top-nav a{position:relative;padding:.35rem 0;white-space:nowrap}
.top-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--e2)}
.top-nav a:hover::after,.top-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
@media(max-width:1100px){.top-nav{display:none}}
.top-right{display:flex;align-items:center;gap:2.4rem}
.top-tel{font-size:.78rem;letter-spacing:.14em;font-weight:400}
.burger{
  background:none;border:0;color:inherit;cursor:pointer;
  display:flex;align-items:center;gap:.9rem;
  font:inherit;font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;
  padding:1.15rem 1rem;margin:-1.15rem -1rem; /* cible tactile >= 44px sans bouger la mise en page */
}
.burger .lines{display:inline-flex;flex-direction:column;gap:6px;width:30px}
.burger .lines i{height:1px;background:currentColor;transition:width .3s var(--e2)}
.burger .lines i:last-child{width:66%;align-self:flex-end}
.burger:hover .lines i:last-child{width:100%}
.burger:active{transform:scale(.98)}

/* ---------- menu latéral : un panneau de papier ---------- */
.veil{
  position:fixed;inset:0;z-index:70;background:rgba(20,19,18,.45);
  opacity:0;visibility:hidden;transition:opacity .45s var(--e2),visibility 0s .45s;
}
.menu{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(470px,100%);
  background:var(--papier);color:var(--encre);
  border-left:1px solid var(--filet);
  transform:translateX(101%);
  visibility:hidden;
  transition:transform .6s var(--e1),visibility 0s .6s;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,4vh,3rem) clamp(1.8rem,4vw,3.4rem);
}
html.menu-open .menu{transform:none;visibility:visible;transition:transform .6s var(--e1)}
html.menu-open .veil{opacity:1;visibility:visible;transition:opacity .45s var(--e2)}
.menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(2rem,7vh,4.5rem)}
.menu-head .sig{font-size:.72rem;letter-spacing:.5em;text-transform:uppercase}
.menu-head .sig b{color:var(--ambre-fonce);font-weight:600}
.close{background:none;border:0;color:var(--encre-3);cursor:pointer;font:inherit;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;transition:color .25s}
.close:hover{color:var(--ambre-fonce)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(1.8rem,4.4vh,2.35rem);line-height:1.12;
  padding:.6rem 0;
  border-bottom:1px solid var(--filet);
  transition:color .35s var(--e2),letter-spacing .35s var(--e2),padding-left .35s var(--e2);
}
.menu nav a:hover{color:var(--ambre-fonce);letter-spacing:.03em;padding-left:.6rem}
.menu-foot{margin-top:auto;padding-top:2rem;font-size:.85rem;color:var(--encre-2)}
.menu-foot .tel-g{font-family:'Bodoni Moda',Didot,serif;font-size:1.7rem;color:var(--encre);display:block;margin:.5rem 0 .2rem}
.menu-foot .u{color:var(--encre-2);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600}

/* ---------- HERO : la colonnade du matin (demande client : « les colonnes plutôt en hero ») ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:#ddccab;color:var(--encre)}
html.apercu .hero{min-height:auto !important;height:800px}
.hero-fig{position:absolute;inset:0;overflow:hidden;background:linear-gradient(168deg,#e9ddc4 0%,#dcc9a4 46%,#c9b48c 100%)}
.hero-fig .plx{position:absolute;inset:0;will-change:transform}
/* 12/09/2026 : la pierre manquait de presence (retour de Wahid) : couleurs
   et contraste soutenus, voile eclairci ci-dessous. */
.hero-fig img,.hero-video{
  filter:saturate(1.28) contrast(1.12) brightness(.99);
}
.hero-fig img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;
  animation:kenburns 26s var(--e2) infinite alternate;
}
html.apercu .hero-fig img{animation:none;transform:scale(1.02)}
.hero-video{
  position:absolute;left:0;top:-6%;width:100%;height:112%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.2s var(--e2);
}
.hero-video.on{opacity:1}
html.apercu .hero-video{display:none}
.hero-fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(241,237,228,.40),rgba(241,237,228,.10) 34%,rgba(241,237,228,0) 58%),
    radial-gradient(72% 58% at 58% 26%,rgba(239,197,130,.30),rgba(239,197,130,0) 68%),
    linear-gradient(to bottom,rgba(241,237,228,.10),rgba(241,237,228,0) 24%,rgba(241,237,228,0) 54%,rgba(241,237,228,.58) 86%,#F1EDE4 100%);
}
.hero-frame{position:absolute;inset:clamp(14px,1.8vw,24px);border:1px solid rgba(23,22,22,.22);pointer-events:none;z-index:3}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(5.5rem,10vh,8rem)}
.hero-cols{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem}
.hero h1{
  font-size:clamp(2.9rem,7vw,6.3rem);
  line-height:1;font-weight:500;letter-spacing:.004em;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--ambre-fonce)}
.hero .label{margin-top:1.8rem}
.hero-base{margin-top:1.4rem;color:var(--encre-2);font-size:1rem;letter-spacing:.015em;max-width:47ch}
.hero-base b{color:var(--encre);font-weight:500}
/* le premier écran sert aussi : rendez-vous et chemin d'urgence (12 septembre 2026) */
.hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2.4rem}
.btn-hero{padding:1.05rem 2.2rem .95rem}
.hero-urgence{display:inline-flex;flex-direction:column;gap:.2rem;line-height:1.5;color:var(--encre);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.62rem}
.hero-urgence .hu-mot{color:var(--ambre-fonce)}
.hero-urgence .hu-tel{font-size:.9rem;letter-spacing:.12em}
.hero-urgence:hover .hu-tel{color:var(--ambre-fonce)}
.hero-adr{
  text-align:right;flex:none;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-2);line-height:2.15;white-space:nowrap;
}
.hero-adr b{display:block;color:var(--encre);font-weight:600}
.scroll-cue{
  position:absolute;left:50%;bottom:2.1rem;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:.9rem;
  font-size:.6rem;letter-spacing:.44em;text-transform:uppercase;color:var(--encre-3);
}
.scroll-cue::before,.scroll-cue::after{content:"";width:3.4rem;height:1px;background:currentColor;opacity:.45}

/* ---------- L'AUBE : le hero est déjà lumineux, la bande devient une simple respiration de papier ---------- */
.aube{position:relative;background:var(--papier)}
.ciel{
  position:relative;
  height:clamp(46px,7vh,84px);
  background:var(--papier);
}
/* un rai de lumière ancre la bande et conduit l'œil jusqu'à la phrase */
.ciel::after{
  content:"";position:absolute;top:0;bottom:calc(-1*clamp(2.6rem,6vh,4rem));
  left:max(4.5vw,calc(50% - 610px));width:1px;
  background:linear-gradient(to bottom,rgba(222,155,65,0),var(--ambre) 34%,var(--ambre-fonce) 100%);
}
.aube-inner{padding:clamp(2.6rem,6vh,4rem) 0 clamp(4rem,8vh,5.5rem)}
.aube-inner .aube-ligne{padding-left:clamp(1.6rem,3vw,2.6rem)}
.aube-inner .aube-note{margin-left:clamp(1.6rem,3vw,2.6rem)}
.aube-ligne{
  font-family:'Bodoni Moda',Didot,serif;font-weight:400;
  font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.36;letter-spacing:.004em;
  color:var(--encre);max-width:36ch;text-wrap:pretty;
}
.aube-ligne em{font-style:italic;color:var(--ambre-fonce)}
.aube-ligne sup{font-size:.55em}
.aube-note{
  margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--filet);
  max-width:36ch;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--encre-3);font-weight:500;
}

/* ---------- têtes de section ---------- */
.sec-head h2{font-size:clamp(2.1rem,3.8vw,3.3rem);font-weight:500;line-height:1.05;letter-spacing:.004em}
.sec-head h2 em{font-style:italic;font-weight:400;color:var(--ambre-fonce)}
.sec-head .label{margin-top:1.2rem}

/* ---------- domaines : la table des matières ---------- */
.domaines{padding:clamp(4.5rem,9vh,7rem) 0 clamp(5rem,9vh,7rem)}
.dom-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
.dom-col{position:sticky;top:7rem}
html.apercu .dom-col{position:relative;top:0}
.dom-col p.dom-intro{margin-top:1.8rem;color:var(--encre-2);max-width:38ch;font-size:1rem;line-height:1.75}
.dom-col .cta{margin-top:2.2rem}
.dom-liste{border-bottom:1px solid var(--filet)}
/* rangées non cliquables : aucun hover d'affordance, la table des matières se lit, elle ne s'actionne pas */
.dom{
  display:grid;grid-template-columns:1fr;gap:.35rem;
  padding:1.7rem 0 1.6rem;border-top:1px solid var(--filet);
  position:relative;
}
.dom h3{
  font-size:clamp(1.5rem,2.3vw,1.95rem);font-weight:500;line-height:1.12;
}
.dom p{font-size:.95rem;color:var(--encre-2);max-width:52ch}

/* ---------- la décision : la fenêtre du matin ---------- */
.decisions{background:var(--blanc);border-top:1px solid var(--filet);padding:clamp(4.5rem,9vh,7rem) 0}
.dec-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2.5rem,6vw,6.5rem);align-items:start}
.dec-body{padding-top:.4rem}
.dec-mot{
  font-size:clamp(3.6rem,8.2vw,6.6rem);line-height:.95;letter-spacing:.01em;
  color:var(--encre);margin-top:2.2rem;
}
.dec-titre{
  font-family:'Bodoni Moda',Didot,serif;font-weight:400;
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.44;
  margin-top:1.4rem;max-width:36ch;
}
.dec-meta{
  margin-top:1.5rem;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--encre-2);font-weight:600;
}
.dec-meta span{color:var(--encre-3);font-weight:500}
.dec q{
  display:block;font-family:'Bodoni Moda',Didot,serif;font-style:italic;
  font-size:1.14rem;line-height:1.6;color:var(--encre-2);
  margin-top:1.3rem;max-width:50ch;quotes:"« " " »";
}
.dec-ctas{margin-top:2.3rem;display:flex;gap:2.6rem;align-items:center;flex-wrap:wrap}
.dec-accomp{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--filet);
  font-size:.95rem;color:var(--encre-2);line-height:1.72;max-width:56ch;
}

/* cadre haussmannien : passe-partout fin, format haut */
.cadre{background:transparent}
.cadre .passe{
  border:1px solid rgba(23,22,22,.4);
  padding:clamp(.7rem,1.2vw,1.1rem);
}
.cadre .kb{overflow:hidden;position:relative;background:linear-gradient(165deg,#e7ddc9,#cbbfa6 60%,#b3a48a)}
.cadre .kb img{width:100%;height:100%;object-fit:cover}
.cadre figcaption{
  margin-top:.9rem;
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--encre-3);font-weight:500;
}
.cadre figcaption span{white-space:nowrap}
.dec-fig .kb{aspect-ratio:3/4}

/* ---------- le cabinet ---------- */
.cabinet{padding:clamp(4.5rem,9vh,7rem) 0 0;border-top:1px solid var(--filet)}
.cab-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(2.5rem,6vw,7rem);align-items:start;margin-top:clamp(2.6rem,6vh,4rem)}
.cab-txt p{color:var(--encre-2);max-width:60ch;line-height:1.78}
.cab-txt p + p{margin-top:1.15rem}
.cab-txt .lede{color:var(--encre);font-size:1.08rem}
.cab-txt .lede::first-letter{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  float:left;font-size:3.55em;line-height:.82;
  padding:.08em .14em 0 0;color:var(--ambre-fonce);
}
.cab-aside{border-left:1px solid var(--filet);padding-left:clamp(1.6rem,2.5vw,2.6rem)}
.cab-cit{
  font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.45;color:var(--encre);
  quotes:"« " " »";display:block;
}
.cab-cit::before{content:open-quote;color:var(--ambre-fonce)}
.cab-cit::after{content:close-quote;color:var(--ambre-fonce)}
.cab-piliers{
  margin-top:1.9rem;padding-top:1.3rem;border-top:1px solid var(--filet);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--encre-2);font-weight:600;line-height:2.3;
}
.cab-ressorts{margin-top:1.1rem;font-size:.85rem;color:var(--encre-2);line-height:1.7;max-width:34ch}
.cab-cta{margin-top:2.4rem;display:flex;gap:2.4rem;align-items:center;flex-wrap:wrap}
.cab-fig{margin-top:clamp(3.5rem,7vh,5.5rem)}
.cab-fig .kb{aspect-ratio:21/8}
.cab-fig .kb img{position:absolute;inset:0;height:100%}

/* ---------- actualités juridiques : le sommaire de revue ---------- */
.pubs{padding:clamp(4.5rem,9vh,7rem) 0;background:var(--blanc);border-top:1px solid var(--filet)}
.pub-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.pub-lect{
  font-family:'Bodoni Moda',Didot,serif;font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--encre-2);
  max-width:30ch;text-align:right;line-height:1.5;
}
.pub-lect em{color:var(--ambre-fonce);font-style:italic}
.pub-liste{border-bottom:1px solid var(--filet)}
.pub{
  display:grid;grid-template-columns:11rem 1fr auto;gap:.3rem 2.2rem;align-items:baseline;
  padding:1.5rem 0 1.4rem;border-top:1px solid var(--filet);
  transition:padding-left .35s var(--e2);
}
.pub:hover{padding-left:.8rem}
.pub .cat{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--encre-3);font-weight:600;transition:color .3s var(--e2)}
.pub:hover .cat{color:var(--ambre-fonce)}
.pub h3{font-size:clamp(1.2rem,1.85vw,1.55rem);font-weight:400;line-height:1.3;transition:color .3s var(--e2);text-wrap:pretty}
.pub:hover h3{color:var(--ambre-fonce)}
.pub .fl{color:var(--ambre-fonce);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--e2),transform .3s var(--e2)}
.pub .fl svg{display:block}
.pub:hover .fl{opacity:1;transform:none}
.pub-foot{margin-top:2.2rem;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap}
.pub-note{font-size:.92rem;color:var(--encre-2);max-width:52ch;line-height:1.7}

/* ---------- LE SOIR : les toits de Paris reviennent, respiration du crépuscule ---------- */
.soir{position:relative;overflow:hidden;color:var(--blanc-2);background:linear-gradient(180deg,#3a2c1a,#171616)}
.soir-fig{position:absolute;inset:0}
.soir-fig .plx{position:absolute;inset:0;will-change:transform}
/* étalonnage chaud : l'asset des toits sort gris-bleu, on le ramène au crépuscule ambré */
.soir-fig img,.soir-video{
  position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;
  filter:sepia(.62) saturate(1.45) hue-rotate(-8deg) brightness(1.26) contrast(.93);
}
.soir-video{opacity:0;transition:opacity 1.2s var(--e2)}
.soir-video.on{opacity:1}
html.apercu .soir-video{display:none}
.soir-fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
      var(--blanc) 0%,rgba(240,237,230,.4) 14%,rgba(23,22,22,0) 34%,
      rgba(23,22,22,.3) 62%,rgba(23,22,22,.76) 86%,#171616 100%),
    radial-gradient(72% 60% at 62% 38%,rgba(239,197,130,.2),rgba(239,197,130,0) 70%),
    linear-gradient(to right,rgba(23,22,22,.58),rgba(23,22,22,.18) 48%,rgba(23,22,22,0) 72%);
}
.soir-inner{position:relative;z-index:2;padding:clamp(10rem,26vh,17rem) 0 clamp(4.5rem,9vh,6.5rem)}
.soir-cit{
  font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.35rem);line-height:1.42;max-width:26ch;
  color:var(--blanc-2);quotes:"« " " »";display:block;text-wrap:pretty;
  text-shadow:0 1px 26px rgba(23,22,22,.6),0 1px 8px rgba(23,22,22,.35);
}
.soir-cit::before{content:open-quote;color:var(--ambre-clair)}
.soir-cit::after{content:close-quote;color:var(--ambre-clair)}
.soir-note{
  margin-top:1.7rem;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ambre-clair);font-weight:500;
}

/* ---------- urgence : la nuit tombée, la pierre veille sous la lampe ---------- */
.urgence{
  position:relative;overflow:hidden;
  padding:clamp(7rem,14vh,10rem) 0 clamp(8rem,15vh,11rem);
  text-align:center;color:var(--blanc-2);
  background:linear-gradient(165deg,#221d15,#171616 70%);
}
.urg-fig{position:absolute;inset:0}
.urg-fig .plx{position:absolute;inset:0;will-change:transform}
.urg-fig img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;filter:brightness(.9) saturate(.94)}
.urg-fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
      #171616 0%,rgba(23,22,22,.72) 26%,rgba(23,22,22,.6) 55%,
      rgba(20,19,18,.82) 84%,#171616 100%),
    radial-gradient(56% 44% at 50% 46%,rgba(222,155,65,.14),rgba(222,155,65,0) 72%);
}
.urg-inner{position:relative;z-index:2}
.urg-tel{
  display:inline-block;font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(3rem,8.4vw,6.8rem);line-height:1;
  color:var(--blanc-2);margin:0 0 1.6rem;
  transition:color .4s var(--e2),text-shadow .4s var(--e2);
}
.urg-tel:hover{color:var(--ambre-clair);text-shadow:0 0 46px rgba(239,197,130,.5)}
.urg-tel:active{transform:scale(.99)}
.urg-tel.lk::after{height:2px;background:var(--ambre-clair)}
.urg-inner p.urg-tx{max-width:52ch;margin:0 auto;color:var(--grege-cl);font-size:.98rem}
.urg-inner p.urg-tx b{color:var(--blanc-2);font-weight:500}
.urg-inner .btn{
  margin-top:2.4rem;color:var(--charbon);
  background-image:linear-gradient(105deg,rgba(255,246,228,0) 42%,rgba(255,246,228,.55) 50%,rgba(255,246,228,0) 58%),linear-gradient(var(--ambre),var(--ambre));
}

/* ---------- footer : le soir ---------- */
.footer{background:var(--charbon);color:var(--blanc);padding:clamp(3.6rem,7vh,5.5rem) 0 2.2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.foot-brand .sig{font-size:.8rem;letter-spacing:.5em;text-transform:uppercase}
.foot-brand .sig b{color:var(--ambre);font-weight:500}
.foot-brand .bl{margin-top:1rem;font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-size:1.25rem;color:var(--grege-cl)}
.foot-brand .piliers{margin-top:1.4rem;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ambre);font-weight:500}
.foot-brand .certif{margin-top:.9rem;font-size:.8rem;color:var(--grege-cl);line-height:1.6;max-width:38ch}
.foot h4{font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grege-cl);font-weight:500;margin-bottom:1.2rem}
.foot ul{list-style:none}
.foot li{margin-bottom:.55rem;font-size:.9rem;color:#C9C4BA}
.foot li a{transition:color .25s}
.foot li a:hover{color:var(--ambre-clair)}
.foot-low{
  margin-top:clamp(2.8rem,6vh,4.2rem);padding-top:1.5rem;border-top:1px solid var(--filet-nuit);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--grege-cl);letter-spacing:.05em;
}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .dom-grid,.dec-grid,.cab-grid{grid-template-columns:1fr}
  .dom-col{position:relative;top:0}
  .dec-fig{max-width:440px}
  .cab-aside{border-left:0;padding-left:0;border-top:1px solid var(--filet);padding-top:2rem}
  .pub{grid-template-columns:9rem 1fr auto}
}
@media(max-width:720px){
  .top{padding:1.15rem 1.4rem}
  .brand{font-size:.62rem;letter-spacing:.4em}
  .top-tel{display:none}
  .burger span:first-child{display:none}
  .hero{align-items:flex-end}
  .hero-frame{inset:10px}
  .hero-inner{padding-bottom:4.6rem}
  .hero-cols{flex-direction:column;align-items:flex-start;gap:2rem}
  .hero h1{font-size:clamp(2.35rem,10.6vw,3.1rem)}
  .hero .label{display:block;letter-spacing:.17em;font-size:.6rem;line-height:2;margin-top:1.2rem}
  .hero .label::before{display:none}
  .hero-adr{text-align:left}
  .hero-actions{margin-top:1.5rem;gap:1rem 1.6rem}
  .btn-hero{padding:.95rem 1.7rem .85rem}
  /* ouverture plus courte sur téléphone : le rideau et le titre en une seconde, pas deux */
  html.js .hero-lever{transition:opacity .9s var(--e2)}
  html.js .hw{transition:transform .7s var(--e3) .05s}
  html.js .hl-2 .hw{transition-delay:.15s}
  html.js .hl-3 .hw{transition-delay:.25s}
  html.js .ov.o1{transition-delay:.35s}
  html.js .ov.o2{transition-delay:.45s}
  html.js .top{transition:opacity .6s var(--e2) .55s,color .45s var(--e2)}
  html.js .hero-frame{transition:opacity .9s var(--e2) .6s}
  .scroll-cue{display:none}
  .ciel{height:clamp(34px,5vh,54px)}
  .aube-ligne{font-size:1.4rem;line-height:1.42}
  .soir-inner{padding:clamp(7rem,18vh,10rem) 0 3.6rem}
  .soir-cit{font-size:1.4rem}
  /* à 390px la fenêtre lumineuse passe derrière la citation : voile renforcé */
  .soir-fig::after{
    background:linear-gradient(to bottom,
        var(--blanc) 0%,rgba(240,237,230,.35) 12%,rgba(23,22,22,.16) 30%,
        rgba(23,22,22,.56) 50%,rgba(23,22,22,.82) 84%,#171616 100%),
      radial-gradient(80% 50% at 58% 30%,rgba(239,197,130,.16),rgba(239,197,130,0) 70%);
  }
  .dec-mot{font-size:clamp(3rem,15vw,3.9rem)}
  .dec-ctas{gap:1.3rem 2rem}
  .pub{grid-template-columns:1fr;gap:.45rem}
  .pub .fl{display:none}
  .pub-head{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .pub-lect{text-align:left}
  .cab-fig .kb{aspect-ratio:16/10}
  /* à 390px la pierre disparaissait sous le voile : dégradé allégé d'environ 10 %,
     la pierre veille encore derrière le numéro */
  .urg-fig::after{
    background:linear-gradient(to bottom,
        #171616 0%,rgba(23,22,22,.62) 26%,rgba(23,22,22,.5) 55%,
        rgba(20,19,18,.74) 84%,#171616 100%),
      radial-gradient(56% 44% at 50% 46%,rgba(222,155,65,.14),rgba(222,155,65,0) 72%);
  }
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-grid .foot-brand{grid-column:1 / -1}
}

/* outil de vérification mobile (le headless impose 500px minimum) */
html.v390 body{width:390px;overflow-x:hidden}
html.v390 .top,html.v390 .menu{max-width:390px}
html.v390 .top{right:auto;width:390px}
html.v390 #jour{width:390px}

/* ---------- reduced motion : tout est figé, tout est visible ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  html.js .rise,html.js .fade,html.js .rangee,html.js .cadre,html.js .ov,html.js .hw{opacity:1 !important;transform:none !important}
  html.js .tel-in{opacity:1 !important;letter-spacing:.01em !important}
  html.js .cadre .kb{transform:none !important}
  html.js .lum::before{opacity:1 !important}
  html.js .top,html.js .scroll-cue,html.js .hero-frame{opacity:1 !important}
  html.js .hero-lever{display:none}
  .hero-video,.soir-video{display:none}
  #jour{display:none} /* reduced-motion : la scène 3D n'existe pas */
  html.js .label::before,html.js .label::after{transform:none !important}
  html.js .lum.in::before{animation:none !important;transform:none !important}
}

/* ================ 2. ATTRIBUTS style= DEPLACES ==================
   La maquette porte trois attributs style= en ligne. La politique de
   contenu du site est style-src 'self', sans 'unsafe-inline' : un
   attribut style= serait ignore par le navigateur et la page perdrait
   trois nuances. Ils deviennent donc des classes, avec exactement la
   meme declaration.

   .cta-2    <- <a class="cta" style="color:var(--encre-3)">   (deux
               fois : « Toutes les decisions obtenues » et « Garde a
               vue : des les premieres heures »)
   .li-ambre <- <li style="color:var(--ambre)">                (une
               fois : « Nos avocats a votre ecoute », pied de page)
   ================================================================ */
.cta-2{color:var(--encre-3)}
/* .foot li porte deja une couleur (#C9C4BA) et sa specificite est plus forte
   qu'une classe seule : dans la maquette, c'est l'attribut style= qui gagnait.
   La classe est donc qualifiee, pour rendre exactement le meme resultat. */
.foot li.li-ambre{color:var(--ambre)}

/* ==================== 3. CHROME DU SITE =========================
   Ce que la maquette n'avait pas a porter et que le site doit avoir :
   le lien d'evitement et le bandeau d'environnement.

   LE BANDEAU DE RECETTE devient une pastille fixe en bas a gauche. Il
   reste impossible a masquer (il n'a ni bouton ni gestionnaire), mais
   il ne pousse plus la page vers le bas : la comparaison avec la
   maquette doit porter sur la meme mise en page. Il passe sous le menu
   (z-index 80) et sous la barre haute (60), au-dessus de la poussiere
   du matin (40).

   ELLE EST REPLIEE AU PREMIER MOT. Avec sa phrase entiere elle mesurait
   316 px sur deux lignes et recouvrait deux lignes du corps d'un
   article, dont la colonne commence a x=110 en 1440 ; en
   pointer-events:none, le lecteur ne pouvait ni la deplacer ni la
   fermer. Elle n'affiche donc plus que « Recette » (la phrase entiere
   reste dans aria-label et dans title : voir m5_pastille_environnement()),
   ce qui la ramene sous 90 px de large et sur une ligne, dans la marge
   gauche de la maquette. Sous 1150 px environ, la marge se resserre et
   la pastille peut de nouveau frôler le debut d'une ligne : c'est le
   prix d'un repere qu'on ne peut pas masquer, et il ne concerne pas la
   production, ou elle n'existe pas.
   ================================================================ */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--charbon);color:var(--blanc-2);
  padding:.9rem 1.4rem;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
}
.evitement:focus{left:.6rem;top:.6rem}
.visuellement-cache{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.bandeau-environnement{
  position:fixed;left:.7rem;bottom:.7rem;z-index:55;
  margin:0;max-width:calc(100vw - 1.4rem);
  background:rgba(20,19,18,.92);color:var(--ambre-clair);
  border:1px solid rgba(222,155,65,.45);
  padding:.34rem .6rem;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;line-height:1.4;
  white-space:nowrap;
  pointer-events:none;
}

/* ================== 4. PAGES INTERIEURES ========================
   Aucune page interieure n'invente de forme : elle reprend les
   primitives de la maquette (wrap, label, cta, btn, lk, cadre, lum,
   rise/fade/rangee) et n'ajoute que ce qui n'existait pas dans une
   page d'accueil : un fil d'Ariane, un corps de texte long, une
   colonne laterale, une pagination, un formulaire.
   ================================================================ */

/* --- hero des pages interieures : la meme lumiere, moins haute --- */
.hero-page{min-height:auto;display:block;padding-top:clamp(8rem,16vh,11rem)}
/* La maquette fige son hero a 800 px en apercu (html.apercu .hero{height:800px}),
   parce qu'elle n'a qu'un hero, celui de l'accueil, et qu'il fait 100vh. Un hero
   de page interieure fait deja la hauteur de son contenu : lui imposer 800 px
   ouvrait un trou de 400 px sous le titre en ?apercu=1. La regle de la maquette
   n'est pas touchee, elle est simplement rendue au seul hero qu'elle visait. */
html.apercu .hero-page{height:auto !important}
.hero-page .hero-inner{padding-bottom:clamp(3.4rem,7vh,5rem)}
.hero-page h1{
  font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.06;
  max-width:22ch;text-wrap:pretty;
  /* Meme ceinture que .liste-pub .pub .cat : un titre repris peut porter un
     mot plus large que la colonne, et body{overflow-x:hidden} le couperait
     sans prevenir au lieu de le passer a la ligne. */
  overflow-wrap:anywhere;
}
.hero-page h1 em{font-style:italic;font-weight:400;color:var(--ambre-fonce)}
.hero-page .label{margin-top:1.5rem}
.hero-chapo{
  margin-top:1.3rem;color:var(--encre-2);
  font-size:1.05rem;line-height:1.7;max-width:56ch;text-wrap:pretty;
}
/* hero sans image : le papier seul, et le rai de lumiere de l'aube */
.hero-nu{background:var(--papier);color:var(--encre)}
.hero-nu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(96% 78% at 82% -14%,rgba(239,197,130,.4),rgba(239,197,130,0) 60%);
}
.hero-nu > *{position:relative;z-index:1}
/* Le rai de lumiere de l'aube, repris tel quel : meme degrade, meme gauche
   (celle de .ciel::after, c'est-a-dire le bord gauche du .wrap). Et, comme a
   l'aube, le texte se decale de la meme quantite pour laisser passer le filet :
   c'est la composition de la maquette, pas une invention. */
.hero-filet{
  position:absolute;top:0;bottom:32%;
  left:max(4.5vw,calc(50% - 610px));width:1px;z-index:1;
  background:linear-gradient(to bottom,rgba(222,155,65,0),var(--ambre) 34%,var(--ambre-fonce) 100%);
}
.hero-nu .hero-inner{padding-left:clamp(1.6rem,3vw,2.6rem)}
.hero-page.hero-nu{padding-top:clamp(7.5rem,15vh,10rem)}

/* --- fil d'Ariane --- */
.fil{margin-bottom:1.5rem;overflow-wrap:anywhere}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.fil li{
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;
}
.fil li + li::before{content:"\00B7";margin-right:.9rem;color:var(--ambre-fonce)}
.fil a{transition:color .25s var(--e2)}
.fil a:hover{color:var(--ambre-fonce)}
.fil [aria-current]{color:var(--encre-2)}

/* --- sections courantes --- */
.section{position:relative;padding:clamp(3.6rem,8vh,6rem) 0}
.section-blanc{background:var(--blanc);border-top:1px solid var(--filet)}
.wrap-etroit{width:min(760px,calc(100% - 9vw));margin:0 auto}
.sec-tete h2{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.05;letter-spacing:.004em;
}
.sec-tete h2 em{font-style:italic;font-weight:400;color:var(--ambre-fonce)}
.sec-tete .label{margin-top:1.2rem}
.sec-tete-ligne{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2.5rem;margin-bottom:clamp(2.2rem,5vh,3.4rem);flex-wrap:wrap;
}
.label-nu{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600;
}
.grille-8-4{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
.grille-7-5{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,5.5rem);align-items:start}

/* --- corps de texte long : la mesure de la maquette --- */
.prose{max-width:74ch;color:var(--encre-2);line-height:1.78}
/* Sur telephone, un tableau ou un mot sans coupure (une adresse, « extraction/reproduction/modification »)
   elargissait la colonne, donc la page entiere, que le navigateur affichait alors en reduit (12 septembre 2026).
   La colonne ne depasse jamais l'ecran : les mots se coupent, les tableaux defilent dans leur propre cadre. */
.prose{min-width:0;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto}
.prose pre{max-width:100%;overflow-x:auto}
.prose > * + *{margin-top:1.15rem}
.prose h2{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;color:var(--encre);
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.18;
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--filet);
}
.prose h3{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;color:var(--encre);
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.28;margin-top:2rem;
}
.prose h4,.prose h5,.prose h6{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600;margin-top:1.8rem;
}
.prose p{max-width:72ch}
/* --ambre-fonce (#A66C12) donne 3,76:1 sur le papier : la maquette le
   reserve a ses filets et a ses italiques de grande taille (voir sa propre
   note « AA : l'ambre fonce (3,8:1) est reserve au filet »). Un corps
   d'article repris porte jusqu'a 44 liens de texte courant a 17 px : il
   leur faut 4,5:1. --ambre-texte est le meme ambre pousse jusqu'a 5,07:1
   sur le papier (4,93:1 sur --blanc). Il ne sert QUE dans le corps de
   texte ; les filets et les survols de la maquette ne bougent pas. */
.prose{--ambre-texte:#8A5A0C}
.prose a{color:var(--ambre-texte);text-decoration:underline;text-decoration-thickness:1px}
.prose a:hover{color:var(--encre)}
.prose ol{padding-left:1.4rem;max-width:70ch;list-style:decimal}
.prose li{margin-bottom:.5rem}
.prose ul{list-style:none;padding-left:0;max-width:70ch}
.prose ul li{position:relative;padding-left:1.5rem}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:.7rem;height:1px;background:var(--ambre-fonce);
}
.prose blockquote{
  border-left:1px solid var(--ambre-fonce);padding-left:1.6rem;
  font-family:'Bodoni Moda',Didot,serif;font-style:italic;
  font-size:1.15rem;line-height:1.6;color:var(--encre);
}
.prose img{margin:1.8rem 0;border:1px solid var(--filet)}
.prose figure{margin:1.8rem 0}
.prose figcaption{
  margin-top:.7rem;font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--encre-3);font-weight:500;
}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--filet);padding:.7rem .9rem;text-align:left;vertical-align:top}
.prose th{font-weight:600;color:var(--encre);background:rgba(23,22,22,.035)}
.prose .lede{color:var(--encre);font-size:1.08rem}
.prose .lede::first-letter{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  float:left;font-size:3.55em;line-height:.82;
  padding:.08em .14em 0 0;color:var(--ambre-fonce);
}
.prose .certif{font-size:.92rem;color:var(--encre-2)}   /* AA : --encre-3 tombe a 4,49:1 sous 1rem */
.prose .u{
  margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--filet);
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--encre-3);font-weight:500;
}

/* --- metadonnees d'une fiche --- */
.meta{
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;
}
.meta .rubrique a{color:var(--ambre-fonce)}

/* --- colonne laterale --- */
.aside-article{position:sticky;top:7rem;display:grid;gap:1.8rem;align-content:start}
.encadre{border-top:1px solid var(--filet);padding-top:1.4rem}
.encadre h2,.aside-article nav h2{
  font-family:'Jost',system-ui,sans-serif;
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600;margin-bottom:1rem;
}
.aside-article nav{border-top:1px solid var(--filet);padding-top:1.4rem}
.encadre p{font-size:.92rem;color:var(--encre-2);line-height:1.7}
.encadre p + p{margin-top:.8rem}
.encadre ul{list-style:none}
.encadre li{font-size:.92rem;color:var(--encre-2);margin-bottom:.45rem}
.coord li b{color:var(--encre);font-weight:600}
.tel-grand{
  display:inline-block;margin:.7rem 0 .8rem;
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.1;color:var(--encre);
  transition:color .3s var(--e2);
}
.tel-grand:hover{color:var(--ambre-fonce)}
.sommaire{list-style:none}
.sommaire li{margin-bottom:.5rem;font-size:.9rem;line-height:1.45}
.sommaire a{color:var(--encre-2);transition:color .25s var(--e2)}
.sommaire a:hover{color:var(--ambre-fonce)}

/* --- liste de publications : la rangee de la maquette, avec resume --- */
.liste-pub{border-bottom:1px solid var(--filet)}
.liste-pub .pub{grid-template-columns:11rem 1fr auto}
/* Ceinture de securite de mise en page. Les libelles repris de l'ancien site
   ne tiennent pas tous dans une colonne de 11rem : le nom de rubrique
   debordait sur le titre de la publication et les deux textes se
   superposaient. Une grille CSS donne min-width:auto a ses colonnes, ce qui
   les empeche de se retrecir sous la taille de leur mot le plus long :
   min-width:0 le permet, overflow-wrap:anywhere coupe le mot s'il le faut. */
.liste-pub .pub .cat{min-width:0;overflow-wrap:anywhere}
.liste-pub .pub .p-txt{
  grid-column:2;font-size:.92rem;color:var(--encre-2);
  max-width:62ch;line-height:1.65;margin-top:.15rem;
}
.liste-pub .pub .meta{grid-column:2;margin-top:.35rem;font-size:.6rem;letter-spacing:.26em}
.pub mark{background:rgba(222,155,65,.32);color:inherit}
.vide{
  padding:2.4rem 0;color:var(--encre-3);
  font-family:'Bodoni Moda',Didot,serif;font-style:italic;font-size:1.2rem;
}

/* --- table des matieres des domaines --- */
.cartes{border-bottom:1px solid var(--filet)}
.carte{
  display:grid;grid-template-columns:1fr auto;gap:.35rem 2rem;
  padding:1.7rem 0 1.6rem;border-top:1px solid var(--filet);
  transition:padding-left .35s var(--e2);
}
.carte:hover{padding-left:.8rem}
.carte h2,.carte h3{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(1.5rem,2.3vw,1.95rem);line-height:1.12;
  transition:color .3s var(--e2);
}
.carte:hover h2,.carte:hover h3{color:var(--ambre-fonce)}
.carte p{grid-column:1;font-size:.95rem;color:var(--encre-2);max-width:52ch}
.carte .cta{grid-row:1;grid-column:2;align-self:center}

/* --- decisions --- */
.dec .verdict{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;letter-spacing:.01em;
  color:var(--encre);
}
.dec .titre{
  font-family:'Bodoni Moda',Didot,serif;font-weight:400;
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.44;
  margin-top:1rem;max-width:36ch;
}
.dec .meta{margin-top:1.2rem}
.dec + .dec{margin-top:3.4rem;padding-top:3.4rem;border-top:1px solid var(--filet)}
/* Cette regle d'interligne ne vaut QUE pour le registre des decisions :
   decisions.php pose .liste-dec sur son conteneur. Sans ce cantonnement,
   elle atteignait aussi l'<article class="dec"> de l'accueil, qui est de la
   maquette : .dec-meta y tombait de 1.5rem a 1rem et .dec q de 1.3rem a
   1rem, soit 13 px perdus sur la hauteur de la section « Decisions
   obtenues ». Une regle de la partie 4 n'a pas a modifier la partie 1. */
.liste-dec .dec p + p,.liste-dec .dec q + p,.liste-dec .dec p + q{margin-top:1rem}

/* --- filtres de rubrique --- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-bottom:2.4rem}
.filtre{
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--encre-3);font-weight:600;padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .25s var(--e2),border-color .25s var(--e2);
}
.filtre:hover{color:var(--ambre-fonce)}
.filtre[aria-current]{color:var(--encre);border-bottom-color:var(--ambre-fonce)}

/* --- pagination --- */
.pagination{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
}
.pagination a{color:var(--encre-2);transition:color .25s var(--e2)}
.pagination a:hover{color:var(--ambre-fonce)}
.pagination a[aria-current]{color:var(--encre);border-bottom:1px solid var(--ambre-fonce)}
.pagination .saut{color:rgba(23,22,22,.32)}

/* --- formulaires --- */
.form{max-width:44rem}
.form .label{margin-bottom:1.8rem}
.champ{display:block;margin-bottom:1.5rem}
.champ > span:first-child{
  display:block;margin-bottom:.5rem;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600;
}
.champ input,.champ select,.champ textarea,.recherche input{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);
  background:var(--blanc);border:1px solid var(--filet);border-radius:0;
  padding:.85rem 1rem;
  transition:border-color .3s var(--e2),background .3s var(--e2);
}
.champ textarea{resize:vertical;line-height:1.6}
.champ input:focus,.champ select:focus,.champ textarea:focus,.recherche input:focus{
  border-color:var(--ambre-fonce);background:var(--blanc-2);
}
.champ .aide{display:block;margin-top:.5rem;font-size:.82rem;color:var(--encre-2);line-height:1.6}   /* AA */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
.oblig{color:var(--ambre-fonce)}
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin-top:.6rem}
/* formulaire en deux temps, et le téléphone avant tout (12 septembre 2026) */
.groupe{border:0;padding:0;margin:0 0 2.2rem;min-width:0}
.groupe legend{padding:0;margin-bottom:1.2rem}
.form-urgence{margin:0 0 2rem;padding:1rem 1.2rem;border:1px solid var(--filet);border-left:3px solid var(--ambre-fonce);font-size:.95rem;line-height:1.6;color:var(--encre-2)}
.form-urgence b{color:var(--encre)}
.form-urgence .lk{color:var(--encre);font-weight:600;white-space:nowrap}
.form-note{margin-top:1.8rem;font-size:.85rem;color:var(--encre-2);line-height:1.7;max-width:60ch}   /* AA */
button.btn{border:0;cursor:pointer;font-family:inherit}
.recherche{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;margin-bottom:2rem;max-width:44rem}
.recherche input{flex:1 1 16rem;width:auto}
.recherche .btn{flex:none}
.resultat-nb{margin-bottom:1.8rem;color:var(--encre-2);font-size:.95rem}
/* bloc_messages() rend .notification (succes) et .erreur (echec) : ce sont
   les deux seules classes de message du site public. Le succes se marque a
   l'ambre foncee, l'echec au charbon plein : sur du papier, une bande sombre
   dit « arrete-toi » sans qu'il faille sortir du nuancier du cabinet. */
.notification,.erreur{
  margin-bottom:1.8rem;padding:1rem 1.2rem;
  border-left:2px solid var(--ambre-fonce);background:var(--blanc);
  font-size:.95rem;color:var(--encre-2);line-height:1.65;
}
.erreur{border-left-color:var(--charbon);color:var(--encre);font-weight:500}

/* --- signature d'article, contenus lies, mention de demonstration --- */
.auteur{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--filet);
  display:flex;gap:1.1rem;align-items:center;
}
.auteur .initiale{
  flex:none;width:2.7rem;height:2.7rem;
  display:grid;place-items:center;
  border:1px solid var(--ambre-fonce);color:var(--ambre-fonce);
  font-family:'Bodoni Moda',Didot,serif;font-size:1.25rem;
}
.auteur .nom{display:block;color:var(--encre);font-weight:500}
.auteur .qualite{display:block;font-size:.85rem;color:var(--encre-2);line-height:1.55}   /* AA */
.lies{margin-top:3.2rem}
.lies h2{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;margin-bottom:1.4rem;
  border-top:0;padding-top:0;
}
.contact-discret{
  margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:baseline;
}
.contact-discret p{color:var(--encre-2);max-width:52ch;font-size:.95rem;line-height:1.7}
.demo{
  margin:1.8rem 0;padding:1.1rem 1.3rem;
  border:1px solid var(--ambre-fonce);background:rgba(239,197,130,.16);
}
.demo-tete{
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ambre-fonce);font-weight:600;margin-bottom:.5rem;
}
.demo p{font-size:.9rem;color:var(--encre-2);line-height:1.65}
.demo-etiq{
  display:inline-block;margin-left:.7rem;vertical-align:middle;
  font-family:'Jost',system-ui,sans-serif;
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  color:var(--ambre-fonce);border:1px solid var(--ambre-fonce);padding:.18rem .5rem;
}

/* --- pages d'erreur --- */
.erreur-404 .code{
  font-family:'Bodoni Moda',Didot,serif;font-weight:500;
  font-size:clamp(4rem,12vw,8rem);line-height:.9;
  color:rgba(23,22,22,.14);margin-bottom:1.4rem;
}

/* --- pied de page : les intitules de colonne sont des h2 sur le site
       (un seul h1 par page, et une hierarchie qui ne saute pas) --- */
.foot h2{
  font-family:'Jost',system-ui,sans-serif;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--grege-cl);font-weight:500;margin-bottom:1.2rem;
}

/* --- responsive des pages interieures : les seuils de la maquette --- */
@media(max-width:1020px){
  .grille-8-4,.grille-7-5{grid-template-columns:minmax(0,1fr)}
  .aside-article{position:relative;top:0}
  .liste-pub .pub{grid-template-columns:9rem 1fr auto}
}
@media(max-width:720px){
  .hero-page{padding-top:6.6rem}
  .hero-page.hero-nu{padding-top:6.2rem}
  .hero-page h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .liste-pub .pub{grid-template-columns:1fr;gap:.4rem}
  .liste-pub .pub .p-txt,.liste-pub .pub .meta{grid-column:1}
  .duo{grid-template-columns:1fr}
  .carte{grid-template-columns:1fr}
  .carte .cta{grid-row:auto;grid-column:1;margin-top:.6rem}
  .sec-tete-ligne{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .bandeau-environnement{left:.5rem;bottom:.5rem;font-size:.52rem;padding:.4rem .6rem}
}

/* ---- partie 4, complement du 11/09/2026 : les photos passent en <picture> (variantes webp et largeurs) ;
   display:contents efface la boite de <picture>, les regles sur img s'appliquent comme avant. */
.hero-fig picture,.soir-fig picture,.urg-fig picture,.cadre .kb picture{display:contents}

/* ===== Manuels (12/09/2026) : l'encadre d'un chapitre, le sommaire, la liste ===== */
.boite-manuel{border:1px solid var(--filet);border-left:3px solid var(--encre);padding:1rem 1.25rem;margin:0 0 1.8rem;background:rgba(23,22,22,.03)}
.boite-manuel .bm-place{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin:0 0 .3rem}
.boite-manuel .bm-titre{margin:0}
.bm-pied{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2.4rem 0 0;padding:0;border:0;background:transparent}
.bm-pied .bm-lien{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:inherit;padding:.7rem .9rem;border:1px solid var(--filet);border-radius:4px;transition:border-color .2s}
.bm-pied .bm-lien:hover{border-color:var(--encre)}
.bm-pied .bm-sens{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.bm-pied .bm-nom{font-weight:500;line-height:1.35}
.bm-pied .bm-suivant{text-align:right}
.sommaire-manuel .chapitres{list-style:none;padding:0;margin:1rem 0 2rem;display:flex;flex-direction:column;gap:.6rem}
.sommaire-manuel .chapitres a{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;padding:.9rem 1rem;border:1px solid var(--filet);border-radius:4px;color:inherit;transition:border-color .2s}
.sommaire-manuel .chapitres a:hover{border-color:var(--encre)}
.sommaire-manuel .chapitres .numero{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.liste-manuels{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.manuel-carte{border:1px solid var(--filet);border-radius:6px;padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.manuel-carte .titre{font-size:1.25rem;margin:0;line-height:1.3}
.manuel-carte .sous-titre{color:var(--encre-2);margin:0}
.manuel-carte .resume{margin:0;font-size:.95rem}
@media (max-width:760px){.bm-pied{grid-template-columns:minmax(0,1fr)}.bm-pied .bm-suivant{text-align:left}}

/* ================================================================
   TELEPHONE : autocritique du 17 septembre 2026 (retour de Wahid :
   « on peut glisser a droite et a gauche, ca casse la page »)
   ================================================================ */

/* 1. La page ne glisse plus de cote. La nappe de lumiere des sections (.lum::before) pivote et
      grossit en continu (rotate 1,1 deg, scale 1,06) : sa boite depassait le bord droit d'une
      trentaine de pixels des que la section etait revelee. Sur ordinateur, body{overflow-x:hidden}
      le cachait. Sur telephone, le navigateur elargissait la page entiere (423 px pour un ecran de
      390) : elle glissait de cote, l'en-tete fixe prenait la largeur elargie et le bouton du menu
      sortait de l'ecran. La nappe est coupee au bord de sa section ; la ou « clip » n'existe pas,
      elle ne bouge plus. clip ne cree pas de zone de defilement : les chevauchements verticaux
      entre sections restent permis. */
.lum{overflow-x:clip}
@supports not (overflow-x:clip){
  html.js .lum.in::before{animation:none;transform:none}
}
/* Ceinture et bretelles : quoi qu'un contenu repris apporte, rien n'elargit la page. */
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}
/* La grille des manuels imposait 300 px de colonne : plus que la largeur utile d'un ecran de 320. */
.liste-manuels{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

/* 2. Les filets des etiquettes. Un filet ne se trace qu'a la revelation de son bloc ; dans une carte
      de manuel ou une legende de formulaire, rien ne le revele jamais : l'etiquette restait decalee
      de 3,6 rem, sans filet, comme une erreur d'alignement. Il est trace d'emblee. */
html.js .manuel-carte .label::before,html.js .manuel-carte .label::after,
html.js legend.label::before,html.js legend.label::after,
html.js .form .label::before,html.js .form .label::after{transform:scaleX(1);transition:none}

@media(max-width:720px){
  /* 3. Le premier ecran de l'accueil : l'italique ambre (3,8:1 sur le papier) se perdait sur la
        pierre eclairee, et l'adresse, en gris clair et interdite de retour a la ligne, debordait
        a 320 px. */
  .hero h1 em{color:#7A4E08}
  .hero-urgence .hu-mot{color:#7A4E08}
  .hero-base{color:var(--encre)}
  .hero-adr{white-space:normal;letter-spacing:.22em;color:var(--encre)}

  /* 4. Les pages interieures : le decalage du titre (le filet vertical de la maquette) mangeait
        25 px sur 354, et le vide entre le titre et le contenu depassait 110 px. */
  .hero-nu .hero-inner{padding-left:1.1rem}
  .hero-page .hero-inner{padding-bottom:1.9rem}
  .hero-page + .section{padding-top:2.2rem}
  .hero-chapo{font-size:1rem}

  /* 5. Le fil d'Ariane : sur un article il reprenait le titre entier, deja ecrit juste dessous,
        sur quatre lignes de capitales. Le dernier maillon n'est plus montre a partir du troisieme. */
  .fil{margin-bottom:1.1rem}
  .fil li{letter-spacing:.2em}
  .fil li:nth-child(n+3):last-child{display:none}

  /* 6. Les etiquettes : filet plus court, pour rendre sa largeur au texte. */
  .label{gap:.7rem;letter-spacing:.3em}
  .label::before{width:1.5rem}

  /* 7. La pagination : des cibles de 18 px de haut pour un doigt. Les numeros sur une ligne,
        « precedente » et « suivante » dessous, chacune sur sa moitie ; 44 px partout. */
  .pagination{gap:.1rem .2rem;align-items:center}
  .pagination a,.pagination .saut{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.75rem;min-height:2.75rem;padding:0 .4rem;
  }
  .pagination a[aria-current]{border-bottom:0;box-shadow:inset 0 -2px 0 var(--ambre-fonce)}
  .pagination > :first-child{order:2;flex:1 1 40%;justify-content:flex-start;padding-left:0}
  .pagination > :last-child{order:3;flex:1 1 40%;justify-content:flex-end;padding-right:0}
  .pagination + .label-nu{margin-top:1.6rem}
  .label-nu .lk{display:inline-block;padding:.6rem 0}

  /* 7 bis. « Fermer » le menu : 18 px de haut pour le bouton le plus important du panneau. Sa zone de
        toucher passe a 44 px sans deplacer le mot (marges negatives de la meme valeur). */
  .menu .close{padding:.85rem .9rem;margin:-.85rem -.9rem}
  /* 8. Le pied de page : des liens de 18 a 26 px de haut, serres. Un doigt en attrapait deux. */
  .foot a{display:inline-block;padding:.42rem 0}
  .foot-grid{gap:1.6rem 1.4rem}
}
/* 9. La barre haute. Elle flotte sur la page avec un simple voile degrade : tant qu'on est en haut,
      c'est la maquette. Mais des qu'on descend dans un article, le texte passait sous « CABINET ACI »
      et sous le bouton du menu, et s'y melait. Sous 1100 px (la ou la barre ne porte que le nom et le
      menu), elle recoit un vrai fond des que la page a bouge (classe posee par m5.js). */
@media(max-width:1100px){
  html.defile .top::before{background:linear-gradient(to bottom,rgba(23,22,22,.97) 0,rgba(23,22,22,.97) 74%,rgba(23,22,22,0) 100%)}
  html.defile .top::after{background:linear-gradient(to bottom,rgba(241,237,228,.98) 0,rgba(241,237,228,.98) 74%,rgba(241,237,228,0) 100%)}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(2.05rem,10.4vw,2.6rem)}
  .top{padding:1.05rem 1.1rem}
  .foot-grid{grid-template-columns:1fr}
}

/* ================= « ÊTRE RAPPELÉ » : 21 septembre 2026 ==================
   Demande écrite de Maître Aci : un bouton clairement visible, un formulaire
   très court, un accusé d'envoi immédiat, utilisables sur ordinateur comme
   sur téléphone.
   1. Sur ordinateur, le bouton est dans la barre haute de toutes les pages.
   2. Sur téléphone, la barre haute n'a pas la place : une barre fixe en bas
      porte « Être rappelé » et « Appeler ». Elle n'existe pas sur la page du
      formulaire (elle y couvrirait le bouton d'envoi) et passe sous le menu.
   3. L'accusé d'envoi remplace le formulaire et prend le focus.
   ======================================================================== */
.top-cta{
  display:inline-block;white-space:nowrap;
  border:1px solid currentColor;
  padding:.62rem 1.15rem .55rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  transition:background-color .3s var(--e2),color .3s var(--e2),border-color .3s var(--e2);
}
.top-cta:hover,.top-cta:focus-visible{background:var(--ambre);border-color:var(--ambre);color:var(--charbon)}
.barre-rappel{display:none}
@media(max-width:720px){
  .top-cta{display:none}
  .barre-rappel{
    position:fixed;left:0;right:0;bottom:0;z-index:58;
    display:grid;grid-template-columns:1fr auto;
    background:var(--charbon);color:var(--blanc-2);
    border-top:1px solid rgba(222,155,65,.55);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .barre-rappel a{
    display:flex;align-items:center;justify-content:center;
    min-height:3.4rem;padding:0 1.2rem;
    font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  }
  .barre-rappel-demande{background:var(--ambre);color:var(--charbon)}
  .barre-rappel-appel{border-left:1px solid rgba(237,234,227,.18)}
  /* la barre ne doit rien cacher : le pied de page lui laisse sa hauteur, et le repère de recette remonte */
  .footer{padding-bottom:calc(2.2rem + 3.4rem + env(safe-area-inset-bottom,0px))}
  .bandeau-environnement{bottom:calc(3.4rem + .7rem + env(safe-area-inset-bottom,0px))}
}
@media print{.barre-rappel,.top-cta{display:none}}

/* le formulaire court : des champs larges, un seul bouton, pleine largeur sur téléphone */
.form-rappel .champ input,.form-rappel .champ select{font-size:1rem}
@media(max-width:720px){
  .form-rappel .form-actions .btn{width:100%;text-align:center;padding:1.25rem 1rem 1.15rem}
}

/* l'accusé d'envoi */
.accuse{
  margin:0 0 2.4rem;padding:1.6rem 1.6rem 1.5rem;
  background:var(--blanc);border:1px solid var(--filet);border-left:3px solid var(--ambre-fonce);
  color:var(--encre-2);line-height:1.7;scroll-margin-top:7rem;
}
.accuse:focus{outline:none}
.accuse:focus-visible{outline:2px solid var(--ambre-fonce);outline-offset:4px}
.accuse p + p{margin-top:.9rem}
.accuse-titre{font-family:'Bodoni Moda',Didot,serif;font-size:clamp(1.5rem,3.4vw,1.95rem);line-height:1.2;color:var(--encre)}
.accuse b{color:var(--encre)}
.accuse .lk{color:var(--encre);font-weight:600;white-space:nowrap}
.accuse-suite{margin-top:1.4rem}