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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.65 'DM Sans', system-ui, sans-serif;
}

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

a { color: inherit; }

.large { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.mot {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(28px, 3.4vw, 46px);
  margin: 0;
}
.mot em { font-style: normal; color: var(--encre-marque, var(--marque)); }
.mot--geant { font-size: clamp(38px, 6.2vw, 82px); letter-spacing: -.04em; line-height: .96; }
.mot--petit { font-size: clamp(20px, 2.1vw, 27px); }

.lire { margin: 0 0 14px; color: var(--texte-doux); }
.lire:last-child { margin-bottom: 0; }

.eti {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-doux);
}
.eti::before { content: ""; width: 8px; height: 8px; background: var(--marque); flex: none; }

.pil {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.pil--marque { background: var(--marque); color: var(--sur-marque); }
.pil--clair { background: var(--fond); color: var(--texte); }
.pil--cerne { background: transparent; color: var(--texte); border-color: var(--bordure); }
.pil--plein { width: 100%; justify-content: center; }
.pil--centre { display: flex; width: max-content; margin: 34px auto 0; }
.pil:hover { opacity: .88; }

.fl {
  width: 9px; height: 9px; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.fl--geante { width: 26px; height: 26px; border-width: 3px; margin: 26px 0 6px; }

.chev {
  width: 7px; height: 7px; flex: none; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s;
}

.tuile {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px; background: var(--marque); color: var(--sur-marque);
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 15px;
}

.vue {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  padding-top: var(--ratio, 66%);
}
.vue img, .vue > span {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.vue img { object-fit: cover; }
.vue > span {
  display: grid; place-items: center; padding: 14px; text-align: center;
  font-size: 11px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux);
}
.vue--carre { border-radius: 18px; }

.vue--plein { position: absolute; inset: 0; border: 0; border-radius: 0; padding-top: 0; }
.vue--plein img, .vue--plein > span { position: absolute; }

.bloc { padding: 92px 0; }
.bloc--doux { background: var(--fond-2); }
.bloc--nuit { background: var(--texte); color: var(--fond); }
.bloc--mince { padding: 54px 0; }
.bloc--nuit .lire, .bloc--nuit .tete__x { color: var(--fond); opacity: .72; }
.bloc--nuit .eti { color: var(--fond); opacity: .8; }

.bloc--nuit .vue > span, .affiche__fond .vue > span { color: currentColor; }

.tete { max-width: 720px; margin: 0 auto 46px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.tete__x { margin: 0; color: var(--texte-doux); }
.tete--clair .eti, .tete--clair .tete__x { color: var(--sur-marque); opacity: .84; }
.tete--clair .mot em { color: var(--sur-marque); opacity: .7; }

.affiche .mot em { color: var(--fond); opacity: .7; }

.serie { display: grid; gap: 22px; }
.serie > * { min-width: 0; }
.serie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.serie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.serie--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.chapeau { position: sticky; top: 0; z-index: 60; padding: 16px 20px; }
.chapeau__barre {
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: 20px; box-shadow: 0 12px 34px var(--bordure);
}
.chapeau__c { display: flex; align-items: center; gap: 22px; padding: 12px 14px 12px 22px; }
.chapeau__marque {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; text-transform: uppercase; text-decoration: none; flex: none;
}
.chapeau__nav { margin-left: auto; }
.chapeau__nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.chapeau__nav li { position: relative; }
.chapeau__nav > ul > li > a {
  display: inline-flex; align-items: center; padding: 10px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
}
.chapeau__nav > ul > li > a:hover { background: var(--fond-2); }
.chapeau__act { display: flex; align-items: center; gap: 14px; flex: none; }
.chapeau__act .pil { padding: 12px 20px; }
.chapeau__bascule { display: none; }

.volet {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 5;
  display: none; align-items: flex-start; gap: 26px; padding: 20px 22px;
  
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 18px;
  box-shadow: 0 18px 40px var(--bordure);
}

.volet__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.volet__vitPh { min-height: 0; height: 128px; width: 100%; border-radius: 14px; overflow: hidden; }
.volet__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.volet__vitN { font-size: 16px; line-height: 1.3; }
.volet__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.volet__vitZ { font-size: 14px; font-weight: 600; color: var(--encre-marque, var(--marque)); text-decoration: none; justify-self: start; }
.a-volet:hover .volet, .a-volet:focus-within .volet { display: flex; }
.a-volet:hover > a .chev, .a-volet:focus-within > a .chev { transform: translateY(1px) rotate(-135deg); }
.volet__col { display: grid; gap: 7px; min-width: 190px; }
.volet__t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.volet__col a { text-decoration: none; font-size: 14px; padding: 2px 0; }
.volet__col a:hover { color: var(--encre-marque, var(--marque)); }

.fil { border-bottom: 1px solid var(--bordure); }
.fil ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding-block: 14px; font-size: 12px; letter-spacing: .05em; }
.fil li { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); }
.fil li + li::before {
  content: ""; width: 5px; height: 5px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.fil a { text-decoration: none; }
.fil a:hover { color: var(--encre-marque, var(--marque)); }

.affiche { position: relative; margin-top: -90px; color: var(--fond); }

.fil + .affiche { margin-top: 0; }

.affiche:has(+ .prise) { padding-bottom: 204px; }
.affiche__scene { position: relative; padding: 190px 0 96px; overflow: hidden; }
.fil + .affiche .affiche__scene { padding-top: 96px; }

@media (min-width: 1101px) {
  .affiche__scene { min-height: 760px; display: flex; align-items: flex-start; padding-top: 300px; }
  
  .affiche__scene .mot--geant { font-size: clamp(34px, 3.6vw, 52px); }
}
.affiche__fond { position: absolute; inset: 0; }
.affiche__fond::after { content: ""; position: absolute; inset: 0; background: var(--texte); opacity: .62; }
.affiche__fond .vue { height: 100%; background: var(--texte); }

.affiche__fond .vue > span { opacity: .34; }
.affiche__c { position: relative; display: grid; gap: 20px; justify-items: start; max-width: 1240px; width: 100%; }
.affiche .eti { color: var(--fond); }
.affiche .eti::before { background: var(--fond); }
.affiche__x { margin: 0; max-width: 620px; font-size: 17px; opacity: .86; }
.affiche__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.affiche__at {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .14); width: 100%;
  background: var(--texte); color: var(--fond);
}
.affiche__at > li {
  flex: 1 1 22%; min-width: min(100%, 200px); min-height: 0;
  padding: 14px 22px 0 0; display: grid; gap: 5px;
}
.affiche__at-t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.affiche__at em { font-style: normal; font-size: 13px; opacity: .8; }

.prise { background: var(--marque); color: var(--sur-marque); padding: 92px 0; }
.affiche + .prise { padding-top: 0; }

.prise__annonce { max-width: 780px; margin: 0 auto 44px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.prise__annonce .eti { color: var(--sur-marque); }
.affiche + .prise .large > :first-child { margin-top: -108px; position: relative; z-index: 2; }
.prise__panneau {
  background: var(--texte); color: var(--fond);
  border-radius: 32px; padding: 44px;
  display: flex; flex-wrap: wrap; gap: 40px;
}
.prise__panneau > * { min-width: 0; }

.prise__forme { flex: 1 1 52%; min-width: min(100%, 300px); }
.prise__cote { flex: 1 1 32%; min-width: min(100%, 260px); display: grid; gap: 18px; align-content: start; }
.prise__x { margin: 0; opacity: .74; }
.prise__forme { display: flex; flex-wrap: wrap; gap: 14px; align-content: start; }
.champ { flex: 1 1 44%; min-width: min(100%, 200px); display: grid; gap: 7px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.champ--long { flex-basis: 100%; }
.champ input, .champ textarea, .plaque__forme input, .plaque__forme textarea {
  width: 100%; font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal;
  padding: 13px 16px; border-radius: 14px; border: 1px solid var(--bordure);
  background: transparent; color: inherit;
}
.prise__forme .pil { flex: 1 1 100%; }
.prise__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }
.prise__pied > .pil { flex: 0 0 auto; }
.prise__pied > .pil--plein { flex: 1 1 200px; width: auto; }
.mention { flex: 1 1 100%; margin: 0; font-size: 12px; opacity: .7; }

.nap { display: grid; gap: 22px; }
.nap__u { display: grid; gap: 3px; min-width: 0; }
.nap__t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.nap__l { text-decoration: none; font-weight: 600; }

.bande { background: var(--marque); color: var(--sur-marque); padding: 92px 0; }
.raison { position: relative; border-radius: 24px; padding: 30px; display: grid; gap: 12px; align-content: start; }
.raison::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sur-marque); opacity: .14; }
.raison > * { position: relative; }
.bande .tuile { background: var(--sur-marque); color: var(--encre-marque, var(--marque)); }
.raison__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 17px; }
.raison__x { margin: 0; opacity: .86; }
.bande .points li { opacity: .86; }

.lignes { border-top: 1px solid var(--bordure); }
.ligne {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 26px 4px; border-bottom: 1px solid var(--bordure); text-decoration: none;
}
.ligne:hover .ligne__t { color: var(--encre-marque, var(--marque)); }
.ligne__n { font-size: 12px; letter-spacing: .16em; opacity: .6; flex: none; }
.ligne__t {
  flex: 0 1 auto; min-width: 0;
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(19px, 2.2vw, 30px); letter-spacing: -.02em;
}
.ligne__x { flex: 1 1 260px; min-width: 0; font-size: 14px; opacity: .66; }
.ligne__l {
  flex: none; margin-left: auto; display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px dashed var(--marque); padding-bottom: 3px;
}

.paire { display: flex; flex-wrap: wrap; gap: 26px; align-items: stretch; margin-bottom: 26px; }
.paire:last-child { margin-bottom: 0; }
.paire--inv { flex-direction: row-reverse; }
.paire > * { flex: 1 1 46%; min-width: min(100%, 300px); }
.paire__mot {
  background: var(--fond-2); border-radius: 28px; padding: 46px 40px;
  border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
  display: grid; gap: 16px; justify-items: center; text-align: center; align-content: center;
}
.paire__vue .vue { height: 100%; padding-top: 0; min-height: 300px; }
.paire__vue .vue img, .paire__vue .vue > span { position: absolute; }

.duo { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.duo > * { flex: 1 1 44%; min-width: min(100%, 300px); }
.duo__d, .duo__g { display: grid; gap: 16px; align-content: center; justify-items: start; }
.duo--inv { flex-direction: row-reverse; }

.duo__g > .vue, .duo__d > .vue { justify-self: stretch; }

.pile { display: grid; gap: 14px; align-content: start; }
.pile__u { display: flex; gap: 16px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--bordure); }
.pile__u > div { min-width: 0; }
.pile__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px; display: block; }
.pile__x { margin: 4px 0 0; color: var(--texte-doux); font-size: 15px; }
.pile__val { display: flex; align-items: baseline; gap: 12px; }
.pile__val b { font-family: 'Archivo', system-ui, sans-serif; font-size: 40px; letter-spacing: -.03em; }
.pile__val span { color: var(--texte-doux); font-size: 14px; }

.ruban { background: var(--fond-2); border-block: 1px solid var(--bordure); overflow-x: clip; padding: 20px 0; }
.ruban__piste { display: flex; gap: 54px; white-space: nowrap; width: max-content; animation: file 34s linear infinite; }
.ruban__u { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; color: var(--texte-doux); }
@keyframes file { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ruban__piste { animation: none; } }

.carte {
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 24px;
  padding: 28px; display: grid; gap: 10px; align-content: start;
}
.carte--mince { padding: 24px; }
.carte__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.carte__x { margin: 0; color: var(--texte-doux); font-size: 15px; }
.carte__v { font-family: 'Archivo', system-ui, sans-serif; font-size: 34px; letter-spacing: -.03em; font-weight: 800; }
.carte__v i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--texte-doux); }
.marqueur {
  justify-self: start; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--fond-2); color: var(--texte-doux);
}
.nu { display: grid; gap: 10px; align-content: start; }

.balises { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.balises li { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordure); color: var(--texte-doux); }
.points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.points li { position: relative; padding-left: 20px; font-size: 15px; color: var(--texte-doux); }
.points li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--marque); }
.bloc--nuit .points li, .bloc--nuit .carte__x { color: var(--fond); opacity: .74; }

.jetons { display: flex; flex-wrap: wrap; gap: 10px; }
.jeton {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure);
  font-size: 14px;
}
.jeton em { font-style: normal; font-size: 12px; color: var(--texte-doux); }
.jeton:hover { border-color: var(--marque); color: var(--encre-marque, var(--marque)); }

.marches { position: relative; }
.marche { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--bordure); }
.marche__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.marche__x { margin: 0; color: var(--texte-doux); font-size: 15px; }
.relais {
  margin-top: 34px; padding: 26px 30px; border-radius: 24px; background: var(--fond-2);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.relais > * { min-width: 0; }

.compte__u { display: grid; gap: 6px; padding-left: 22px; border-left: 1px solid var(--bordure); }
.compte__v { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.04em; }
.compte__l { font-size: 13px; color: var(--texte-doux); }

.adresse { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; width: 100%; }
.adresse li { padding: 11px 0; border-bottom: 1px solid var(--bordure); font-size: 15px; }

.debord { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.debord__piste { display: flex; gap: 22px; padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px)); width: max-content; }
.oeuvre { flex: 0 0 clamp(250px, 46vw, 470px); scroll-snap-align: center; display: grid; gap: 16px; }
.oeuvre__c { display: grid; gap: 8px; justify-items: start; }
.oeuvre__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 17px; }
.oeuvre__x { margin: 0; color: var(--texte-doux); font-size: 15px; }

.mur { display: flex; flex-wrap: wrap; gap: 22px; align-items: start; }
.mur__col { flex: 1 1 30%; min-width: min(100%, 270px); display: grid; gap: 22px; }
.mur__col--2 { margin-top: 36px; }
.mur__col--3 { margin-top: 18px; }
.parole {
  margin: 0; background: var(--fond); border-radius: 24px; padding: 26px;
  box-shadow: 0 14px 34px var(--bordure); display: grid; gap: 14px;
}
.parole__note { color: var(--encre-marque, var(--marque)); letter-spacing: .18em; font-size: 14px; }
.parole__x { margin: 0; font-size: 15px; }
.parole__x b { font-family: 'Archivo', system-ui, sans-serif; text-transform: uppercase; font-size: 14px; }
.parole__p { display: flex; align-items: center; gap: 12px; margin: 0; }
.parole__p > span:last-child { display: grid; min-width: 0; }
.parole__av {
  width: 40px; height: 40px; flex: none; border-radius: 999px;
  display: grid; place-items: center; background: var(--marque); color: var(--sur-marque);
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800;
}
.parole__n { font-weight: 600; font-size: 14px; }
.parole__r { font-size: 12px; color: var(--texte-doux); }

.feuillet { text-decoration: none; display: grid; gap: 14px; align-content: start; }
.feuillet__c { display: grid; gap: 8px; justify-items: start; }
.feuillet__m { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--texte-doux); }
.rond { width: 20px; height: 20px; border-radius: 999px; background: var(--marque); flex: none; }
.feuillet__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 17px; }
.feuillet__x { margin: 0; color: var(--texte-doux); font-size: 15px; }
.feuillet:hover .feuillet__t { color: var(--encre-marque, var(--marque)); }

.plis { max-width: 800px; margin: 0 auto; }
.pli { border-bottom: 1px solid var(--bordure); }
.pli summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px;
}
.pli summary::-webkit-details-marker { display: none; }
.pli[open] .chev { transform: translateY(2px) rotate(-135deg); }
.pli__c { padding-bottom: 20px; }

.renvoi {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  padding: 18px 0; border-bottom: 1px solid var(--bordure);
}

.renvoi .vue { flex: none; width: 88px; padding-top: 0; height: 88px; }
.renvoi .vue img, .renvoi .vue > span { position: absolute; }
.renvoi__c { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.renvoi__m { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.renvoi:hover .carte__t { color: var(--encre-marque, var(--marque)); }

.veille { background: var(--marque); color: var(--sur-marque); padding: 56px 0; }
.veille__c { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }
.veille__mot { display: grid; gap: 10px; flex: 1 1 46%; min-width: min(100%, 280px); }
.veille .eti { color: var(--sur-marque); }
.veille .eti::before { background: var(--sur-marque); }
.veille__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(23px, 2.6vw, 34px); letter-spacing: -.03em; }
.veille__x { margin: 0; opacity: .86; }
.veille .points li { color: var(--sur-marque); opacity: .86; }
.veille .points li::before { background: var(--sur-marque); }
.veille__act { display: grid; gap: 12px; justify-items: start; flex: none; }
.veille__tel { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.03em; text-decoration: none; }

.paire { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; margin-bottom: 34px; }
.paire:last-child { margin-bottom: 0; }
.paire--inv { flex-direction: row-reverse; }
.paire > * { min-width: 0; }
.paire__dit { flex: 1 1 30%; min-width: min(100%, 260px); display: grid; gap: 14px; justify-items: start; }
.paire__cadre {
  flex: 1 1 56%; min-width: min(100%, 290px);
  padding: 16px; border-radius: 32px; background: var(--fond-2);
}
.compare {
  position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--bordure);
  aspect-ratio: 16 / 11; background: var(--fond-2); touch-action: pan-y;
}
.compare__v { position: absolute; inset: 0; }
.compare__v .vue { height: 100%; padding-top: 0; border: 0; border-radius: 0; }
.compare__v .vue img, .compare__v .vue > span { position: absolute; }
.compare__v--avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare__l {
  position: absolute; bottom: 16px; z-index: 3;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; background: var(--fond); color: var(--texte);
}
.compare__l--a { left: 16px; }
.compare__l--b { right: 16px; }
.compare__barre { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--fond); z-index: 3; }
.compare__poignee {
  position: absolute; top: 50%; left: var(--pos, 50%); z-index: 4;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 999px;
  background: var(--fond); border: 2px solid var(--marque);
}
.compare__cur {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.compare__cur:focus-visible { opacity: .001; outline: none; }
.compare:focus-within { outline: 2px solid var(--marque); outline-offset: 3px; }

.plaque {
  background: var(--marque); color: var(--sur-marque); border-radius: 32px; padding: 46px;
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
}
.plaque > * { flex: 1 1 40%; min-width: min(100%, 280px); }
.plaque__g { display: grid; gap: 12px; align-content: start; }
.plaque .eti { color: var(--sur-marque); }
.plaque .eti::before { background: var(--sur-marque); }
.plaque__x { margin: 0; opacity: .86; }
.plaque__d { display: grid; gap: 20px; justify-items: start; }
.plaque__t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.03; }
.plaque__forme { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.plaque__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.plaque__forme input, .plaque__forme textarea { flex: 1 1 200px; min-width: 0; border-color: var(--sur-marque); }
.plaque__forme input::placeholder, .plaque__forme textarea::placeholder { color: inherit; opacity: .7; }

.feuille { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.feuille--seule { max-width: 820px; margin: 0 auto; }
.feuille .vue { width: 100%; }
.feuille__meta { margin: 0; font-size: 13px; color: var(--texte-doux); }

.tete-art { display: grid; gap: 14px; justify-items: start; margin-bottom: 34px; }
.reperes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }
.reperes__t { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-marque, var(--marque)); }
.reperes a { font-size: 13px; text-decoration: none; color: var(--texte-doux); }
.reperes a:hover { color: var(--encre-marque, var(--marque)); }
.vue--tete { width: 100%; margin-bottom: 40px; }
.feuille--decalee { margin-left: 10%; max-width: 800px; }

.pied { background: var(--texte); color: var(--fond); padding: 76px 0 26px; }
.pied__appel {
  display: flex; flex-wrap: wrap; gap: 32px;
  margin-bottom: 60px; padding-bottom: 52px; border-bottom: 1px solid var(--bordure);
}
.pied__appel > * { min-width: 0; }
.pied__eti {
  flex: 0 1 auto; margin-right: auto;
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .6;
}
.pied__voeu { flex: 0 1 560px; display: grid; gap: 26px; justify-items: start; }
.pied__annonce {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1;
}
.pied__corps { display: flex; flex-wrap: wrap; gap: 44px; }
.pied__corps > * { min-width: 0; }
.pied__ident { flex: 1 1 30%; min-width: min(100%, 260px); display: grid; gap: 12px; align-content: start; }
.pied__nom { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 62px); letter-spacing: -.045em; line-height: .92; }
.pied__x { margin: 0; opacity: .7; max-width: 380px; }

.pied__pave { flex: 1 1 56%; min-width: min(100%, 300px); display: flex; flex-wrap: wrap; gap: 34px 40px; align-content: start; }
.pied__bloc { flex: 1 1 40%; min-width: min(100%, 190px); display: grid; gap: 10px; align-content: start; }
.pied__t { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pied__bloc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied__bloc a { text-decoration: none; font-size: 14px; opacity: .84; }
.pied__bloc a:hover { opacity: 1; color: var(--encre-marque, var(--marque)); }
.pied__nap li { font-size: 14px; opacity: .74; }
.pied__fin {
  margin-top: 58px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 13px; opacity: .66;
}
.pied__liens { display: flex; flex-wrap: wrap; gap: 18px; }
.pied__liens a { text-decoration: none; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.filtres > * { min-width: 0; }
.filtre {
  padding: 10px 20px; border: 1px solid var(--bordure); border-radius: 999px;
  font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--texte);
}
.filtre:hover { border-color: var(--marque); color: var(--encre-marque, var(--marque)); }
.filtre--ici {
  background: var(--marque); border-color: var(--marque); color: var(--sur-marque);
  cursor: default;
}
.filtre--ici:hover { color: var(--sur-marque); }

.piece { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.piece > * { min-width: 0; }
.piece__c { display: grid; gap: 6px; min-width: 0; }
.piece:hover .carte__t { color: var(--encre-marque, var(--marque)); }

.depuis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.depuis > * { min-width: 0; }
.depuis em {
  font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
}
.depuis b {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 1.05; color: var(--encre-marque, var(--marque));
}
.depuis i { font-style: normal; font-size: 13px; color: var(--texte-doux); }
.depuis--grand b { font-size: clamp(30px, 3.4vw, 42px); }

.nu--trait { padding-top: 18px; border-top: 2px solid var(--marque); }
.nu--trait dd { margin: 0; }

.actes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.actes > * { min-width: 0; }
.pil--nu { background: transparent; color: var(--texte); border: 1px solid var(--bordure); }
.bloc--nuit .pil--nu, .bande .pil--nu, .prise__panneau .pil--nu { color: var(--fond); border-color: rgba(255,255,255,.34); }
.affiche__at em { display: block; }

.vue--mini { width: 62px; height: 62px; padding-top: 0; flex: none; }
.vue--pas { margin: 14px 0 4px; border-radius: 16px; }

.vue--puce { width: 24px; height: 24px; flex: none; border-radius: 999px; overflow: hidden; }
.vue--puce img { width: 100%; height: 100%; object-fit: cover; }
.vue--puce span { font-size: 0; }
.lecture { margin-top: 24px; max-width: 68ch; }
.rappel { margin: 28px auto 0; max-width: 760px; padding: 24px 26px; background: var(--fond); border: 1px solid var(--bordure); border-radius: 20px; }
.rappel .carte__t { margin-top: 0; }
.rappel .actes { margin-top: 18px; }
.encadre { margin: 26px 0; padding: 22px 24px; border-left: 3px solid var(--marque); background: var(--fond-2, var(--fond)); border-radius: 0 16px 16px 0; }
.encadre .carte__t { margin-top: 0; }
.encadre .lire { margin-top: 10px; }
.mot--menu { font-size: clamp(19px, 2vw, 23px); margin-top: 28px; }
.piece__l, .feuillet__l { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-marque, var(--marque)); }
.bande__vue { margin: 0 auto 34px; max-width: 900px; }
.bande__vue .vue { border-radius: 22px; }
.plaque__vue { margin-top: 22px; }
.plaque__vue .vue { border-radius: 18px; }
.ligne .vue--mini { align-self: center; }

@media (max-width: 1024px) {
  .chapeau__bascule {
    display: grid; gap: 4px; margin-left: auto; order: 2;
    width: 44px; height: 44px; place-content: center; padding: 0;
    background: var(--fond-2); border: 1px solid var(--bordure); border-radius: 13px; cursor: pointer;
  }
  .chapeau__bascule i { display: block; width: 17px; height: 2px; background: var(--texte); }
  .chapeau__nav { order: 3; flex: 1 1 100%; margin-left: 0; display: none; }
  .chapeau--ouvert .chapeau__nav { display: block; }
  .chapeau__c { flex-wrap: wrap; padding: 12px 14px; }
  .chapeau__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .chapeau__nav > ul > li > a { justify-content: space-between; padding: 13px 8px; border-radius: 0; border-top: 1px solid var(--bordure); }
  .volet { position: static; transform: none; display: grid; gap: 12px; box-shadow: none; border: 0; padding: 4px 8px 14px; min-width: 0; max-width: none; }
  
  .volet__vit { display: none; }
  .a-volet > a .chev { transition: none; }
  .chapeau__act { order: 1; margin-left: auto; }
  .affiche__scene { padding-top: 168px; }
}

@media (max-width: 760px) {
  .bloc, .bande, .prise { padding: 62px 0; }
  .affiche__scene { padding: 156px 0 66px; }
  .affiche:has(+ .prise) { padding-bottom: 146px; }
  .prise__panneau, .plaque { padding: 30px; border-radius: 26px; }
  
  .affiche + .prise .large > :first-child { margin-top: -72px; }
  .paire__mot { padding: 32px 24px; }
  .mur__col--2, .mur__col--3 { margin-top: 0; }
  
  .ligne { gap: 10px; }
  .ligne__n, .ligne__t { flex: 1 1 100%; }
  .ligne__x { flex: 1 1 100%; }
  .ligne__l { margin-left: 0; }
  .compte__u { padding-left: 16px; }
  .pied { padding-top: 56px; }
  .serie--2, .serie--3, .serie--4 { grid-template-columns: 1fr; }
}

.eti, .jeton, .filtre { border-radius: 6px; }
.balises li, .ligne__n { border-radius: 5px; }
.points li::before, .fl { border-radius: 4px; }

.jetons li, .filtres li, .compte__l { border-radius: 999px; }

.bande__vue::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--texte) 92%, transparent) 0%,
    transparent 70%);
}
.carte__v::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(91deg,
    color-mix(in srgb, var(--texte) 92%, transparent) 0%,
    transparent 100%);
}

.carte, .feuille, .encadre { box-shadow: 0 4px 2px -2px color-mix(in srgb, var(--texte) 8%, transparent); }

.carte { position: relative; }
.carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 10%, transparent);
}
.encadre { position: relative; }
.encadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent);
}

.affiche__fond {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 65%, transparent 100%);
}
.compte__v {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
}

.bande__vue, .carte__v { position: relative; }

@media (max-width: 480px) {
  .chapeau__c { min-width: 0; }
  .chapeau__act { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; }
  .chapeau__act .pil { padding: 10px 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.prise__panneau .lire { color: var(--fond); opacity: .72; }

.bande .points li { color: var(--sur-marque); }

.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
header [data-cta-devis="clone"],header [data-cta-tel="clone"]{white-space:nowrap;flex:0 0 auto}
header:has([data-cta-devis="clone"]),header:has([data-cta-tel="clone"]){gap:16px}
header:has([data-cta-devis="clone"]) nav,header:has([data-cta-tel="clone"]) nav{gap:18px}
header [data-cta-devis="clone"]{margin-left:8px;padding-inline:16px}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-accent,var(--accent,#c62828));font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}
.zx-certs__lg{flex:0 0 auto;width:auto;max-width:150px;height:60px;object-fit:contain;background:#fff;border-radius:8px;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.zx-mesh{padding:2.6rem 1rem;background:var(--fond-2,#f6f6f4)}
.zx-mesh__in{max-width:1100px;margin:0 auto}
.zx-mesh__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-accent,var(--accent,#c62828));font-weight:700}
.zx-mesh__in--suite{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--bordure,rgba(0,0,0,.08))}
[class$="__chev"],[class$="__chevron"],[class*="__chev "],[class*="__chevron "]{font-size:14px!important;line-height:1;opacity:.9!important;vertical-align:middle}
.zx-mesh__h{margin:0 0 1rem;font-size:1.5rem;color:var(--texte,#1a1a1a)}
.zx-mesh__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.5rem 1.4rem}
.zx-mesh__u a{color:var(--texte,#1a1a1a);text-decoration:underline;text-underline-offset:3px;font-size:.98rem}
.zx-mesh__u a:hover{color:var(--encre-marque,var(--marque,#1a1a1a))}

[data-role="avantApres"] :has(> figure:nth-child(2)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
[data-role="avantApres"] :has(> figure:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
[data-role="avantApres"] :has(> figure:nth-child(4)){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:8px}
[data-role="avantApres"] :has(> figure:nth-child(4)) > figure{flex:0 0 calc((100% - 48px)/3);min-width:280px;scroll-snap-align:start}
[data-role="avantApres"] :has(> figure:nth-child(2)) > figure{margin:0;min-width:0;max-width:none;flex-basis:auto}
@media (max-width:900px){[data-role="avantApres"] :has(> figure:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){[data-role="avantApres"] :has(> figure:nth-child(2)){grid-template-columns:minmax(0,1fr)}}

html,body{overflow-x:clip;max-width:100%}
img,video,iframe,table,svg{max-width:100%}

.pil--clair,
.vue,
.bloc--doux,
.chapeau__barre,
.chapeau__nav > ul > li > a:hover,
.volet,
.affiche .eti::before,
.paire__mot,
.ruban,
.carte,
.marqueur,
.jeton,
.relais,
.parole,
.paire__cadre,
.compare,
.compare__l,
.compare__barre,
.compare__poignee,
.rappel,
.chapeau__bascule,
.zx-certs__lg { --texte-doux: var(--texte-doux-sol, var(--texte-doux)); --encre-accent: var(--encre-accent-sol, var(--accent)); color: var(--texte) }

.bloc--nuit,
.affiche__fond::after,
.affiche__fond .vue,
.affiche__at,
.prise__panneau,
.pied,
.chapeau__bascule i { --texte-doux: var(--texte-doux-inverse); --encre-accent: var(--encre-accent-inverse, var(--accent)); --encre-marque: var(--fond); color: var(--fond) }

.pil--marque,
.tuile,
.bloc--nuit .lire,
.bloc--nuit .tete__x,
.bloc--nuit .eti,
.tete--clair .eti,
.tete--clair .tete__x,
.tete--clair .mot em,
.affiche .mot em,
.affiche,
.affiche .eti,
.prise,
.prise__annonce .eti,
.bande,
.bloc--nuit .points li,
.bloc--nuit .carte__x,
.parole__av,
.veille,
.veille .eti,
.veille .points li,
.plaque,
.plaque .eti,
.filtre--ici,
.filtre--ici:hover,
.bloc--nuit .pil--nu,
.bande .pil--nu,
.prise__panneau .pil--nu,
.prise__panneau .lire,
.bande .points li { --encre-accent: var(--encre-accent-inverse, var(--accent)); --encre-marque: var(--encre-accent-inverse, var(--fond)) }

.eti::before,
.pil--marque,
.tuile,
.prise,
.bande,
.points li::before,
.parole__av,
.rond,
.veille,
.plaque,
.filtre--ici { --texte-doux: var(--texte-doux-sur-marque, var(--sur-marque)); --encre-accent: var(--encre-accent-inverse, var(--sur-marque)); --encre-marque: var(--sur-marque) }

.zx-sur{color:var(--encre-accent,var(--accent))}