@charset "utf-8";
/* ==========================================================================
   Place Maker, feuille de style unique.
   Direction "papier d'ingenierie" : fond papier quadrille, filets, cartouche
   de plan, sections numerotees, un seul accent vert. Le meme registre que la
   fiche AMO et la plateforme du cabinet, pour qu'un lecteur qui passe du PDF
   au site reconnaisse la meme maison.
   ========================================================================== */

:root{
  color-scheme: light;

  /* surfaces */
  --papier:#FAF8F3;
  --quadrille:#F1EEE5;
  --trame-fine:#F4F1E8;
  --trame-forte:#EBE6D9;
  --carte:#FFFDF9;
  --carte-2:#F6F3EB;

  /* encres */
  --encre:#1F2937;
  --encre-2:#55606E;
  --encre-3:#7D858F;

  /* filets */
  --filet:#DCD7CA;
  --filet-fort:#BDB6A5;

  /* accents, un seul porte l'action */
  --vert:#2E7D22;
  --vert-fonce:#245F1A;
  --vert-pale:#EDF3EA;
  --bleu:#2C5F8F;

  /* familles */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* rythme */
  --gouttiere:32px;
  --large:1180px;
  --pas:8px;

  /* mouvement */
  --duree:.28s;
  --courbe:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4,.chiffre b,.code-gros,.faq summary,.glossaire dt,.fait b,.pied-raison{
  font-optical-sizing:auto;
}

/* Le fond etait un quadrillage unique de 44 px, plat et regulier comme une
   grille de gabarit. Un vrai papier d'ingenieur a DEUX trames, une fine et une
   accentuee tous les cinq carreaux, un grain, et une lumiere qui n'est pas
   uniforme. Les trois couches se superposent ici, toutes tres pales : elles se
   sentent plus qu'elles ne se voient. */
body{
  background-color:var(--papier);
  background-image:
    /* lumiere chaude, haut de page */
    radial-gradient(120% 70% at 50% -12%, rgba(255,253,247,.9) 0%,
                    rgba(250,248,243,0) 62%),
    /* trame accentuee, un carreau sur cinq */
    linear-gradient(var(--trame-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame-forte) 1px, transparent 1px),
    /* trame fine */
    linear-gradient(var(--trame-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame-fine) 1px, transparent 1px);
  background-size:
    100% 100%,
    55px 55px, 55px 55px,
    11px 11px, 11px 11px;
  background-position:0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-attachment:scroll;
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}

a{color:inherit}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:1px}

.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--papier);
  padding:10px 18px;z-index:100;font-size:14px}
.saut:focus{left:12px;top:12px}

/* ------------------------------------------------------------- bandeau -- */

header{
  position:sticky;top:0;z-index:40;
  background:rgba(250,248,243,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--filet-fort);
}
.bar{display:flex;align-items:center;gap:26px;padding-block:13px}
.mark{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.mark img{height:38px;width:auto}
.mark .txt{font-family:var(--serif);font-size:15px;line-height:1.2;letter-spacing:.005em}
.mark .txt small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);margin-top:2px}

header nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px}
header nav a{color:var(--encre-2);text-decoration:none;padding-block:3px;
  border-bottom:1px solid transparent;transition:color var(--duree),border-color var(--duree)}
header nav a:hover{color:var(--encre);border-bottom-color:var(--vert)}
header nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--vert)}

.lang{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--encre-3);flex:0 0 auto}
.lang b{color:var(--encre);font-weight:500}
.lang a{text-decoration:none;color:var(--encre-3)}
.lang a:hover{color:var(--vert)}
.lang .sep{width:1px;height:12px;background:var(--filet-fort)}

.menu{display:none;margin-left:auto;background:none;border:1px solid var(--filet-fort);
  width:40px;height:36px;padding:0;cursor:pointer;position:relative}
.menu span{display:block;height:1px;background:var(--encre);width:18px;margin:4px auto;
  transition:transform var(--duree),opacity var(--duree)}
.menu[aria-expanded="true"] span:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* --------------------------------------------------------------- heros -- */

.hero{padding-top:clamp(46px,7vw,78px)}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vert);margin-bottom:26px}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--filet)}

h1{font-family:var(--serif);font-weight:300;letter-spacing:-.021em;line-height:1.05;
  font-size:clamp(37px,5.9vw,70px);max-width:17ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--vert);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:.02em;right:.02em;bottom:.02em;height:.055em;
  background:var(--vert);opacity:.55;
  clip-path:polygon(0 40%,8% 0,22% 55%,38% 10%,55% 62%,72% 12%,88% 58%,100% 22%,
    100% 100%,0 100%)}

.lede{margin-top:26px;max-width:58ch;font-size:clamp(17.5px,1.5vw,19.5px);line-height:1.62;
  color:var(--encre-2);text-wrap:pretty}

/* --------------------------------------------------------------- voies -- */

.voies{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.voie{display:block;padding:30px 30px 26px;text-decoration:none;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort);
  position:relative;transition:background var(--duree)}
.voie::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vert);
  transform:scaleY(0);transform-origin:top;transition:transform .32s var(--courbe)}
.voie:hover,.voie:focus-visible{background:#fff}
.voie:hover::before,.voie:focus-visible::before{transform:scaleY(1)}
.voie .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-3)}
.voie h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,27px);
  line-height:1.18;letter-spacing:-.012em;margin:12px 0 10px}
.voie .txt{font-size:15.5px;line-height:1.58;color:var(--encre-2);max-width:42ch}
.voie .go{margin-top:20px;font-size:14px;font-weight:500;color:var(--vert);
  display:inline-flex;align-items:center;gap:9px}
.fl{transition:transform var(--duree)}
.voie:hover .fl,.voie:focus-visible .fl{transform:translateX(5px)}

/* ------------------------------------------------------------ chiffres -- */

.chiffres{display:grid;grid-template-columns:repeat(4,1fr);
  border-left:1px solid var(--filet-fort);border-top:1px solid var(--filet-fort)}
.hero + .wrap .chiffres,.voies + .wrap .chiffres{border-top:0}
.chiffre{padding:24px 26px 22px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.chiffre b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(31px,3.4vw,39px);
  line-height:1;letter-spacing:-.022em}
.chiffre span{display:block;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--encre-2)}

/* --------------------------------------------- profil en long, signature */

.plan{margin-top:62px;border-top:1px solid var(--filet-fort);
  border-bottom:1px solid var(--filet-fort);background:var(--carte);position:relative}
.plan figcaption{position:absolute;top:9px;left:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}
.plan svg{width:100%;height:clamp(140px,17vw,200px)}
.plan .tick{stroke:var(--filet);stroke-width:1;vector-effect:non-scaling-stroke}
.plan text{font-family:var(--mono);font-size:8px;letter-spacing:.12em;fill:var(--encre-3);
  text-transform:uppercase}
.plan .ln{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:-1;
  transition:stroke-dashoffset 2.2s var(--courbe)}
.plan .ln1{stroke:var(--encre);stroke-width:1.4}
.plan .ln2{stroke:var(--encre-3);stroke-width:1;transition-delay:.18s}
.plan .ln3{stroke:var(--vert);stroke-width:2;transition-delay:.34s}
.plan.vu .ln{stroke-dashoffset:0}

/* ------------------------------------------------------------ sections -- */

section{padding-block:clamp(54px,6.5vw,84px)}
.shead{display:flex;align-items:flex-start;gap:18px;margin-bottom:36px}
.shead .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--vert);
  flex:0 0 auto}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,33px);
  letter-spacing:-.017em;line-height:1.2;max-width:24ch;text-wrap:balance}
/* le filet accompagne la PREMIERE ligne du titre : centre, il barrait les
   titres de trois lignes et se lisait comme une rature */
.shead .l{flex:1;height:1px;background:var(--filet);min-width:24px;
  margin-top:.72em;align-self:flex-start}

.chapo{max-width:72ch;font-size:17.5px;line-height:1.68;color:var(--encre-2);
  margin-bottom:38px;text-wrap:pretty}
.chapo.large{font-size:18px;margin-bottom:0}
.chapo.regle{color:var(--encre)}
.note{margin-top:24px;font-family:var(--serif);font-size:14.5px;
  color:var(--encre-3);max-width:70ch;padding-left:20px;
  border-left:1px solid var(--filet)}

/* grille de points */
.pts{display:grid;border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.pts.c3{grid-template-columns:repeat(3,1fr)}
.pts.c2{grid-template-columns:repeat(2,1fr)}
.pt{padding:26px 28px 24px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.pt h3{font-family:var(--serif);font-weight:400;font-size:19.5px;line-height:1.3;
  letter-spacing:-.008em;margin-bottom:11px}
.pt p{font-size:15px;line-height:1.6;color:var(--encre-2)}

/* etapes numerotees */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.etape{padding:24px 26px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.etape .rang{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--vert);margin-bottom:14px}
.etape h3{font-family:var(--serif);font-weight:400;font-size:18.5px;line-height:1.28;
  margin-bottom:9px}
.etape p{font-size:14.5px;line-height:1.58;color:var(--encre-2)}

/* references */
.refs{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.ref{padding:28px 30px 30px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.ref .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bleu)}
.ref h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.28;
  margin:11px 0 15px;letter-spacing:-.008em}
.ref dl{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin-bottom:17px;
  padding-bottom:16px;border-bottom:1px solid var(--filet);font-size:13.5px}
.ref dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-3);padding-top:3px}
.ref dd{margin:0}
.ref p{font-size:14.5px;line-height:1.6;color:var(--encre-2);margin-bottom:11px}
.ref p:last-child{margin-bottom:0}
.ref p b{color:var(--encre);font-weight:500}

/* trois niveaux AMO */
.niveaux{border-top:1px solid var(--filet-fort)}
.niveau{border-bottom:1px solid var(--filet-fort);background:var(--carte)}
.niveau-tete{display:grid;grid-template-columns:96px 1fr 300px;gap:30px;padding:30px;
  align-items:start}
.code-gros{font-family:var(--serif);font-weight:300;font-size:64px;line-height:.86;
  color:var(--vert);letter-spacing:-.03em}
.niveau h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.5vw,28px);
  line-height:1.16;letter-spacing:-.014em}
.niveau h3 small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3);margin-top:8px}
.niveau .objet{margin-top:14px;font-size:16px;line-height:1.6;color:var(--encre-2);max-width:46ch}
.niveau-faits{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px;
  border-left:1px solid var(--filet);padding-left:22px}
.niveau-faits dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-3);padding-top:4px}
.niveau-faits dd{margin:0;color:var(--encre-2);line-height:1.45}
.niveau-faits .taux{color:var(--encre);font-weight:500}

.phases{border-top:1px solid var(--filet);background:var(--carte-2)}
.phase{display:grid;grid-template-columns:96px 1fr;gap:30px;padding:22px 30px;
  border-bottom:1px solid var(--filet)}
.phase:last-child{border-bottom:0}
.phase .code{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--vert);
  padding-top:4px}
.phase h4{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.3;
  margin-bottom:8px}
.phase p{font-size:14.5px;line-height:1.58;color:var(--encre-2);max-width:78ch}
.phase .livr{margin-top:10px;font-size:13.5px;color:var(--encre-3)}
.phase .livr b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-3);margin-right:6px}

/* comparaison */
.comps{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.comp{padding:26px 28px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.comp:last-child{background:var(--vert-pale)}
.comp h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-3);margin-bottom:16px}
.comp:last-child h3{color:var(--vert-fonce)}
.comp li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;
  color:var(--encre-2);margin-bottom:11px}
.comp li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:1px;
  background:var(--filet-fort)}
.comp:last-child li::before{background:var(--vert)}

/* glossaire */
.glossaire{display:grid;grid-template-columns:auto 1fr;gap:0;
  border-top:1px solid var(--filet-fort)}
.glossaire dt{font-family:var(--serif);font-size:17px;padding:16px 26px 16px 0;
  border-bottom:1px solid var(--filet);white-space:nowrap}
.glossaire dd{margin:0;font-size:15px;line-height:1.58;color:var(--encre-2);padding:16px 0;
  border-bottom:1px solid var(--filet)}

/* questions frequentes */
.faq{border-top:1px solid var(--filet-fort)}
.faq details{border-bottom:1px solid var(--filet-fort);background:var(--carte)}
.faq summary{display:flex;align-items:center;gap:16px;padding:20px 26px;cursor:pointer;
  font-family:var(--serif);font-size:19px;line-height:1.35;list-style:none;
  transition:background var(--duree)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:1px solid var(--encre-2);border-bottom:1px solid var(--encre-2);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--duree)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq summary:hover{background:#fff}
.faq .rep{padding:0 26px 22px 26px}
.faq .rep p{font-size:15.5px;line-height:1.65;color:var(--encre-2);max-width:78ch}

/* repères chiffrés a propos */
.faits{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.fait{padding:22px 24px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.fait span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--encre-3);margin-bottom:9px}
.fait b{font-family:var(--serif);font-weight:400;font-size:16.5px;line-height:1.3}

/* ------------------------------------------------------- appel a agir -- */

.cta{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  border:1px solid var(--filet-fort);background:var(--carte);padding:34px 34px;
  margin-bottom:clamp(54px,6.5vw,84px)}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,28px);
  letter-spacing:-.015em;line-height:1.2;margin-bottom:11px}
.cta p{font-size:16px;line-height:1.6;color:var(--encre-2);max-width:60ch}
.bouton{display:inline-flex;align-items:center;gap:11px;background:var(--vert);color:#fff;
  text-decoration:none;padding:15px 26px;font-size:15px;font-weight:500;border:0;
  cursor:pointer;transition:background var(--duree);white-space:nowrap}
.bouton:hover{background:var(--vert-fonce)}
.bouton:hover .fl{transform:translateX(5px)}

.go-lien{margin-top:30px}
.go-lien a{color:var(--vert);font-weight:500}

/* ------------------------------------------------------------ contact -- */

.contact-grille{display:grid;grid-template-columns:1.35fr 1fr;gap:0;
  border-top:1px solid var(--filet-fort);border-left:1px solid var(--filet-fort)}
.form{padding:30px 32px 32px;background:var(--carte);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ-large{grid-column:1 / -1}
.champ label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-3)}
.champ .aide{font-size:13px;color:var(--encre-3);margin-top:-3px}
.champ input,.champ select,.champ textarea{
  background:var(--papier);border:1px solid var(--filet-fort);padding:11px 13px;
  font-size:15.5px;font-family:var(--sans);width:100%;
  transition:border-color var(--duree),background var(--duree)}
.champ textarea{resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--vert);background:#fff;outline:none}
.miel{position:absolute;left:-9999px}
.form-bas{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--filet)}
.rgpd{font-size:12.5px;line-height:1.5;color:var(--encre-3);max-width:44ch}

.aside{padding:30px 32px 32px;background:var(--carte-2);
  border-right:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.aside h2{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:-.01em;
  margin-bottom:20px}
.aside .h2-coord{margin-top:38px}
.aside .etapes{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--filet)}
.aside .etape{padding:16px 0;background:none;border-right:0;border-bottom:1px solid var(--filet)}
.aside .etape .rang{margin-bottom:8px}
.coord p{display:flex;gap:14px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--filet);font-size:15px}
.coord p:last-child{border-bottom:0}
.coord span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-3);flex:0 0 104px}
.coord a{color:var(--vert);text-decoration:none;word-break:break-word}
.coord a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- pied -- */

footer{border-top:1px solid var(--filet-fort);background:var(--carte);
  padding-top:0;padding-bottom:46px}
.cartouche{display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--filet-fort);
  margin-inline:calc(var(--gouttiere) * -1)}
.cartouche div{padding:10px 16px;border-right:1px solid var(--filet);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em}
.cartouche div:last-child{border-right:0}
.cartouche span{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--encre-3);margin-bottom:3px}

.pied-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;padding-block:36px 28px}
.pied-raison{font-family:var(--serif);font-size:17px;margin-bottom:10px}
.pied-territoire{font-size:14px;line-height:1.55;color:var(--encre-2);max-width:44ch}
.pied-nav{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.pied-nav a{color:var(--encre-2);text-decoration:none}
.pied-nav a:hover{color:var(--vert)}
.pied-coord{display:flex;flex-direction:column;gap:9px;font-style:normal;font-size:14.5px}
.pied-coord a{color:var(--encre-2);text-decoration:none;word-break:break-word}
.pied-coord a:hover{color:var(--vert)}
.pied-bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--filet);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--encre-3)}

/* ---------------------------------------------------------- apparition -- */

.apparait{opacity:0;transform:translateY(14px);
  transition:opacity .42s var(--courbe),transform .42s var(--courbe)}
.apparait.vu{opacity:1;transform:none}

/* -------------------------------------------------------------- ecrans -- */

@media (max-width:1020px){
  .niveau-tete{grid-template-columns:76px 1fr;gap:22px}
  .niveau-faits{grid-column:1 / -1;border-left:0;padding-left:0;padding-top:18px;
    border-top:1px solid var(--filet)}
  .code-gros{font-size:52px}
  .faits{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .pied-grille{grid-template-columns:1fr 1fr;gap:28px}
}

@media (max-width:860px){
  :root{--gouttiere:20px}
  /* La signature du bandeau ne se laissait pas reduire : sur un telephone elle
     poussait la page a 598 px de large pour 390 px d'ecran, et tout le site
     glissait lateralement. Mesure a la reprise : 598/390. */
  .bar{gap:14px}
  .mark{flex:1 1 auto;min-width:0}
  .mark img{height:34px;flex:0 0 auto}
  .mark .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mark .txt small{display:none}
  .menu{flex:0 0 auto;margin-left:0}
  .lang{flex:0 0 auto}
  header nav{position:fixed;inset:57px 0 auto 0;flex-direction:column;gap:0;
    background:var(--papier);border-bottom:1px solid var(--filet-fort);
    padding:6px 20px 18px;display:none}
  header nav.ouvert{display:flex}
  header nav a{padding-block:13px;border-bottom:1px solid var(--filet);font-size:16px}
  header nav a:hover,header nav a[aria-current="page"]{border-bottom-color:var(--filet)}
  .menu{display:block}
  .lang{margin-left:14px}
  .voies,.refs,.pts.c3,.pts.c2,.comps,.contact-grille{grid-template-columns:1fr}
  .chiffres,.cartouche{grid-template-columns:1fr 1fr}
  .champs{grid-template-columns:1fr}
  .glossaire{grid-template-columns:1fr}
  .glossaire dt{padding-bottom:4px;border-bottom:0;white-space:normal}
  .glossaire dd{padding-top:0}
  .phase{grid-template-columns:1fr;gap:8px}
  .cta{padding:26px 24px}
  .pied-grille{grid-template-columns:1fr}
  .plan{margin-top:44px}
}

@media (max-width:540px){
  .etapes,.faits{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr}
  .shead{flex-wrap:wrap;gap:10px}
  .shead .l{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .apparait{opacity:1;transform:none}
  .plan .ln{stroke-dashoffset:0}
}

@media print{
  body{background:#fff}
  header,footer,.cta,.saut,.menu{display:none}
  section{padding-block:18px;break-inside:avoid}
}

/* ==========================================================================
   PLANCHES TECHNIQUES
   Des dessins au trait, pas des illustrations. Ils traversent la page de bord
   a bord pour casser la succession de cartes rectangulaires, et ils portent
   leur cartouche comme une vraie feuille de plan.
   ========================================================================== */

.bande{background:var(--carte);border-top:1px solid var(--filet-fort);
  border-bottom:1px solid var(--filet-fort);overflow:hidden;position:relative}
.bande + .bande{border-top:0}
.bande-tete{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:16px 0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--encre-3)}
.bande-tete b{color:var(--vert);font-weight:500}
.bande-tete .l{flex:1;height:1px;background:var(--filet);min-width:20px;align-self:center}
.bande-legende{padding:6px 0 20px;font-size:14px;line-height:1.55;color:var(--encre-2);
  max-width:74ch}

.bande-dessin{width:100%;overflow:hidden}
.planche{display:block;width:100%;height:auto;background:transparent}
.planche.large{min-height:200px}
.bande-dessin .planche:not(.large){max-width:1040px;margin-inline:auto;
  padding-inline:var(--gouttiere)}

/* traits */
.planche .fil{fill:none;stroke:var(--encre);stroke-width:1.5;vector-effect:non-scaling-stroke}
.planche .base{stroke:var(--encre);stroke-width:1.2;vector-effect:non-scaling-stroke}
.planche .grad{stroke:var(--filet);stroke-width:1;vector-effect:non-scaling-stroke}
.planche .axe{stroke:var(--vert);stroke-width:1;stroke-dasharray:14 4 3 4;
  vector-effect:non-scaling-stroke}
.planche .couche{stroke:var(--filet-fort);stroke-width:.8;vector-effect:non-scaling-stroke}

/* matieres */
.planche .hachure{stroke:#B4AC98;stroke-width:.9}
.planche .hachure-fine{stroke:#CFC8B6;stroke-width:.7}
.planche .grain{fill:#B0A791}
.planche .sol{fill:url(#h-sol);stroke:var(--filet-fort);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-roul{fill:#3B4350;stroke:var(--encre);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-base{fill:#6E7684;stroke:var(--encre);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-fond{fill:url(#h-grave);stroke:var(--encre);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-forme{fill:url(#h-forme);stroke:var(--encre);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-remblai{fill:url(#h-remblai);stroke:var(--filet-fort);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-beton{fill:url(#h-beton);stroke:var(--encre);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.planche .c-prop{fill:#D8D2C2;stroke:var(--encre-3);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-sable{fill:#EDE6D4;stroke:var(--filet-fort);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .c-lit{fill:#E2DAC6;stroke:var(--filet-fort);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .vide{fill:var(--carte);stroke:var(--encre);stroke-width:1.2;
  vector-effect:non-scaling-stroke}
.planche .eau{fill:#CFE0EC;stroke:none}
.planche .eau-t{stroke:var(--bleu);stroke-width:1.2;vector-effect:non-scaling-stroke}
.planche .enro{fill:#C9C1AE;stroke:var(--encre-2);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .tuyau{fill:#EFEADC;stroke:var(--encre);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.planche .tuyau-i{fill:var(--carte);stroke:var(--encre-3);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .grillage{stroke:var(--laterite,#C4622D);stroke-width:1.6;fill:none;
  vector-effect:non-scaling-stroke}
.planche .grillage-t{stroke:#C4622D;stroke-width:.9;vector-effect:non-scaling-stroke}
.planche .tn-fond{fill:url(#h-sol);stroke:none;opacity:.7}

/* cotation */
.planche .cote line{stroke:var(--vert);stroke-width:.9;vector-effect:non-scaling-stroke}
.planche .cote .attache{stroke:var(--vert);stroke-width:.7}
.planche .pointe{fill:var(--vert)}
.planche .cote text{font-family:var(--mono);font-size:11px;fill:var(--vert-fonce);
  letter-spacing:.04em}
.planche .repere path{fill:none;stroke:var(--encre-3);stroke-width:.8;
  vector-effect:non-scaling-stroke}
.planche .repere circle{fill:var(--encre-2)}
.planche .repere text{font-family:var(--mono);font-size:11px;fill:var(--encre-2);
  letter-spacing:.03em}
.planche .pente path{fill:none;stroke:var(--encre-2);stroke-width:.9}
.planche .pente text{font-family:var(--mono);font-size:10.5px;fill:var(--encre-2)}
.planche .axe-t{font-family:var(--mono);font-size:10.5px;fill:var(--vert);
  letter-spacing:.12em;text-transform:uppercase}

/* trace en plan */
.planche .niv{fill:none;stroke:#B3AB95;stroke-width:1.2;
  vector-effect:non-scaling-stroke}
.planche .niv.c1{stroke:#8E856E;stroke-width:1.8}
.planche .niv.c2{stroke:#ADA48C;stroke-width:1.2}
.planche .niv.c3{stroke:#C4BCA6;stroke-width:1}
.planche .alt{font-family:var(--mono);font-size:11px;fill:var(--encre-3);
  letter-spacing:.08em}
.planche .axe-plan{fill:none;stroke:var(--carte);stroke-width:9;
  vector-effect:non-scaling-stroke}
.planche .axe-plan-c{fill:none;stroke:var(--vert);stroke-width:2.6;
  stroke-dasharray:18 5 4 5;vector-effect:non-scaling-stroke}
.planche .pk line{stroke:var(--encre-2);stroke-width:1;vector-effect:non-scaling-stroke}
.planche .pk circle{fill:var(--carte);stroke:var(--encre);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.planche .pk text{font-family:var(--mono);font-size:11px;fill:var(--encre-2);
  letter-spacing:.06em}
.planche .nord path{fill:var(--encre);stroke:none}
.planche .nord text{font-family:var(--mono);font-size:12px;fill:var(--encre);
  letter-spacing:.1em}
.planche .echelle line{stroke:var(--encre-2);stroke-width:1;
  vector-effect:non-scaling-stroke}
.planche .echelle text{font-family:var(--mono);font-size:10px;fill:var(--encre-3)}
.planche .pk-t{font-family:var(--mono);font-size:10.5px;fill:var(--encre-3);
  letter-spacing:.08em}

/* le trace des lignes se joue au defilement, comme le profil */
.planche .ln{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:-1;
  transition:stroke-dashoffset 2s var(--courbe)}
.planche .tn{stroke:var(--encre);stroke-width:1.5}
.planche .tn2{stroke:var(--encre-3);stroke-width:1;transition-delay:.16s}
.planche .proj{stroke:var(--vert);stroke-width:2.2;transition-delay:.3s}
.bande.vu .planche .ln{stroke-dashoffset:0}

/* cartouche de la feuille */
.planche .cartouche-svg .ct{font-family:var(--mono);font-size:11px;fill:var(--encre);
  letter-spacing:.16em}
.planche .cartouche-svg .cr{font-family:var(--mono);font-size:10px;fill:var(--encre-3);
  letter-spacing:.06em}

/* ==========================================================================
   MOINS DE RECTANGLES
   Les cartes ferment chaque contenu dans sa boite. On les ouvre : filets de
   separation seulement, chiffres poses sur une ligne, voies separees par un
   seul trait vertical.
   ========================================================================== */

.voies{grid-template-columns:1.08fr .92fr;border:0;border-top:1px solid var(--encre);
  margin-top:48px}
.voie{background:none;border:0;border-left:1px solid var(--filet-fort);
  padding:34px 42px 30px}
.voie:first-child{border-left:0;padding-left:0}
.voie:hover,.voie:focus-visible{background:none}
.voie::before{left:0;right:auto;top:0;bottom:auto;width:100%;height:2px;
  transform:scaleX(0);transform-origin:left}
.voie:first-child::before{width:calc(100% - 42px)}
.voie:hover::before,.voie:focus-visible::before{transform:scaleX(1)}
.voie h2{font-size:clamp(25px,2.9vw,33px);margin:14px 0 12px}

.chiffres{border:0;border-top:1px solid var(--filet-fort);
  border-bottom:1px solid var(--filet-fort);margin-top:0}
.chiffre{background:none;border:0;padding:26px 30px 24px 0;position:relative}
.chiffre::before{content:"";position:absolute;left:-1px;top:26px;bottom:26px;width:1px;
  background:var(--filet)}
.chiffre:first-child::before{display:none}
.chiffre:not(:first-child){padding-left:30px}
.chiffre b{font-size:clamp(33px,3.7vw,44px)}

.pts{border:0;border-top:1px solid var(--encre);gap:0}
.pt{background:none;border:0;border-left:1px solid var(--filet);padding:24px 34px 22px}
/* le filet vertical ouvre une colonne, jamais une rangee : le premier de chaque
   rangee ne le porte pas, et les rangees suivantes prennent un filet horizontal */
.pts.c2 .pt:nth-child(2n+1),.pts.c3 .pt:nth-child(3n+1){border-left:0;padding-left:0}
.pts.c2 .pt:nth-child(n+3),.pts.c3 .pt:nth-child(n+4){border-top:1px solid var(--filet);
  padding-top:26px}
.pt h3{font-size:20px}

.etapes{border:0;border-top:1px solid var(--encre)}
.etape{background:none;border:0;border-left:1px solid var(--filet);padding:22px 28px 20px}
.etape:first-child{border-left:0;padding-left:0}

.refs{border:0;border-top:1px solid var(--encre)}
.ref{background:none;border:0;border-left:1px solid var(--filet-fort);
  padding:28px 36px 30px}
.ref:first-child{border-left:0;padding-left:0}

.comps{border:0;border-top:1px solid var(--encre)}
.comp{background:none;border:0;border-left:1px solid var(--filet);padding:26px 34px}
.comp:first-child{border-left:0;padding-left:0}
.comp:last-child{background:var(--vert-pale);margin-right:calc(var(--gouttiere) * -1);
  padding-right:var(--gouttiere)}

.faits{border:0;border-top:1px solid var(--filet-fort);
  border-bottom:1px solid var(--filet-fort)}
.fait{background:none;border:0;border-left:1px solid var(--filet);padding:20px 24px}
.fait:first-child{border-left:0;padding-left:0}

.niveau{background:none}
.niveau .phases{background:none;border-top:1px solid var(--filet)}
.cta{border:0;border-top:2px solid var(--encre);background:none;
  padding:30px 0 0;align-items:end}

@media (max-width:860px){
  .voie,.pt,.etape,.ref,.comp,.fait{border-left:0;padding-left:0;padding-right:0;
    border-top:1px solid var(--filet)}
  .voie:first-child,.pt:first-child,.etape:first-child,.ref:first-child,
  .comp:first-child,.fait:first-child{border-top:0}
  .chiffre{padding-left:0}
  .chiffre::before{display:none}
  .chiffre:not(:first-child){border-top:1px solid var(--filet)}
  .comp:last-child{margin-right:0}
  .planche.large{margin-inline:calc(var(--gouttiere) * -1)}
}

/* ---------------------------------------------- cartouche du heros -- */

.hero{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:52px;align-items:start}
.hero-corps{min-width:0}
.hero-cartouche{border-top:1px solid var(--encre);margin-top:8px}
.hero-cartouche div{padding:11px 0 10px;border-bottom:1px solid var(--filet);
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.45;
  color:var(--encre)}
.hero-cartouche span{display:block;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-3);margin-bottom:4px}

/* rythme resserre : la page respirait au point de paraitre inachevee */
section{padding-block:clamp(44px,5vw,66px)}
.chapo{margin-bottom:30px}
.bande-tete{padding-top:14px}
.bande-legende{padding-bottom:18px}
.bande-dessin .planche:not(.large){max-width:1180px}
section:has(+ .bande){padding-bottom:clamp(26px,3vw,36px)}
.bande + section{padding-top:clamp(34px,4vw,50px)}

@media (max-width:1020px){
  .hero{grid-template-columns:1fr;gap:30px}
  .hero-cartouche{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
    border-top:1px solid var(--filet-fort)}
}
@media (max-width:560px){ .hero-cartouche{grid-template-columns:1fr} }

/* --------------------------------------------- reperes de detail -- */
/* Le numero de section nu (01, 02, 03) est le tic de mise en page le plus
   reconnaissable. Sur une feuille de plan, un renvoi de detail s'ecrit dans
   une bulle : on reprend la convention du metier, elle dit la meme chose et
   elle appartient au dessin. */

.shead .n{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vert-fonce);
  white-space:nowrap;margin-top:.5em}
.shead .n::before{content:"";width:22px;height:1px;background:var(--vert)}
.shead{gap:18px}

/* Le bandeau a filet lateral epais est l'autre tic. La regle d'exclusivite
   devient un encadre a filet haut et bas, avec son intitule en cartouche. */
.chapo.regle{border-left:0;background:var(--vert-pale);border-top:2px solid var(--vert);
  border-bottom:1px solid var(--filet-fort);padding:22px 26px 24px;position:relative}
.chapo.regle::before{content:attr(data-etiquette);position:absolute;top:-1px;left:26px;
  transform:translateY(-100%);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-fonce);padding-bottom:6px}

/* ------------------------------------------------- grain du papier -- */
/* Une couche de bruit tres faible, posee au-dessus du fond et sous le contenu.
   Elle enleve au quadrillage son aspect de calque numerique parfait. Elle est
   inerte au clic et disparait a l'impression. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='200' height='200' filter='url(%23g)'/></svg>");
  background-size:200px 200px;
}
header,main,footer{position:relative;z-index:1}
@media print{ body::before{display:none} }

/* Les surfaces de contenu se detachent du papier au lieu de s'y confondre :
   une feuille posee sur le bloc, pas un calque transparent. */
.voies,.pts,.etapes,.refs,.comps,.faits,.chiffres,.niveaux,.faq,.contact-grille{
  background:var(--carte);
  box-shadow:0 1px 0 rgba(31,41,55,.03), 0 12px 28px -22px rgba(31,41,55,.28);
}
.comp:last-child{background:var(--vert-pale)}

/* ------------------------------------------- selecteur de marche -- */

.marches{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--encre-3);flex:0 0 auto;margin:0}
.marches b{color:var(--encre);font-weight:500}
.marches a{text-decoration:none;color:var(--encre-3)}
.marches a:hover{color:var(--vert)}
.marches abbr{text-decoration:none;border:0}
.marches .sep{width:1px;height:12px;background:var(--filet-fort)}

/* -------------------------------------------- bandeau de suggestion -- */
/* Il propose, il n'impose pas, et il ne revient pas une fois tranche. */

.geo{position:relative;z-index:30;background:var(--vert-pale);
  border-bottom:1px solid var(--filet-fort);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:11px max(var(--gouttiere), calc((100% - var(--large)) / 2 + var(--gouttiere)))}
.geo[hidden]{display:none}
.geo-txt{font-size:14.5px;color:var(--encre);margin:0}
.geo-lien{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  color:var(--vert-fonce);text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:1px}
.geo-lien[hidden]{display:none}
.geo-lien:hover .fl{transform:translateX(4px)}
.geo-non{margin-left:auto;background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-3);text-decoration:underline;text-underline-offset:3px}
.geo-non:hover{color:var(--encre)}

.pied-autres{margin-top:14px;font-size:14px;display:flex;gap:12px;flex-wrap:wrap;
  align-items:baseline}
.pied-autres span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3)}
.pied-autres a{color:var(--encre-2);text-decoration:none}
.pied-autres a:hover{color:var(--vert)}

@media (max-width:860px){
  .geo{gap:12px;padding-block:10px}
  .geo-txt{font-size:13.5px;flex:1 1 100%}
  .geo-non{margin-left:0}
}