/* ==========================================================================
   Scenilo, feuille de style unique
   Vocabulaire des classes : le lieu, le comptoir, la scene, la regie.
   Regime chromatique : clair aube et neon froid. Le papier d aube porte le
   texte, le zinc de comptoir sert de surface claire, le laiton brule fait
   l accent et le neon froid ne signale que les echeances et les alertes.
   ========================================================================== */

:root{
  --aube:#FBF4EC;
  --aube-alt:#EDEEF2;
  --zinc:#FFFCF6;
  --encre:#2A1809;
  --encre-douce:#705637;
  --laiton:#A85A12;
  --laiton-fonce:#8B4A0E;
  --creme:#FFF6E9;
  --laiton-texte:#FFF6E9;
  --neon:#0B6E8F;
  --filet:#C3CDDA;
  --filet-laiton:rgba(168,90,18,.34);
  --voile-encre:rgba(42,24,9,.05);

  --police-titre:"Saira Condensed","Arial Narrow",Helvetica,sans-serif;
  --police-texte:"Red Hat Text","Segoe UI",Helvetica,Arial,sans-serif;
  --police-accent:"Coustard",Georgia,"Times New Roman",serif;

  --largeur:1220px;
  --largeur-lecture:68ch;
  --gouttiere:clamp(1.15rem,4vw,2.6rem);
  --ardoise-h:68px;

  /* Deux traces d onde : le laiton brule pour le papier d aube, le laiton vif
     du comptoir pour les ondes posees sur une photographie sombre. */
  --onde-large:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20 Q25 6 50 20 Q75 34 100 20 Q118 9 136 20 Q154 31 172 20 Q200 2 228 20 Q256 38 284 20 Q305 10 326 20 Q347 30 368 20 Q396 4 424 20 Q452 36 480 20 Q500 12 520 20 Q540 28 560 20 Q590 3 620 20 Q650 37 680 20 Q702 8 724 20 Q746 32 768 20 Q795 5 822 20 Q849 35 876 20 Q898 11 920 20 Q942 29 964 20 Q992 6 1020 20 Q1048 34 1076 20 Q1098 10 1120 20 Q1142 30 1164 20 Q1182 14 1200 20' fill='none' stroke='%23A85A12' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --onde-large-vive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='40' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20 Q25 6 50 20 Q75 34 100 20 Q118 9 136 20 Q154 31 172 20 Q200 2 228 20 Q256 38 284 20 Q305 10 326 20 Q347 30 368 20 Q396 4 424 20 Q452 36 480 20 Q500 12 520 20 Q540 28 560 20 Q590 3 620 20 Q650 37 680 20 Q702 8 724 20 Q746 32 768 20 Q795 5 822 20 Q849 35 876 20 Q898 11 920 20 Q942 29 964 20 Q992 6 1020 20 Q1048 34 1076 20 Q1098 10 1120 20 Q1142 30 1164 20 Q1182 14 1200 20' fill='none' stroke='%23F2933A' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --onde-fond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='260' viewBox='0 0 1440 260'%3E%3Cpath d='M0 130 Q60 34 120 130 Q180 226 240 130 Q292 52 344 130 Q396 208 448 130 Q516 20 584 130 Q652 240 720 130 Q780 46 840 130 Q900 214 960 130 Q1020 30 1080 130 Q1140 230 1200 130 Q1260 58 1320 130 Q1380 202 1440 130' fill='none' stroke='%23C3CDDA' stroke-width='2.4'/%3E%3C/svg%3E");
  --onde-mini:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='12' viewBox='0 0 54 12'%3E%3Cpath d='M0 6 Q4.5 1 9 6 Q13.5 11 18 6 Q22.5 0 27 6 Q31.5 12 36 6 Q40.5 1 45 6 Q49.5 11 54 6' fill='none' stroke='%23A85A12' stroke-width='1.3'/%3E%3C/svg%3E");
  --onde-mini-claire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='12' viewBox='0 0 54 12'%3E%3Cpath d='M0 6 Q4.5 1 9 6 Q13.5 11 18 6 Q22.5 0 27 6 Q31.5 12 36 6 Q40.5 1 45 6 Q49.5 11 54 6' fill='none' stroke='%23FFF6E9' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- socle --- */

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--aube);
  color:var(--encre);
  font-family:var(--police-texte);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--laiton);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--laiton-fonce);}

h1,h2,h3,h4{
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.04;
  margin:0 0 .6em;
  font-weight:600;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.2vw,3.6rem);font-weight:700;}
h2{font-size:clamp(1.9rem,4.4vw,2.4rem);}
h3{font-size:1.375rem;}
h4{font-size:1.0625rem;letter-spacing:.02em;}

p{margin:0 0 1.05em;max-width:var(--largeur-lecture);}
ul{margin:0 0 1.05em;padding-left:0;list-style:none;}

strong{color:var(--encre);font-weight:700;}
.montant{color:var(--laiton);font-family:var(--police-accent);white-space:nowrap;font-size:1.03em;}
.echeance{color:var(--neon);font-weight:600;white-space:nowrap;}

:focus-visible{
  outline:3px solid var(--neon);
  outline-offset:3px;
}

::selection{background:var(--laiton);color:var(--laiton-texte);}

html{scrollbar-color:var(--filet) var(--aube);}
html::-webkit-scrollbar{width:12px;height:12px;}
html::-webkit-scrollbar-track{background:var(--aube);}
html::-webkit-scrollbar-thumb{background:var(--filet);border:3px solid var(--aube);border-radius:6px;}
html::-webkit-scrollbar-thumb:hover{background:var(--laiton);}

.evitement{
  position:absolute;left:-9999px;top:0;
  background:var(--laiton);color:var(--laiton-texte);
  padding:.7rem 1.1rem;font-family:var(--police-titre);
  text-transform:uppercase;letter-spacing:.06em;z-index:200;
}
.evitement:focus{left:.6rem;top:.6rem;}

.hors-ecran{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.sprite-onde{position:absolute;width:0;height:0;overflow:hidden;}

/* ------------------------------------------------------- trames de fond --- */

.plateau{
  position:relative;
  padding:clamp(3.6rem,7vw,6.4rem) 0;
}
.plateau--alt{background:var(--aube-alt);}

.plateau--alt::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--onde-fond);
  background-repeat:repeat-x;
  background-position:0 62%;
  opacity:.62;
  animation:derive-fond 240s linear infinite;
  pointer-events:none;
}

.cadre{
  width:min(var(--largeur),100% - var(--gouttiere) * 2);
  margin-inline:auto;
  position:relative;
  z-index:2;
}

.onde-fil{
  height:40px;
  background-image:var(--onde-large);
  background-repeat:repeat-x;
  background-position:0 50%;
  opacity:.5;
  animation:derive-fond 240s linear infinite;
}

@keyframes derive-fond{
  from{background-position-x:0;}
  to{background-position-x:1440px;}
}
@keyframes derive-anneaux{
  from{transform:translateX(-6px);}
  to{transform:translateX(6px);}
}
@keyframes entree-plateau{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

.a-lever{opacity:0;}
.a-lever.est-leve{animation:entree-plateau .62s cubic-bezier(.22,.7,.3,1) forwards;}

/* ------------------------------------------------------------ surtitre --- */

.surtitre{
  font-family:var(--police-accent);
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--laiton);
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.1rem;
  max-width:none;
}
.surtitre::before{
  content:"";
  width:24px;height:2px;background:var(--laiton);flex:none;
}
.surtitre--centre{justify-content:center;}

.chapeau{
  color:var(--encre-douce);
  font-size:1.125rem;
  max-width:64ch;
}

/* ------------------------------------------------------------ boutons --- */

.bouton-scene,
.bouton-coulisse{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 1.4rem;
  font-family:var(--police-titre);
  font-weight:600;
  font-size:1.0625rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:2px;
  border:0;
  cursor:pointer;
  position:relative;
  transition:background-color .18s linear,color .18s linear,border-color .18s linear;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px,8px 8px);
}

.bouton-scene{
  background:var(--laiton);
  color:var(--laiton-texte);
}
.bouton-scene:hover{background:var(--laiton-fonce);color:var(--laiton-texte);}
.bouton-scene::after,
.bouton-coulisse::after{
  content:"";
  position:absolute;left:1.4rem;right:1.4rem;bottom:7px;height:8px;
  background-image:var(--onde-mini);
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transition:opacity .2s linear;
}
.bouton-scene::after{background-image:var(--onde-mini-claire);}
.bouton-scene:hover::after,
.bouton-coulisse:hover::after{opacity:.9;}

.bouton-coulisse{
  background:transparent;
  color:var(--encre);
  box-shadow:inset 0 0 0 1px var(--filet-laiton),inset 0 0 0 3px transparent,inset 0 0 0 4px var(--filet);
}
.bouton-coulisse:hover{
  background:var(--zinc);
  color:var(--encre);
  box-shadow:inset 0 0 0 1px var(--filet-laiton),inset 0 0 0 3px transparent,inset 0 0 0 4px var(--filet-laiton);
}

.rampe-boutons{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin:1.9rem 0 0;
}
.rampe-boutons--centre{justify-content:center;}

/* ---------------------------------------------------------- cartouche --- */

.cartouche{
  position:relative;
  background:var(--zinc);
  padding:1.7rem 1.5rem 2.1rem;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px,12px 12px);
  box-shadow:inset 0 0 0 1px var(--filet-laiton),0 1px 2px var(--voile-encre);
}
.cartouche::before{
  content:"";
  position:absolute;inset:5px;
  border:2px solid var(--filet);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px,9px 9px);
  pointer-events:none;
}
.cartouche::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:-1px;
  width:60px;height:12px;
  background:var(--zinc) var(--onde-mini) no-repeat center;
  pointer-events:none;
}
.cartouche--clair{background:var(--aube-alt);}
.cartouche--clair::after{background-color:var(--aube-alt);}

/* --------------------------------------------------------------- ardoise --- */

.ardoise{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--ardoise-h);
  background:rgba(251,244,236,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet);
  z-index:120;
  transition:height .2s linear,border-color .2s linear;
}
.ardoise.est-defilee{height:56px;border-bottom-color:var(--laiton);}

.ardoise-rail{
  position:static;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.jauge-lecture{
  position:absolute;left:0;bottom:-1px;height:1px;
  width:0;background:var(--neon);
  opacity:0;transition:opacity .2s linear;
}
.ardoise.est-defilee .jauge-lecture{opacity:1;}

.enseigne{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--encre);
  flex:none;
}
.enseigne-pastille{width:32px;height:32px;flex:none;}
.enseigne-mot{
  font-family:var(--police-titre);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1;
  padding-bottom:7px;
  background:var(--onde-mini) no-repeat right bottom;
  background-size:54px 10px;
}

.ancres{
  display:flex;
  align-items:center;
  gap:1.6rem;
  list-style:none;
  margin:0;padding:0;
}
.ancres a{
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1rem;
  color:var(--encre-douce);
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.ancres a:hover{color:var(--encre);border-bottom-color:var(--laiton);}

.ardoise .bouton-scene{height:40px;font-size:.9375rem;}

.tirette{
  display:none;
  height:40px;
  padding:0 .85rem;
  background:transparent;
  color:var(--encre);
  border:1px solid var(--filet-laiton);
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.95rem;
  cursor:pointer;
}

.coulisse{
  position:fixed;
  inset:0 0 0 auto;
  width:min(360px,86vw);
  background:var(--aube-alt);
  border-left:1px solid var(--laiton);
  padding:1.2rem 1.4rem 2rem;
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:140;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  overflow-y:auto;
}
.coulisse.est-ouverte{transform:none;}
.coulisse[hidden]{display:none;}
.coulisse-tete{display:flex;justify-content:flex-end;}
.coulisse .ancres{flex-direction:column;align-items:stretch;gap:0;}
.coulisse .ancres li + li{border-top:1px solid var(--filet);}
.coulisse .ancres a{
  display:block;padding:.85rem 0;font-size:1.2rem;color:var(--encre);
  border-bottom:0;
}

.voile{
  position:fixed;inset:0;
  background:rgba(42,24,9,.42);
  z-index:130;
}
.voile[hidden]{display:none;}

/* ------------------------------------------------------- hero en cible --- */

.cible{
  position:relative;
  padding:calc(var(--ardoise-h) + clamp(3rem,7vw,5.6rem)) 0 clamp(3rem,6vw,5rem);
  overflow:hidden;
  isolation:isolate;
}
.cible-nappe{
  position:absolute;inset:0;
  background-image:var(--onde-fond);
  background-repeat:repeat-x;
  background-position:0 68%;
  background-size:1440px 260px;
  opacity:.9;
  animation:derive-fond 120s linear infinite;
  z-index:0;
}
.cible-halo{
  position:absolute;
  left:50%;top:34%;
  width:min(1440px,140vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(255,252,246,.94) 0%,rgba(255,252,246,.52) 34%,transparent 66%);
  z-index:0;
  pointer-events:none;
}

.cible-anneaux{
  position:absolute;
  left:50%;top:37%;
  width:0;height:0;
  z-index:1;
  pointer-events:none;
  animation:derive-anneaux 120s linear infinite alternate;
}
.anneau{
  position:absolute;
  left:50%;top:50%;
  border:1px solid var(--filet);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.anneau--un{width:480px;height:480px;}
.anneau--deux{width:960px;height:960px;border-color:rgba(195,205,218,.9);}
.anneau--trois{width:1440px;height:1440px;border-color:rgba(195,205,218,.62);}

.repere{
  position:absolute;
  left:50%;top:50%;
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--encre-douce);
  white-space:nowrap;
  transform:translate(calc(var(--dx,0px) - 50%),calc(var(--dy,0px) - 50%));
}
.repere::before{
  content:"";
  display:block;
  width:26px;height:1px;
  background:var(--laiton);
  margin:0 auto .35rem;
  opacity:.75;
}

.cible-centre{
  position:relative;
  z-index:3;
  text-align:center;
  max-width:52rem;
  margin-inline:auto;
}
.cible-centre p{margin-inline:auto;}

.marque-lieu{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--police-accent);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--neon);
  border:1px solid rgba(11,110,143,.45);
  padding:.4rem .85rem;
  margin-bottom:1.4rem;
}

.cible-centre h1 .laiton{color:var(--laiton);display:block;}

.rassurance{
  margin:2.2rem auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem 1.9rem;
  font-size:.9375rem;
  color:var(--encre-douce);
  max-width:none;
}
.rassurance span{display:inline-flex;align-items:center;gap:.5rem;}
.rassurance span::before{
  content:"";width:8px;height:8px;background:var(--laiton);flex:none;
  transform:rotate(45deg);
}

.cible-vue{
  position:relative;
  z-index:3;
  margin:clamp(2.6rem,6vw,4.4rem) auto 0;
  max-width:1020px;
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:clamp(1rem,2.4vw,1.7rem);
  align-items:stretch;
}

.vitrine{
  position:relative;
  background:var(--zinc);
  padding:6px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px,12px 12px);
  box-shadow:inset 0 0 0 1px var(--filet-laiton);
}
.vitrine img{
  width:100%;
  filter:saturate(.8) contrast(1.05);
}
.vitrine::after{
  content:"";
  position:absolute;left:6px;right:6px;bottom:6px;height:44%;
  background:linear-gradient(to top,rgba(42,24,9,.58),transparent);
  pointer-events:none;
}
.vitrine-onde{
  position:absolute;left:6px;right:6px;bottom:14px;height:12px;
  background-image:var(--onde-large-vive);
  background-repeat:repeat-x;
  background-size:600px 40px;
  background-position:0 center;
  opacity:.65;
  z-index:2;
  pointer-events:none;
}
.vitrine-legende{
  position:absolute;left:22px;bottom:34px;z-index:3;
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--creme);
  text-shadow:0 1px 5px rgba(42,24,9,.72);
  margin:0;
}

.fiche-cout{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
  text-align:left;
}
.fiche-cout h2{font-size:1.125rem;letter-spacing:.03em;margin-bottom:.2rem;}
.fiche-cout dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.38rem .8rem;}
.fiche-cout dt{color:var(--encre-douce);font-size:.9375rem;}
.fiche-cout dd{margin:0;text-align:right;font-family:var(--police-accent);font-size:.9375rem;color:var(--encre);}
.fiche-cout .ligne-totale{
  border-top:1px solid var(--filet-laiton);
  margin-top:.5rem;padding-top:.7rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
}
.fiche-cout .ligne-totale span{
  font-family:var(--police-titre);text-transform:uppercase;letter-spacing:.05em;
  font-size:.9375rem;color:var(--encre-douce);
}
.chiffre-cartouche{
  font-family:var(--police-accent);
  font-size:clamp(2.1rem,5vw,3.2rem);
  color:var(--laiton);
  line-height:1;
}
.fiche-cout p{font-size:.875rem;color:var(--encre-douce);margin:.55rem 0 0;}

/* -------------------------------------------------------- l addition --- */

.addition-grille{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
.addition-fragments{
  position:absolute;
  right:-260px;top:12%;
  width:900px;height:900px;
  pointer-events:none;
  z-index:0;
  opacity:.6;
}
.addition-fragments .anneau{border-color:rgba(195,205,218,.95);}

.note-addition{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--filet);
  border:1px solid var(--filet);
}
.note-addition li{
  background:var(--zinc);
  padding:1.05rem 1.2rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.2rem 1rem;
}
.note-addition b{
  grid-row:span 2;
  font-family:var(--police-accent);
  color:var(--laiton);
  font-size:1.5rem;
  line-height:1.2;
  align-self:start;
  min-width:5.6rem;
}
.note-addition h3{margin:0 0 .18rem;font-size:1.0625rem;letter-spacing:.02em;}
.note-addition p{margin:0;font-size:.9375rem;color:var(--encre-douce);max-width:none;}

.encadre-risque{
  margin-top:1.7rem;
  border-left:3px solid var(--neon);
  background:rgba(11,110,143,.07);
  padding:1.1rem 1.2rem;
}
.encadre-risque p{margin:0;font-size:.9375rem;color:var(--encre-douce);}
.encadre-risque strong{color:var(--neon);}

/* ---------------------------------------------------------- le deroule --- */

.arc-etapes{
  position:relative;
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.arc-etapes::before{
  content:"";
  position:absolute;
  left:5%;right:5%;top:38px;
  height:220px;
  border-top:1px dashed var(--filet);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
.etape{
  position:relative;
  padding-top:0;
}
.etape:nth-child(1){transform:translateY(0);}
.etape:nth-child(2){transform:translateY(34px);}
.etape:nth-child(3){transform:translateY(58px);}
.etape:nth-child(4){transform:translateY(96px);}

.etape-numero{
  font-family:var(--police-accent);
  font-size:2.4rem;
  line-height:1;
  color:var(--laiton);
  display:block;
  margin-bottom:.5rem;
}
.etape h3{margin-bottom:.45rem;}
.etape p{font-size:.9375rem;color:var(--encre-douce);max-width:none;margin-bottom:.6rem;}
.etape .echeance{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--police-titre);}

.deroule-vue{
  margin-top:clamp(6rem,12vw,8.5rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;
}
.deroule-vue h3{font-size:1.5rem;}
.deroule-vue p{color:var(--encre-douce);font-size:.9375rem;}

/* --------------------------------------------------- ce qui tourne --- */

.arc-filigrane{
  position:absolute;
  left:50%;top:-140px;
  width:1500px;height:1500px;
  transform:translateX(-50%);
  border:1px solid var(--filet);
  border-radius:50%;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.jeu-cartouches{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.5rem);
  margin-top:clamp(2rem,4vw,2.8rem);
}
.jeu-cartouches .cartouche h3{margin-bottom:.5rem;}
.jeu-cartouches .cartouche p{font-size:.9375rem;color:var(--encre-douce);max-width:none;margin-bottom:0;}
.jeu-cartouches .cartouche p + p{margin-top:.55rem;}
.etiquette-outil{
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neon);
  display:block;
  margin-bottom:.7rem;
}

/* ------------------------------------------------------------ recette --- */

.recette-grille{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
.gain{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.2rem 1.3rem;
  padding:1.35rem 1.4rem;
  background:var(--zinc);
  border-left:3px solid var(--laiton);
}
.gain-chiffre{
  grid-row:span 2;
  font-family:var(--police-accent);
  font-size:2.6rem;
  line-height:1;
  color:var(--laiton);
  align-self:center;
  min-width:6.4rem;
}
.gain h3{margin:0 0 .25rem;font-size:1.125rem;letter-spacing:.02em;}
.gain p{margin:0;font-size:.9375rem;color:var(--encre-douce);max-width:none;}

/* ---------------------------------------------------------- programme --- */

.programme{
  max-width:920px;
  margin-inline:auto;
}
.bandeau-chiffres{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--filet);
  border:1px solid var(--filet);
  margin:0 0 clamp(2rem,4vw,2.8rem);
}
.bandeau-chiffres div{
  background:var(--aube);
  padding:1.4rem 1.1rem;
  text-align:center;
}
.bandeau-chiffres b{
  display:block;
  font-family:var(--police-accent);
  font-weight:400;
  font-size:2.6rem;
  line-height:1;
  color:var(--laiton);
  margin-bottom:.45rem;
}
.bandeau-chiffres span{
  font-size:.875rem;
  color:var(--encre-douce);
  display:block;
}

.mot-de-salle{
  margin:0 0 clamp(1rem,2.4vw,1.5rem);
}
.mot-de-salle blockquote{
  margin:0 0 1rem;
  font-family:var(--police-accent);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--encre);
}
.mot-de-salle blockquote p{max-width:none;}
.mot-de-salle figcaption{
  font-size:.875rem;
  color:var(--encre-douce);
  border-top:1px solid var(--filet);
  padding-top:.75rem;
}
.mot-de-salle figcaption b{
  display:block;
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.0625rem;
  color:var(--encre);
}
.piece-jointe{
  display:inline-block;
  margin-top:.6rem;
  font-size:.8125rem;
  color:var(--neon);
  border:1px solid rgba(11,110,143,.42);
  padding:.25rem .6rem;
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.preuve-vue{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:center;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.preuve-vue p{font-size:.9375rem;color:var(--encre-douce);}

/* ------------------------------------------------------------- tarifs --- */

.grille-formules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.5rem);
  margin-top:clamp(2rem,4vw,2.8rem);
  align-items:start;
}
.formule{
  display:flex;
  flex-direction:column;
  height:100%;
}
.formule--tete{
  box-shadow:inset 0 0 0 2px var(--laiton);
}
.formule--tete::before{border-color:rgba(168,90,18,.38);}
.fanion{
  position:absolute;
  right:0;top:0;
  background:var(--laiton);
  color:var(--laiton-texte);
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:.75rem;
  padding:.25rem .7rem;
}
.formule h3{margin-bottom:.3rem;}
.formule-cible{
  font-size:.875rem;
  color:var(--encre-douce);
  max-width:none;
  min-height:3.6em;
}
.formule-prix{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin:.5rem 0 .2rem;
}
.formule-prix b{
  font-family:var(--police-accent);
  font-weight:400;
  font-size:3.2rem;
  line-height:1;
  color:var(--laiton);
}
.formule-prix span{font-size:.875rem;color:var(--encre-douce);}
.formule-inclus{
  margin:1.1rem 0 1.6rem;
  display:grid;
  gap:.6rem;
}
.formule-inclus li{
  position:relative;
  padding-left:2.1rem;
  font-size:.9375rem;
  color:var(--encre-douce);
}
.formule-inclus li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:28px;height:8px;
  background:var(--onde-mini) no-repeat left center;
  background-size:28px 8px;
}
.formule .bouton-scene,
.formule .bouton-coulisse{margin-top:auto;width:100%;}

.entree-diagnostic{
  margin-top:clamp(1.4rem,3vw,2rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.6rem;
  padding:1.2rem 1.4rem;
  background:var(--zinc);
  border:1px solid var(--filet-laiton);
}
.entree-diagnostic p{margin:0;font-size:.9375rem;color:var(--encre-douce);max-width:56ch;}
.entree-diagnostic b{
  font-family:var(--police-accent);
  color:var(--laiton);
  font-size:1.75rem;
  line-height:1;
  white-space:nowrap;
}

/* ---------------------------------------------------------------- faq --- */

.faq-colonne{max-width:860px;margin-inline:auto;}
.question{
  border-top:1px solid var(--filet);
  padding:0;
}
.question:last-of-type{border-bottom:1px solid var(--filet);}
.question summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.15rem .2rem;
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:1.1875rem;
  color:var(--encre);
}
.question summary::-webkit-details-marker{display:none;}
.question summary::after{
  content:"+";
  display:inline-block;
  font-family:var(--police-accent);
  color:var(--laiton);
  font-size:1.4rem;
  line-height:1;
  flex:none;
  transition:transform .18s linear;
}
.question[open] summary::after{transform:rotate(45deg);}
.question[open] summary{color:var(--laiton);}
.question-reponse{padding:0 .2rem 1.35rem;}
.question-reponse p{color:var(--encre-douce);font-size:.9375rem;margin-bottom:.7rem;}
.question-reponse p:last-child{margin-bottom:0;}

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

.contact-grille{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.contact-appui ul{display:grid;gap:.75rem;margin-top:1.4rem;}
.contact-appui li{
  position:relative;padding-left:2.1rem;font-size:.9375rem;color:var(--encre-douce);
}
.contact-appui li::before{
  content:"";position:absolute;left:0;top:.55em;width:28px;height:8px;
  background:var(--onde-mini) no-repeat left center;background-size:28px 8px;
}

.feuille-contact{display:grid;gap:1rem;}
.champ{display:grid;gap:.35rem;}
.champ label{
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.9375rem;
  color:var(--encre);
}
.champ input,
.champ select,
.champ textarea{
  font-family:var(--police-texte);
  font-size:1rem;
  color:var(--encre);
  background:var(--zinc);
  border:1px solid var(--filet);
  padding:.7rem .8rem;
  border-radius:2px;
  width:100%;
}
.champ textarea{resize:vertical;min-height:8.5rem;}
.champ input:focus,
.champ select:focus,
.champ textarea:focus{border-color:var(--laiton);}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

.consentement{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.7rem;
  align-items:start;
  font-size:.875rem;
  color:var(--encre-douce);
}
.consentement input{width:20px;height:20px;accent-color:var(--laiton);margin-top:.15rem;}

.mot-reponse{font-size:.875rem;color:var(--encre-douce);margin:0;}

/* ---------------------------------------------------------------- regie --- */

.regie{
  background:var(--aube-alt);
  border-top:1px solid var(--filet);
  padding:clamp(2.6rem,5vw,4rem) 0 0;
}
.regie-colonnes{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:clamp(1.4rem,3vw,2.4rem);
}
.regie h2{font-size:1rem;letter-spacing:.06em;color:var(--encre);margin-bottom:1rem;}
.regie ul{display:grid;gap:.55rem;margin:0;}
.regie a{color:var(--encre-douce);text-decoration:none;font-size:.9375rem;}
.regie a:hover{color:var(--laiton);text-decoration:underline;}
.regie p{font-size:.9375rem;color:var(--encre-douce);}
.regie-position{max-width:34ch;}
.reseaux{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
.reseaux a{
  border:1px solid var(--filet);
  padding:.3rem .65rem;
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.8125rem;
}
.reseaux a:hover{border-color:var(--laiton);text-decoration:none;}
.regie-editeur{font-size:.8125rem;line-height:1.6;margin-top:1.1rem;}

.barre-bas{
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--filet);
  padding:1.2rem 0 1.6rem;
}
.barre-bas p{
  margin:0;font-size:.8125rem;color:var(--encre-douce);max-width:none;
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;
}

/* ------------------------------------------------------- pages internes --- */

.page-interne{
  padding:calc(var(--ardoise-h) + clamp(2.4rem,5vw,4rem)) 0 clamp(2.6rem,5vw,4rem);
  position:relative;
}
.fil{
  font-size:.8125rem;
  color:var(--encre-douce);
  margin-bottom:1.4rem;
}
.fil a{color:var(--encre-douce);}
.fil a:hover{color:var(--laiton);}

.texte-long{max-width:74ch;}
.texte-long h2{margin-top:2.4rem;}
.texte-long h3{margin-top:1.7rem;font-size:1.1875rem;}
.texte-long p,
.texte-long li{color:var(--encre-douce);}
.texte-long strong{color:var(--encre);}
.texte-long ul{display:grid;gap:.55rem;margin-bottom:1.3rem;}
.texte-long ul li{position:relative;padding-left:1.5rem;}
.texte-long ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--laiton);
}
.texte-long ol{padding-left:1.3rem;color:var(--encre-douce);display:grid;gap:.5rem;margin-bottom:1.3rem;}
.texte-long dl{margin:0 0 1.4rem;}
.texte-long dt{font-family:var(--police-titre);text-transform:uppercase;letter-spacing:.04em;color:var(--encre);margin-top:.9rem;}
.texte-long dd{margin:.2rem 0 0;color:var(--encre-douce);}

.portrait-auteur{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
.portrait-auteur img{width:100%;filter:saturate(.85);}
.portrait-auteur .cartouche{padding:6px;}

.liste-plan{display:grid;gap:1rem;margin:0;}
.liste-plan article{
  background:var(--zinc);
  padding:1.1rem 1.2rem;
  border-left:3px solid var(--laiton);
}
.liste-plan h3{margin:0 0 .3rem;font-size:1.0625rem;}
.liste-plan p{margin:0;font-size:.9375rem;color:var(--encre-douce);}

.centre-message{
  text-align:center;
  max-width:640px;
  margin-inline:auto;
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.2rem,3vw,2.2rem);
}
.centre-message p{margin-inline:auto;}

/* ------------------------------------------------------------ mobile --- */

@media (max-width:1180px){
  .addition-fragments{right:-420px;}
}

@media (max-width:1024px){
  .cible-vue{grid-template-columns:1fr;}
  .addition-grille{grid-template-columns:1fr;}
  .addition-fragments{display:none;}
  .arc-etapes{grid-template-columns:1fr 1fr;}
  .arc-etapes::before{display:none;}
  .etape:nth-child(2),
  .etape:nth-child(3),
  .etape:nth-child(4){transform:none;}
  .deroule-vue{margin-top:clamp(2rem,5vw,3rem);grid-template-columns:1fr;}
  .jeu-cartouches{grid-template-columns:1fr 1fr;}
  .grille-formules{grid-template-columns:1fr;}
  .formule-cible{min-height:0;}
  .contact-grille{grid-template-columns:1fr;}
  .preuve-vue{grid-template-columns:1fr;}
  .regie-colonnes{grid-template-columns:1fr 1fr;}
  .portrait-auteur{grid-template-columns:1fr;}
  .portrait-auteur .cartouche{max-width:300px;}
}

@media (max-width:1220px){
  .repere{display:none;}
}

@media (max-width:960px){
  .ardoise .ancres,
  .ardoise .bouton-scene{display:none;}
  .tirette{display:inline-flex;align-items:center;}
  .anneau--trois{display:none;}
}

@media (max-width:720px){
  :root{--largeur-lecture:100%;}
  .bandeau-chiffres{grid-template-columns:1fr 1fr;}
  .recette-grille{grid-template-columns:1fr;}
  .jeu-cartouches{grid-template-columns:1fr;}
  .arc-etapes{grid-template-columns:1fr;}
  .duo-champs{grid-template-columns:1fr;}
  .regie-colonnes{grid-template-columns:1fr;}
  .anneau--deux{display:none;}
  .gain-chiffre{font-size:2.1rem;min-width:5rem;}
  .rampe-boutons .bouton-scene,
  .rampe-boutons .bouton-coulisse{width:100%;}
}

/* ------------------------------------------------- mouvement reduit --- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cible-nappe,
  .onde-fil,
  .plateau--alt::before,
  .cible-anneaux{animation:none;}
  .a-lever{opacity:1;}
  .a-lever.est-leve{animation:none;}
  .coulisse{transition:none;}
  *{scroll-behavior:auto;}
}

@media print{
  .ardoise,.coulisse,.voile,.onde-fil,.cible-nappe{display:none;}
  body{background:#FFFCF6;color:#2A1809;}
}

/* ==========================================================================
   Le Cahier des Dates, section magazine
   Prolongement de la feuille de style, jamais un module rapporte : memes
   variables de couleur, meme cartouche a filet double avec encoche de coin de
   douze pixels, meme forme d onde sonore en motif et en puce, meme derive
   horizontale tres lente du fond. Aucune regle ci dessus n est modifiee.
   Vocabulaire : cahier (le magazine), affiche (la carte d article),
   sommaire-cahier (la grille), tete-article, exergue, corps-article,
   chute-article, encart-auteur, lire-aussi, derniers-articles.
   ========================================================================== */

/* --- 1. Ossature des pages du magazine ---------------------------------- */

.page-cahier{
  position:relative;
  padding:calc(var(--ardoise-h) + clamp(2rem,4.5vw,3.2rem)) 0 0;
}

.regie .regie-titre{
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1rem;
  line-height:1.04;
  color:var(--encre);
  margin:0 0 1rem;
  max-width:none;
}

@keyframes derive-onde-cahier{
  from{background-position-x:0;}
  to{background-position-x:600px;}
}

/* --- 2. Fil d Ariane du magazine ---------------------------------------- */

.fil-ariane{
  font-size:.8125rem;
  color:var(--encre-douce);
  margin:0 0 1.4rem;
}
.fil-ariane ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem .6rem;
}
.fil-ariane li{display:inline-flex;align-items:center;gap:.6rem;}
.fil-ariane li + li::before{
  content:"";
  width:14px;height:1px;
  background:var(--filet-laiton);
  flex:none;
}
.fil-ariane a{color:var(--encre-douce);text-decoration:none;}
.fil-ariane a:hover{color:var(--laiton);text-decoration:underline;}
.fil-ariane [aria-current="page"]{color:var(--encre);}

/* --- 3. Entete du magazine ---------------------------------------------- */

.tete-cahier{max-width:56rem;}
.tete-cahier h1{margin-bottom:.34em;}
.tete-cahier .chapeau{font-size:1.125rem;max-width:66ch;}

.cahier-jalons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--filet);
  border:1px solid var(--filet);
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;
}
.cahier-jalons div{
  background:var(--aube);
  padding:1.05rem 1.15rem;
}
.cahier-jalons b{
  display:block;
  font-family:var(--police-accent);
  font-weight:400;
  font-size:2rem;
  line-height:1;
  color:var(--laiton);
  margin-bottom:.4rem;
}
.cahier-jalons span{
  display:block;
  font-size:.875rem;
  color:var(--encre-douce);
}

/* --- 4. Grille de cartes d article -------------------------------------- */

.sommaire-cahier{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);
  margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;
  align-items:stretch;
}

/* --- 5. Affiche, la carte d article ------------------------------------- */

.affiche{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--zinc);
  padding:6px 6px 1.5rem;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px,12px 12px);
  box-shadow:inset 0 0 0 1px var(--filet-laiton),0 1px 2px var(--voile-encre);
  transition:box-shadow .18s linear;
}
.affiche::before{
  content:"";
  position:absolute;inset:5px;
  border:2px solid var(--filet);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px,9px 9px);
  pointer-events:none;
  transition:border-color .18s linear;
  z-index:2;
}
.affiche::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:-1px;
  width:60px;height:12px;
  background:var(--zinc) var(--onde-mini) no-repeat center;
  pointer-events:none;
  z-index:3;
}
.affiche:hover{box-shadow:inset 0 0 0 1px var(--laiton),0 2px 4px var(--voile-encre);}
.affiche:hover::before{border-color:var(--filet-laiton);}
.affiche:focus-within{box-shadow:inset 0 0 0 1px var(--laiton),0 2px 4px var(--voile-encre);}

.affiche-cadre{
  position:relative;
  display:block;
  overflow:hidden;
}
.affiche-cadre img{
  width:100%;
  filter:saturate(.8) contrast(1.05);
  transition:transform .5s cubic-bezier(.22,.7,.3,1),filter .3s linear;
}
.affiche:hover .affiche-cadre img{transform:scale(1.035);filter:saturate(.9) contrast(1.05);}
.affiche-voile{
  position:absolute;left:0;right:0;bottom:0;
  height:52%;
  background:linear-gradient(to top,rgba(42,24,9,.62),transparent);
  pointer-events:none;
}
.affiche-onde{
  position:absolute;left:0;right:0;bottom:8px;
  height:12px;
  background-image:var(--onde-large-vive);
  background-repeat:repeat-x;
  background-size:600px 40px;
  background-position:0 center;
  opacity:.6;
  pointer-events:none;
  animation:derive-onde-cahier 180s linear infinite;
}

.affiche-corps{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.15rem 1.05rem 0;
}
.affiche-angle{
  display:block;
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neon);
  margin:0 0 .6rem;
  max-width:none;
}
.affiche-titre{
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.08;
  font-size:1.1875rem;
  color:var(--encre);
  margin:0 0 .6rem;
  max-width:none;
  text-wrap:balance;
}
.affiche-titre a{color:var(--encre);text-decoration:none;}
.affiche-titre a::after{
  content:"";
  position:absolute;inset:0;
  z-index:4;
}
.affiche:hover .affiche-titre a,
.affiche-titre a:hover{color:var(--laiton);}
.affiche-extrait{
  font-size:.9375rem;
  color:var(--encre-douce);
  margin:0 0 1.05rem;
  max-width:none;
}
.affiche-pied{
  margin:auto 0 0;
  padding-top:.75rem;
  border-top:1px solid var(--filet);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem .95rem;
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.8125rem;
  color:var(--encre-douce);
  max-width:none;
}
.affiche-pied .lecture{color:var(--neon);}

.affiche--compacte .affiche-corps{padding:1rem 1rem 0;}
.affiche--compacte .affiche-titre{font-size:1.0625rem;}
.affiche--compacte .affiche-extrait{margin-bottom:.2rem;font-size:.9rem;}

/* --- 6. Entete d article ------------------------------------------------ */

.tete-article{max-width:74ch;}
.tete-article h1{margin-bottom:.4em;}

.reperes-article{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem 1.5rem;
  margin:0 0 clamp(1.6rem,3vw,2.2rem);
  padding:.8rem 0;
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
  font-family:var(--police-titre);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.8125rem;
  color:var(--encre-douce);
  max-width:none;
}
.reperes-article .angle-article{
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--neon);
}
.reperes-article time{color:var(--encre);}
.reperes-article .lecture{color:var(--laiton);}

.exergue{
  position:relative;
  margin:0 0 clamp(1.8rem,3.5vw,2.4rem);
  padding:1.1rem 0 1.1rem 1.6rem;
  max-width:68ch;
  font-size:1.1875rem;
  line-height:1.6;
  color:var(--encre);
  box-shadow:inset 1px 0 0 0 var(--laiton),inset 5px 0 0 0 var(--filet);
}

.une-article{
  position:relative;
  margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
  background:var(--zinc);
  padding:6px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px,12px 12px);
  box-shadow:inset 0 0 0 1px var(--filet-laiton);
}
.une-article img{width:100%;filter:saturate(.8) contrast(1.05);}
.une-article::after{
  content:"";
  position:absolute;left:6px;right:6px;bottom:6px;
  height:38%;
  background:linear-gradient(to top,rgba(42,24,9,.52),transparent);
  pointer-events:none;
}
.une-onde{
  position:absolute;left:6px;right:6px;bottom:14px;
  height:12px;
  background-image:var(--onde-large-vive);
  background-repeat:repeat-x;
  background-size:600px 40px;
  background-position:0 center;
  opacity:.65;
  z-index:2;
  pointer-events:none;
}

/* --- 7. Corps redactionnel, balises nues -------------------------------- */
/* Le corps d un article ne porte aucun attribut class : tout est mis en forme
   par les balises elles memes, en tant que descendantes de .corps-article. */

.corps-article{
  max-width:var(--largeur-lecture);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--encre-douce);
}
.corps-article > :first-child{margin-top:0;}

.corps-article h2{
  position:relative;
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.08;
  font-size:clamp(1.5rem,3.4vw,1.875rem);
  color:var(--encre);
  margin:2.6rem 0 .9rem;
  padding-top:1.3rem;
  text-wrap:balance;
}
.corps-article h2::before{
  content:"";
  position:absolute;left:0;top:0;
  width:40px;height:2px;
  background:var(--laiton);
}
.corps-article h3{
  position:relative;
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.14;
  font-size:1.1875rem;
  color:var(--encre);
  margin:1.9rem 0 .6rem;
  padding-left:1.15rem;
}
.corps-article h3::before{
  content:"";
  position:absolute;left:0;top:.42em;
  width:8px;height:8px;
  background:var(--laiton);
  transform:rotate(45deg);
}

.corps-article p{margin:0 0 1.15em;max-width:none;}
.corps-article strong{color:var(--encre);font-weight:700;}
.corps-article em{color:var(--encre);font-style:italic;}
.corps-article a{
  color:var(--laiton);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.corps-article a:hover{color:var(--laiton-fonce);}

.corps-article ul{
  list-style:none;
  margin:0 0 1.5em;
  padding:0;
  display:grid;
  gap:.62rem;
}
.corps-article ul li{position:relative;padding-left:2.15rem;}
.corps-article ul li::before{
  content:"";
  position:absolute;left:0;top:.58em;
  width:28px;height:8px;
  background:var(--onde-mini) no-repeat left center;
  background-size:28px 8px;
}
.corps-article ol{
  list-style:none;
  margin:0 0 1.5em;
  padding:0;
  display:grid;
  gap:.62rem;
  counter-reset:point-cahier;
}
.corps-article ol li{
  position:relative;
  padding-left:2.6rem;
  counter-increment:point-cahier;
}
.corps-article ol li::before{
  content:counter(point-cahier);
  position:absolute;left:0;top:0;
  font-family:var(--police-accent);
  font-size:1.15rem;
  line-height:1.45;
  color:var(--laiton);
}
.corps-article li ul,
.corps-article li ol{margin:.6rem 0 0;}

.corps-article table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.7em;
  font-size:.9375rem;
  background:var(--zinc);
  box-shadow:inset 0 0 0 1px var(--filet-laiton);
}
.corps-article thead th{
  background:var(--aube-alt);
  color:var(--encre);
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.875rem;
  text-align:left;
  padding:.75rem .9rem;
  border-bottom:2px solid var(--filet-laiton);
}
.corps-article tbody th{
  color:var(--encre);
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:left;
  padding:.7rem .9rem;
  border-top:1px solid var(--filet);
  vertical-align:top;
}
.corps-article td{
  color:var(--encre-douce);
  padding:.7rem .9rem;
  border-top:1px solid var(--filet);
  vertical-align:top;
}
.corps-article tbody tr:hover th,
.corps-article tbody tr:hover td{background:rgba(168,90,18,.06);}

.corps-article blockquote{
  margin:0 0 1.7em;
  padding:1.2rem 1.35rem;
  background:var(--aube-alt);
  font-family:var(--police-accent);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--encre);
  box-shadow:inset 1px 0 0 0 var(--laiton),inset 5px 0 0 0 var(--filet);
}
.corps-article blockquote p{margin-bottom:.7em;}
.corps-article blockquote p:last-child{margin-bottom:0;}

.corps-article aside{
  position:relative;
  margin:0 0 1.7em;
  padding:1.15rem 1.3rem 1.85rem;
  background:rgba(11,110,143,.07);
  border-left:3px solid var(--neon);
}
.corps-article aside::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:7px;
  width:54px;height:10px;
  background:var(--onde-mini) no-repeat center;
  background-size:54px 10px;
  opacity:.5;
  pointer-events:none;
}
.corps-article aside p:last-child{margin-bottom:0;}
.corps-article aside strong{color:var(--neon);}

.corps-article figure{margin:0 0 1.7em;}
.corps-article figure img{width:100%;filter:saturate(.8) contrast(1.05);}
.corps-article figcaption{
  margin-top:.55rem;
  font-family:var(--police-accent);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
}

/* --- 8. Chute d article et appel a l action ----------------------------- */

.chute-article{
  position:relative;
  max-width:var(--largeur-lecture);
  margin:clamp(2.2rem,4vw,3rem) 0 0;
  background:var(--zinc);
  padding:1.6rem 1.5rem 2rem;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px,12px 12px);
  box-shadow:inset 0 0 0 1px var(--filet-laiton);
}
.chute-article::before{
  content:"";
  position:absolute;inset:5px;
  border:2px solid var(--filet);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px,9px 9px);
  pointer-events:none;
}
.chute-article::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:-1px;
  width:60px;height:12px;
  background:var(--zinc) var(--onde-mini) no-repeat center;
  pointer-events:none;
}
.chute-article .chute-titre{
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
  font-size:1.25rem;
  color:var(--encre);
  margin:0 0 .65rem;
  max-width:none;
}
.chute-article p{font-size:.9375rem;color:var(--encre-douce);max-width:none;}
.chute-article .rampe-boutons{margin-top:1.4rem;}

/* --- 9. Encart auteur --------------------------------------------------- */

.encart-auteur{
  max-width:var(--largeur-lecture);
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:1.3rem;
  padding:1.4rem 1.4rem 1.55rem;
  background:var(--aube-alt);
  border:1px solid var(--filet);
}
.encart-auteur img{
  width:96px;height:96px;
  filter:saturate(.85);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px,10px 10px);
}
.encart-auteur .encart-auteur-mention{
  font-family:var(--police-accent);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--laiton);
  margin:0 0 .3rem;
  max-width:none;
}
.encart-auteur .encart-auteur-nom{
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
  font-size:1.25rem;
  color:var(--encre);
  margin:0 0 .55rem;
  max-width:none;
}
.encart-auteur p{
  font-size:.9375rem;
  color:var(--encre-douce);
  margin:0 0 .6rem;
  max-width:none;
}
.encart-auteur p:last-child{margin-bottom:0;}

/* --- 10. Bloc A lire aussi ---------------------------------------------- */

.lire-aussi-tete{max-width:62ch;margin:0 0 clamp(1.4rem,3vw,2rem);}
.lire-aussi-tete .lire-aussi-titre{
  font-family:var(--police-titre);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.06;
  font-size:clamp(1.6rem,3.6vw,2rem);
  color:var(--encre);
  margin:0 0 .55rem;
  max-width:none;
}
.lire-aussi-tete p{color:var(--encre-douce);font-size:.9375rem;}

/* --- 11. Derniers articles sur la page d accueil ------------------------ */

.derniers-articles .sommaire-cahier{margin-top:clamp(2rem,4vw,2.8rem);}
.cahier-renvoi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.6rem;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;
  padding:1.15rem 1.4rem;
  background:var(--zinc);
  border:1px solid var(--filet-laiton);
}
.cahier-renvoi p{margin:0;font-size:.9375rem;color:var(--encre-douce);max-width:60ch;}

/* --- 12. Adaptations du magazine ---------------------------------------- */

@media (max-width:1024px){
  .sommaire-cahier{grid-template-columns:1fr 1fr;}
}

@media (max-width:720px){
  .sommaire-cahier{grid-template-columns:1fr;}
  .cahier-jalons{grid-template-columns:1fr;}
  .encart-auteur{grid-template-columns:1fr;}
  .corps-article table{display:block;overflow-x:auto;}
  .chute-article .rampe-boutons .bouton-scene,
  .chute-article .rampe-boutons .bouton-coulisse{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .affiche-onde{animation:none;}
  .affiche-cadre img{transition:none;}
  .affiche:hover .affiche-cadre img{transform:none;}
}