*, *::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 Geist, 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden;
}

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

h1, h2, h3, .display {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: .96;
  margin: 0;
  color: var(--texte);
  text-transform: uppercase;
}
h1 { font-size: clamp(46px, 8.4vw, 116px); }
h2 { font-size: clamp(34px, 5.2vw, 64px); }

h1[data-rang="2"] { font-size: clamp(34px, 5.2vw, 64px); }
h3 { font-size: clamp(24px, 2.6vw, 40px); letter-spacing: -.02em; }
h4 { font-size: 19px; margin: 0; font-weight: 500; letter-spacing: -.01em; }

a { color: inherit; }

.mot {
  margin: 0;
  color: var(--texte-doux);
  font-size: 16px;
  line-height: 1.7;
}
.mot + .mot { margin-top: 14px; }
.mot--fort { font-size: 18px; line-height: 1.6; }

.etiq {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:var(--encre-marque,var(--marque));
}
.etiq::before {
  content: '';
  width: 22px;
  height: 2px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  flex: none;
}

.cadre { width: min(1240px, 100% - 48px); margin-inline: auto; }

.tranche { padding: 104px 0; }
.tranche--mince { padding: 68px 0; }
.tranche--grise { background: var(--fond-2); }
.tranche--nuit { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--sur-bande); }
.tranche--nuit h1, .tranche--nuit h2, .tranche--nuit h3, .tranche--nuit h4 { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.tranche--nuit .mot { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.tranche--nuit .etiq { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.tranche--nuit .etiq::before { background:var(--marque);--sur-bande:var(--sur-marque); }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 26px 15px;
  border-radius: 6px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--marque);
  transition: background .18s, color .18s, border-color .18s;
}

.bouton { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
.bouton__fl { font-size: 15px; line-height: 1; transform: translateY(-1px); }
.bouton:hover { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); border-color: var(--texte); color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.bouton--vide {
  background: transparent;
  
  --sur-bande: inherit;
  
  color: var(--sur-bande, var(--texte));
  border-color: var(--bordure);
}
.bouton--vide:hover { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); border-color: var(--texte); color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.tranche--nuit .bouton--vide { color: var(--sur-bande, var(--sur-texte, var(--fond))); border-color: color-mix(in srgb, var(--fond) 34%, transparent); }
.tranche--nuit .bouton--vide:hover { background: var(--fond); color: var(--texte); border-color: var(--fond); }

.vue {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vue img { width: 100%; height: 100%; object-fit: cover; }
.vue > span {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--texte-doux);
  font-family: Geist, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.vue--haute { min-height: 0; aspect-ratio: 2.71; }
.vue--bande { min-height: 0; aspect-ratio: 2.57; }
.vue--basse { min-height: 0; aspect-ratio: 2.08; }

.enseigne {
  position: sticky;
  top: 0;
  z-index: 60;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
  border-bottom: 1px solid color-mix(in srgb, var(--fond) 12%, transparent); color: var(--sur-bande); }
.enseigne__rang {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 78px;
}
.enseigne__nom {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  letter-spacing: .01em;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  flex: none;
}
.enseigne__pave {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  flex: none; color: var(--sur-bande); }

.enseigne__g {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  min-width: 0;
  flex: 1 1 auto;
}
.enseigne__d { flex: none; display: flex; align-items: center; gap: 30px; }
.enseigne__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  text-decoration: none;
  white-space: nowrap;
}
.enseigne__tel:hover { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.enseigne__telIc { color: var(--sur-bande, var(--sur-texte, var(--fond))); font-size: 15px; }
.enseigne__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
}.deroul__tete {
  padding: 9px 13px;
  border-radius: 6px;
  color: color-mix(in srgb, var(--fond) 82%, transparent);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.enseigne__nav > a {
  padding: 9px 13px;
  border-radius: 6px;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}.deroul__tete:hover { color: var(--fond); background: color-mix(in srgb, var(--fond) 10%, transparent); }
.enseigne__nav > a:hover { color: var(--sur-bande, var(--sur-texte, var(--fond))); background: color-mix(in srgb, var(--fond) 10%, transparent); }

.deroul { position: relative; }
.deroul__chev { font-size: 10px; opacity: .7; }
.deroul__panneau {
  
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 5;
}
.deroul:hover .deroul__panneau,
.deroul:focus-within .deroul__panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.deroul__grille {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .16);
  
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.deroul__col { flex: 0 0 auto; min-width: 0; }

.deroul__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.deroul__vitPh { min-height: 0; aspect-ratio: 1.88; width: 100%; border-radius: 10px; overflow: hidden; }
.deroul__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.deroul__vitN { font-size: 16px; line-height: 1.3; color: var(--texte); }
.deroul__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.deroul__vitZ { font-size: 14px; font-weight: 600; color:var(--encre-marque,var(--marque)); text-decoration: none; justify-self: start; }
.deroul__titre {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:var(--encre-marque,var(--marque));
  margin-bottom: 10px;
}
.deroul__lien {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.deroul__lien:hover { color:var(--encre-marque,var(--marque)); }

.enseigne__bouton {
  display: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fond) 30%, transparent);
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  border-radius: 6px;
  width: 42px;
  height: 42px;
  font-size: 18px;
  cursor: pointer;
  flex: none;
}

.fil {
  background: var(--fond-2);
  border-bottom: 1px solid var(--bordure);
  padding: 15px 0;
  font-size: 13px;
  color: var(--texte-doux);
}
.fil__piste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fil__pas {
  color: var(--texte-doux);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}
.fil__pas:hover { color:var(--encre-marque,var(--marque)); }
.fil__ici {
  color:var(--encre-marque,var(--marque));
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  min-width: 0;
}
.fil__sep { opacity: .45; font-size: 14px; }

.ouverture { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); padding: 74px 0 0; overflow: hidden; color: var(--sur-bande); }
.ouverture__rang {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.ouverture__texte { flex: 0 1 420px; min-width: 0; display: flex; flex-direction: column; isolation: isolate; }
.ouverture__d { min-width: 0; }

.ouverture__accent { position: relative; isolation: isolate; overflow: hidden; margin-top: 26px; padding-bottom: 8px; }
.ouverture h1 { color: var(--sur-bande, var(--sur-texte, var(--fond))); margin-top: 22px; }
.ouverture .titre-accent { color: var(--sur-bande, var(--sur-texte, var(--fond))) !important; }

.ouverture h1 .titre-accent { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .6); }

@media (min-width: 1001px) {
  .ouverture h1 { font-size: 58px; }
}
.ouverture__sous {
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.ouverture__actes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.ouverture__atouts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

.ouverture__scene {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  align-self: stretch;
  height: clamp(560px, 48vw, 760px);
}
.ouverture__scene .vue { min-height: 0; height: 100%; width: 100%; border: 0; border-radius: 10px 10px 0 0; }
.ouverture__pave {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 22%, 260px);
  height: 92px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  border-radius: 10px 0 0 0; color: var(--sur-bande); }

.jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.jeton {
  display: inline-block;
  padding: 8px 14px 6px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.tranche--nuit .jeton,
.ouverture .jeton {
  background: transparent; --sur-bande: inherit; 
  border-color: color-mix(in srgb, var(--fond) 26%, transparent);
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
}

.jeton--fiche {
  flex: 1 1 30%;
  min-width: min(240px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 15px 18px;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
}
.jeton--fiche > * { min-width: 0; }
.jeton--fiche b { font-size: 15px; color: inherit; }
.jeton--fiche span { font-size: 13px; opacity: .82; }

.chapo { max-width: 780px; }
.chapo h2 { margin-top: 18px; }
.chapo .mot { margin-top: 18px; }
.chapo--centre { max-width: 780px; margin-inline: auto; text-align: center; }
.chapo--centre .etiq { justify-content: center; }

.chapo--barre {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  justify-content: space-between;
}
.chapo__g { flex: 1 1 480px; min-width: 0; }
.chapo__d { flex: 1 1 320px; min-width: 0; margin-top: 0; }

.incr {
  display: inline-block;
  vertical-align: -0.16em;
  width: clamp(46px, 5.2vw, 98px);
  height: clamp(30px, 3.2vw, 46px);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 2px;
}
.incr img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ouverture h1 .incr { width: clamp(64px, 8vw, 175px); height: clamp(40px, 5vw, 71px); }

.disque {
  position: absolute;
  border-radius: 100%;
  background:var(--marque);--sur-bande:var(--sur-marque);
  z-index: 0;
  pointer-events: none; color: var(--sur-bande); }

.disque--grand { width: 220px; height: 220px; right: -70px; top: -55px; z-index: -1; }
.disque--moyen { width: 309px; height: 309px; right: -60px; bottom: -90px; }
@media (max-width: 900px) {
  
  .disque:not(.disque--petit) { display: none; }
}

.duo { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; }
.duo > * { flex: 1 1 48%; min-width: min(100%, 380px); }
.duo--haut { align-items: flex-start; }
.duo--inv > *:first-child { order: 2; }

.puces { list-style: none; margin: 18px 0 0; padding: 0; }
.puces li {
  position: relative;
  padding-left: 26px;
  margin-top: 10px;
  color: var(--texte-doux);
  font-size: 15px;
}
.puces li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background:var(--marque);--sur-bande:var(--sur-marque);
}
.puces a { color: inherit; text-decoration: none; }
.puces a:hover { color:var(--encre-marque,var(--marque)); }
.tranche--nuit .puces li { color: var(--sur-bande, var(--sur-texte, var(--fond))); }

.fiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.fiche__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
}
.fiche__c { min-width: 0; }
.fiche__c h4 { font-size: 20px; }
.fiche__c .mot { margin-top: 8px; }
.preuve {
  display: flex; flex-wrap: wrap; gap: 34px; align-items: center; margin-top: 46px;
  padding-top: 40px; border-top: 1px solid var(--bordure);
}
.preuve__c { flex: 1 1 38%; min-width: min(100%, 300px); }
.preuve__act { margin-top: 22px; }
.preuve__vue { flex: 1 1 52%; min-width: min(100%, 300px); }
.fiche {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
}
.tranche--grise .fiche { background: var(--fond); }
.fiche:hover { border-color:var(--encre-marque,var(--marque)); }
.meta {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.vue--carre { min-height: 0; aspect-ratio: 1 / 1; }

.paves {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 46px;
  align-items: flex-start;
  justify-content: center;
}
.pave {
  flex: 1 1 22%;
  min-width: min(100%, 230px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
.pave--court { min-height: 209px; }
.pave--moyen { min-height: 219px; }
.pave--haut { min-height: 359px; justify-content: space-between; }
.pave__rond {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: none;
}
.pave h4 { font-size: 20px; }

.bandes { display: flex; flex-direction: column; gap: 26px; margin-top: 46px; }
.bande {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
  padding: 24px;
  border-radius: 10px;
  background: var(--fond-2);
}
.bande--inv { flex-direction: row-reverse; }
.bande__vue { flex: 1 1 40%; min-width: min(100%, 280px); }
.bande__vue .vue { min-height: 0; aspect-ratio: 1.5; }
.bande__c { flex: 1 1 46%; min-width: min(100%, 280px); }
.bande__no {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 22px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
  margin-bottom: 8px;
}
.bande__sig { display: block; margin-top: 16px; color:var(--encre-marque,var(--marque)); }
.bande__c h3 { font-size: clamp(24px, 2.4vw, 32px); }
.bande__c .mot { margin-top: 12px; }

.insignes { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.insigne {
  flex: 1 1 23%;
  min-width: min(100%, 220px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 10px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  text-align: center;
  align-items: center;
}
.insigne__v { width: 96px; max-width: 100%; }

.insigne__v .vue { min-height: 0; border-radius: 999px; }
.insigne__c { min-width: 0; }
.insigne__c h3 { font-size: 19px; }
.insigne__m { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }

.baremes { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 44px; }
.bareme {
  flex: 1 1 30%;
  min-width: min(100%, 260px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  padding: 26px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
.bareme__m {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color:var(--encre-marque,var(--marque));
}
.bareme__c { flex: 1 1 160px; min-width: 0; }
.bareme__c h3 { font-size: 19px; }

.matieres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.matiere {
  min-width: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: flex-start;
}
.matiere .vue { min-height: 0; aspect-ratio: 1.49; border: 0; border-radius: 10px; width: 100%; }
.matiere__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .1) 52%, transparent 76%);
  pointer-events: none;
}
.matiere__c { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.matiere__c h3 { color: #FFFFFF; font-size: 22px; }
.matiere__c .mot { color: rgba(255, 255, 255, .82); margin-top: 8px; font-size: 14px; }

.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 46px; align-items: stretch; }
.colonne {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
.colonne--avant { border-color:var(--encre-marque,var(--marque)); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.colonne__ruban {
  position: absolute;
  top: -13px;
  left: 30px;
  padding: 5px 12px;
  border-radius: 100px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.colonne h3 { font-size: 22px; }
.colonne .puces { margin-top: 4px; }
.colonne__bas { margin-top: auto; padding-top: 16px; }

.passes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.passe {
  min-width: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  text-decoration: none;
  color: inherit;
}
.passe:hover { border-color:var(--encre-marque,var(--marque)); }
.passe__v { flex: none; width: 74px; }
.passe__v .vue { min-height: 0; height: 74px; border-radius: 8px; }
.passe__c { flex: 1 1 auto; min-width: 0; }
.passe__c h3 { font-size: 17px; }
.passe__fl { flex: none; color:var(--encre-marque,var(--marque)); font-size: 18px; }

.parutions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 46px; }
.parution {
  flex: 1 1 30%;
  min-width: min(100%, 280px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
}
.parution:hover { border-color:var(--encre-marque,var(--marque)); }
.parution__v { min-width: 0; }
.parution__v .vue { min-height: 0; aspect-ratio: 1.33; }
.parution h3 { font-size: 21px; }
.parution__fl { margin-top: auto; color:var(--encre-marque,var(--marque)); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

.offre__rang { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.offre__k {
  flex: 1 1 23%;
  min-width: min(100%, 250px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
  min-height: 343px;
}
.offre__k:hover { border-color:var(--encre-marque,var(--marque)); }
.offre__kv { min-width: 0; }
.offre__kv .vue { min-height: 0; aspect-ratio: 2.08; }
.offre__k h3 { font-size: 24px; }
.offre__k .mot { font-size: 15px; }
.offre__k .offre__lib { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; }
.offre__k .offre__fl { width: 34px; height: 34px; font-size: 15px; }

.offre { margin-top: 46px; border-top: 1px solid var(--bordure); }
.offre__l {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
  transition: padding-left .2s;
}
.offre__l:hover { padding-left: 12px; }
.offre__no {
  flex: none;
  width: 62px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  color:var(--encre-marque,var(--marque));
}

.offre__l h3 { flex: 1 1 300px; min-width: 0; font-size: clamp(22px, 2.2vw, 32px); }
.offre__l > .mot { flex: 0 1 320px; min-width: 0; } 
.offre__fl {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color:var(--encre-marque,var(--marque));
  font-size: 17px;
}
.offre__l:hover .offre__fl { background:var(--marque);--sur-bande:var(--sur-marque); color: var(--sur-bande, var(--sur-marque)); border-color:var(--encre-marque,var(--marque)); }

.compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  overflow: hidden;
}
.compteur {
  flex: 1 1 24%;
  min-width: min(100%, 200px);
  padding: 32px 28px;
  border-right: 1px solid var(--bordure);
}
.compteur:last-child { border-right: 0; }
.compteur b {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  color: var(--texte);
  letter-spacing: -.02em;
}
.compteur span { display: block; margin-top: 10px; font-size: 14px; color: var(--texte-doux); }
.tranche--nuit .compteurs { border-color: color-mix(in srgb, var(--fond) 20%, transparent); }
.tranche--nuit .compteur { border-right-color: color-mix(in srgb, var(--fond) 20%, transparent); }
.tranche--nuit .compteur b { color: var(--sur-bande, var(--sur-texte, var(--fond))); }

.seo { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; }
.seo > * { flex: 1 1 48%; min-width: min(100%, 380px); }
.seo + .seo { margin-top: 86px; }

.seo--inv .seo__vue { order: 2; }
.seo__no {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
}
.seo__act { margin-top: 26px; }
.etiq--bas { display: inline-block; margin-top: 14px; }
.seo h2 { margin-top: 12px; }
.seo__mots { margin-top: 20px; }
.seo .vue { min-height: 0; aspect-ratio: 2.32; }

.methode { display: flex; flex-direction: column; margin-top: 48px; border-top: 1px solid var(--bordure); }
.pas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 34px 0;
  border-bottom: 1px solid var(--bordure);
}
.pas__c { flex: 1 1 46%; min-width: min(100%, 280px); }
.pas__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 52px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
}
.pas h3 { font-size: 24px; }
.pas .mot { margin-top: 10px; }
.pas--appel {
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding: 40px;
  border-radius: 10px;
  border-bottom: 0;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--sur-bande); }
.pas--appel h3 { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.pas--appel .mot { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.pas--appel .bouton { flex: none; }

.temoins { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.temoin {
  flex: 1 1 30%;
  min-width: min(100%, 280px);
  padding: 30px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
}
.temoin__et { color:var(--encre-marque,var(--marque)); letter-spacing: 3px; font-size: 14px; }
.temoin__mot { margin-top: 14px; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }
.temoin__pied { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }
.temoin__av {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 22px;
  flex: none;
}
.temoin__nom { font-weight: 500; font-size: 15px; }
.temoin__role { font-size: 13px; color: var(--texte-doux); }
.temoin--maitre {
  flex: 1 1 100%;
  min-height: 380px;
  padding: clamp(30px, 4vw, 62px);
  justify-content: center;
}
.temoin--maitre .temoin__mot {
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.28;
  color: var(--texte);
  max-width: 900px;
}

.projs { margin-top: 46px; border-top: 1px solid var(--bordure); }
.proj {
  display: flex;
  flex-wrap: wrap;
  gap: 42px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid var(--bordure);
}
.proj__c { flex: 1 1 46%; min-width: min(100%, 300px); }
.proj__no {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  color:var(--encre-marque,var(--marque));
  margin-bottom: 10px;
}
.proj__c h3 { font-size: clamp(26px, 3vw, 40px); margin-top: 8px; }
.proj__c .mot { margin-top: 14px; }
.proj__l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:var(--encre-marque,var(--marque));
  text-decoration: none;
}
.proj__l:hover { text-decoration: underline; }
.proj__g { flex: 1 1 46%; min-width: min(100%, 300px); display: flex; flex-wrap: wrap; gap: 16px; }
.proj__v { min-width: 0; }
.proj__v--large { flex: 1 1 100%; }
.proj__v--large .vue { min-height: 0; aspect-ratio: 1.49; }
.proj__v--tuile { flex: 1 1 44%; min-width: min(100%, 180px); }
.proj__v--tuile .vue { min-height: 0; aspect-ratio: 1.49; }

.communes { display: flex; flex-direction: column; margin-top: 44px; border-top: 1px solid var(--bordure); }
.commune {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--bordure);
  text-decoration: none;
  color: inherit;
  transition: padding-left .25s;
}
.commune:hover { padding-left: 14px; }
.commune__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--texte-doux);
}
.commune__v { flex: none; width: 62px; }
.commune__v .vue { min-height: 0; border: 0; border-radius: 8px; }
.commune__fl { flex: none; color:var(--encre-marque,var(--marque)); font-size: 17px; line-height: 1; }
.commune__n {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.commune:hover .commune__n { color:var(--encre-marque,var(--marque)); }
.commune__tag {
  flex: none;
  font-family: Geist, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 4px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
}

.plan { display: flex; flex-wrap: wrap; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--bordure); }
.plan__panneau { flex: 1 1 34%; min-width: min(100%, 300px); padding: 40px; background: var(--fond); }
.plan__fond { flex: 1 1 56%; min-width: min(100%, 300px); }
.plan .vue { min-height: 0; aspect-ratio: 1.49; border: 0; border-radius: 0; }
.plan__lignes {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--texte-doux);
}
.plan__nom { font-size: clamp(24px, 2.4vw, 32px); }

.urgence { display: flex; flex-wrap: wrap; gap: 30px 44px; align-items: center; }
.urgence__tel {
  flex: 1 1 100%;
  order: -1;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -.01em;
  color:var(--encre-marque,var(--marque));
  text-decoration: none;
}
.urgence__c { flex: 1 1 50%; min-width: min(100%, 320px); }
.urgence__p { flex: 1 1 34%; min-width: min(100%, 260px); }
.urgence__p .puces { margin-top: 0; }
.urgence__act { margin-top: 24px; }
.disque--petit {
  position: static;
  flex: none;
  width: 84px;
  height: 84px;
  order: -2;
}

.compare {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fond-2);
  aspect-ratio: 16 / 9;
  min-height: 260px;
  touch-action: pan-y;
}
.compare__vue { position: absolute; inset: 0; }
.compare__vue .vue { height: 100%; min-height: 0; border: 0; border-radius: 0; }

.compare__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__lab {
  position: absolute;
  top: 16px;
  padding: 7px 13px 5px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .62);
  color: #FFFFFF;
  z-index: 3;
}
.compare__lab--avant { left: 16px; }
.compare__lab--apres { right: 16px; }
.compare__barre {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none; color: var(--sur-bande); }
.compare__poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color: var(--sur-bande, var(--sur-marque));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; }
.compare__range::-moz-range-thumb { width: 2px; height: 100%; border: 0; background: transparent; }
.compare__range:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }

.duels { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 40px 32px; margin-top: 46px; }
.duel__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 20px; }
.duel__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
}
.duel__tete h3 { flex: 1 1 300px; min-width: 0; font-size: clamp(24px, 2.4vw, 32px); }
.duel__tete .mot { flex: 1 1 100%; min-width: 0; }
.duel__tete .jetons { flex: 1 1 100%; margin-top: 0; }

.depliants { margin-top: 28px; }
.depli { border-bottom: 1px solid var(--bordure); padding: 4px 0; }
.depli summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 23px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--texte);
}
.depli summary::-webkit-details-marker { display: none; }
.depli__plus {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: Geist, sans-serif;
  font-size: 22px;
  color:var(--encre-marque,var(--marque));
}
.depli[open] .depli__plus { transform: translateY(-50%) rotate(45deg); }
.depli p { margin: 0 0 20px; color: var(--texte-doux); font-size: 15px; max-width: 74ch; }

.appel {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
  border-radius: 10px;
  padding: 54px;
  position: relative;
  overflow: hidden; color: var(--sur-bande); }
.appel > * { flex: 1 1 48%; min-width: min(100%, 360px); }
.appel__c, .appel__d { min-width: min(100%, 320px); position: relative; z-index: 1; }
.appel h2 { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.appel .etiq { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.appel .mot { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.appel__form { display: flex; flex-wrap: wrap; gap: 12px; }
.appel__form input, .appel__form textarea {
  flex: 1 1 200px;
  min-width: 0;
  padding: 15px 16px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--fond) 24%, transparent);
  background: transparent;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  font: 400 15px Geist, sans-serif;
  resize: vertical;
}
.appel__form textarea { flex: 1 1 100%; }
.appel__form input::placeholder, .appel__form textarea::placeholder { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.appel__form .bouton { flex: none; }

.pied-appel { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.contact { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 46px; }

.contact__coord { flex: 1 1 32%; min-width: min(100%, 280px); }
.coords { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--bordure); }
.coord {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bordure);
}
.coord__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  color:var(--encre-marque,var(--marque));
}
.coord__c { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.coord__v { font-size: 15px; color: var(--texte-doux); text-decoration: none; overflow-wrap: anywhere; }
a.coord__v:hover { color:var(--encre-marque,var(--marque)); }
.formulaire {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 34px;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  align-content: flex-start;
}
.formulaire > .chapo, .formulaire > .mention { flex: 1 1 100%; }
.formulaire > .mention { text-align: left; margin-top: 0; }

.champ { flex: 1 1 48%; min-width: min(100%, 210px); display: flex; flex-direction: column-reverse; gap: 7px; }
.champ--long { flex: 1 1 100%; }
.champ > span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--texte-doux); }
.champ input, .champ textarea {
  padding: 14px 15px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  font: 400 15px Geist, sans-serif;
  color: var(--texte);
  resize: vertical;
}
.champ input:focus, .champ textarea:focus, .appel__form input:focus, .appel__form textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }
.formulaire .bouton { flex: none; }

.prix {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 42px;
  line-height: 1;
  color:var(--encre-marque,var(--marque));
  letter-spacing: -.02em;
}
.prix__u { font-family: Geist, sans-serif; font-size: 13px; letter-spacing: .04em; color: var(--texte-doux); margin-left: 7px; }
.mention { margin-top: 26px; font-size: 13px; color: var(--texte-doux); text-align: center; }

.tri { display: flex; flex-direction: column-reverse; gap: 20px; }
.tri__g { min-width: 0; }
.tri__t { font-size: clamp(24px, 2.4vw, 32px); }
.tri__d { min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tri__l {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 6px;
  border: 1px solid var(--bordure); background: var(--fond);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte); text-decoration: none;
}
.tri__l i { font-family: 'Bebas Neue', Impact, sans-serif; font-style: normal; font-size: 15px; color:var(--encre-marque,var(--marque)); }
.tri__l--ici i { color: inherit; }
.tri__l:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.tri__l--ici { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); border-color: var(--texte); color: var(--sur-bande, var(--sur-texte, var(--fond))); }

.etals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.etal {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--bordure); border-radius: 10px; padding: 22px;
  background: var(--fond);
}
.etal:hover { border-color:var(--encre-marque,var(--marque)); }
.etal__vue .vue { border: 0; }
.etal h3 { font-size: 26px; }
.etal .jetons { margin-top: 0; }
.etal__bas {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between;
}
.etal__bas > * { min-width: 0; }
.etal__dep, .fp__dep .etal__dep {
  display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: 4px;
}

.fp__t { font-size: clamp(32px, 4vw, 56px); }
.fp { display: flex; flex-wrap: wrap; gap: 46px; margin-top: 30px; align-items: flex-start; }
.fp__c { flex: 1 1 46%; min-width: min(100%, 300px); }
.fp__vue { flex: 1 1 46%; min-width: min(100%, 300px); }
.fp__dep {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bordure);
  display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center;
}
.fp__dep > * { min-width: 0; }
.fp .mention { text-align: left; }

.carto { display: flex; flex-wrap: wrap; gap: 0; margin-top: 46px; border-top: 1px solid var(--bordure); }
.carto__c {
  flex: 1 1 24%; min-width: min(100%, 190px);
  padding: 24px 22px 24px 0; border-bottom: 1px solid var(--bordure);
}

.carto__c b {
  display: block; margin-bottom: 8px;
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px;
  letter-spacing: -.01em; color: var(--texte);
}

.defile { overflow: hidden; padding: 30px 0; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--sur-bande); }
.defile__piste { display: flex; gap: 56px; width: max-content; animation: glisse 32s linear infinite; }
.defile__item {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  white-space: nowrap;
  flex: none;
}
@keyframes glisse { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__piste { animation: none; } }

.chapo__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.mot--large { max-width: 780px; margin-top: 18px; }
.chapo--centre + .mot--large { margin-inline: auto; text-align: center; }

.offre__lib {
  flex: none; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-doux);
}

.pas__vue { flex: 1 1 34%; min-width: min(100%, 240px); }
.pas__vue .vue { min-height: 0; aspect-ratio: 1.99; }

.appel__vue { margin-top: 22px; }
.appel__vue .vue { min-height: 160px; }

.encart {
  margin-top: 24px; padding: 22px 24px;
  border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--fond);
  display: grid; gap: 10px; justify-items: flex-start;
}
.encart .chapo__b { margin-top: 6px; }

.art__ouv { margin-bottom: 34px; }
.art__ouv .vue { min-height: 0; aspect-ratio: 2.57; }
.art__h1 { font-size: clamp(34px, 4.4vw, 64px); }
.art__sig { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0 0; }
.article { display: flex; margin-top: 40px; }
.article__som {
  margin-bottom: 34px;
  padding: 22px 26px;
  border-radius: 10px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
}
.article__som summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.article__som summary::-webkit-details-marker { display: none; }
.article__som .puces { margin-top: 12px; }
.article__corps { flex: 1 1 auto; min-width: 0; max-width: 74ch; }
.art__t2 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 38px; }
.art__t3 { font-size: 21px; margin-top: 28px; }
.art__p { margin-top: 16px; }
.art__l { margin-top: 8px; }
.art__v { margin: 30px 0 0; }
.art__v .vue { min-height: 0; aspect-ratio: 2.08; }
.encadre { margin-top: 28px; padding: 26px; border-radius: 10px; background: var(--fond-2); border-left: 4px solid var(--marque); }

.legal__h1 { font-size: clamp(30px, 3.6vw, 52px); }
.legal__sig { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 14px 0 0; }
.legal { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--bordure); }
.clause {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 30px 0;
  border-bottom: 1px solid var(--bordure);
}
.clause__no {
  flex: none;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  line-height: 1.25;
  color:var(--encre-marque,var(--marque));
}
.clause__c { min-width: 0; max-width: 78ch; }
.clause__t { font-size: 22px; }

.socle { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--sur-bande, var(--sur-texte, var(--fond))); padding: 82px 0 30px; overflow: hidden; }
.socle .cadre { position: relative; }
.disque--pied { width: 310px; height: 310px; right: -150px; bottom: -160px; }
.socle h4 { color: var(--sur-bande, var(--sur-texte, var(--fond))); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.socle__haut { display: flex; flex-wrap: wrap; gap: 46px; }
.socle__marque { flex: 0 1 380px; min-width: min(100%, 300px); position: relative; z-index: 1; }
.socle__marque .socle__nap { margin-top: 22px; }
.socle__nom {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 34px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
}
.socle__marque .mot { color: var(--sur-bande, var(--sur-texte, var(--fond))); margin-top: 16px; max-width: 42ch; }
.socle__cols {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 66px;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.socle__cols > div { flex: 0 1 196px; min-width: min(100%, 150px); }
.socle ul { list-style: none; margin: 0; padding: 0; }
.socle li { margin-bottom: 10px; }
.socle a { color: var(--sur-bande, var(--sur-texte, var(--fond))); text-decoration: none; font-size: 14px; }
.socle a:hover { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.socle__nap { display: flex; flex-direction: column; gap: 10px; }
.socle__nap > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.socle__nap i { color: var(--sur-bande, var(--sur-texte, var(--fond))); font-style: normal; flex: none; }
.socle__credit {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--fond) 15%, transparent);
  text-align: center;
  font-size: 13px;
  color: var(--sur-bande, var(--sur-texte, var(--fond)));
  position: relative;
  z-index: 1;
}
.socle__liens { display: block; margin-top: 10px; }
.socle__liens a { margin: 0 9px; font-size: 13px; }

.socle__bande { margin-top: 34px; position: relative; z-index: 1; }
.socle__bande .vue { min-height: 292px; border: 0; border-radius: 10px; }

@media (max-width: 1000px) {
  .tranche { padding: 78px 0; }
  .enseigne__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
    border-bottom: 1px solid color-mix(in srgb, var(--fond) 14%, transparent);
    flex-direction: column;
    align-items: stretch;
    padding: 14px 24px 22px;
    gap: 2px; color: var(--sur-bande); }
  .enseigne[data-ouvert] .enseigne__nav { display: flex; }
  .enseigne__rang { position: relative; flex-wrap: nowrap; }
  .enseigne__bouton { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .enseigne__d { display: none; }
  .enseigne__g { gap: 0; }
  .deroul__panneau { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 4px; }
  .deroul__grille { background: transparent; border: 0; box-shadow: none; padding: 4px 0 10px 12px;
    flex-direction: column; width: auto; min-width: 0; max-width: none; gap: 12px; }
  
  .deroul__vit { display: none; }
  .deroul__lien { color: color-mix(in srgb, var(--fond) 74%, transparent); white-space: normal; }
  .deroul__titre { color:var(--encre-marque,var(--marque)); }
  .article__som { position: static; }
  .appel { padding: 40px; }
  
  .matieres, .colonnes, .passes, .etals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cadre, .enseigne__rang { width: min(1240px, 100% - 32px); }
  .tranche { padding: 62px 0; }
  .tranche--mince { padding: 46px 0; }
  .ouverture { padding-top: 52px; }
  .ouverture__texte { flex-basis: 100%; }
  .ouverture__scene { margin-top: 40px; height: auto; flex-basis: 100%; }
  .ouverture__scene .vue { min-height: 0; height: auto; aspect-ratio: 1.3; }
  .duo, .seo { gap: 34px; }
  .seo + .seo { margin-top: 58px; }
  .seo .vue, .vue--haute { min-height: 0; }
  .offre__no { width: 46px; font-size: 24px; }
  .offre__k { min-height: 0; }
  .offre__kv .vue { min-height: 0; }
  .pave--haut, .pave--court, .pave--moyen { min-height: 0; }
  .proj { gap: 26px; padding: 32px 0; }
  .proj__v--large .vue { min-height: 0; }
  .proj__v--tuile .vue { min-height: 0; }
  .temoin--maitre { min-height: 0; padding: 26px; }
  .matiere { min-height: 0; }
  .matiere .vue { min-height: 0; }
  
  .fiches, .matieres, .colonnes, .passes, .etals, .duels { grid-template-columns: 1fr; }
  .compteur { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--bordure); padding: 24px; }
  .compteur:last-child { border-bottom: 0; }
  .tranche--nuit .compteur { border-bottom-color: color-mix(in srgb, var(--fond) 20%, transparent); }
  .appel { padding: 30px; }
  .plan__panneau { padding: 28px; }
  .formulaire { padding: 24px; }
  .compare { aspect-ratio: 4 / 3; }
  .socle { padding: 58px 0 26px; }
}

.parution__fl, .passe__fl, .commune__fl { border-radius: 100%; }

.pave { position: relative; }
.pave::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--texte) 12%, transparent);
}
.parution { position: relative; }
.parution::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--texte) 10%, transparent);
}
.temoin { position: relative; }
.temoin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--texte) 10%, transparent);
}
.commune { position: relative; }
.commune::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
}

.fiche, .temoin {
  box-shadow:
    0 1px .8px -1px color-mix(in srgb, var(--texte) 17%, transparent),
    0 4px 3px -2px color-mix(in srgb, var(--texte) 14%, transparent),
    0 12px 9px -4px color-mix(in srgb, var(--texte) 11%, transparent);
}

.bande__vue .vue {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 100%);
}
.plan__fond .vue {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
}

.duels { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
.duel { min-width: 0; max-width: 100%; }

@media (max-width: 640px) { .compare { min-height: 0; max-width: 100%; } }

.ouverture .etiq { color: var(--sur-bande, var(--sur-texte, var(--fond))); }
.ouverture .etiq::before { background:var(--marque);--sur-bande:var(--sur-marque); }

:where(body), :where(.tranche--grise), :where(.tranche--nuit .bouton--vide:hover), :where(.vue), :where(.deroul__grille), :where(.fil), :where(.jeton), :where(.fiche), :where(.tranche--grise .fiche), :where(.pave), :where(.bande), :where(.insigne), :where(.bareme), :where(.colonne), :where(.passe), :where(.parution), :where(.offre__k), :where(.temoin), :where(.plan__panneau), :where(.compare), :where(.formulaire), :where(.champ input), :where(.champ textarea), :where(.tri__l), :where(.etal), :where(.encart), :where(.article__som), :where(.encadre) { --sur-bande: var(--texte); color: var(--texte); }

.compare__poignee em, .compare__poignee strong, .compare__poignee b, .ouverture__pave em, .ouverture__pave strong, .ouverture__pave b, .enseigne__pave em, .enseigne__pave strong, .enseigne__pave b, .colonne__ruban em, .colonne__ruban strong, .colonne__ruban b, .compare__barre em, .compare__barre strong, .compare__barre b, .tranche--nuit em, .tranche--nuit strong, .tranche--nuit b, .enseigne__nav em, .enseigne__nav strong, .enseigne__nav b, .commune__tag em, .commune__tag strong, .commune__tag b, .tri__l--ici em, .tri__l--ici strong, .tri__l--ici b, .pave__rond em, .pave__rond strong, .pave__rond b, .pas--appel em, .pas--appel strong, .pas--appel b, .temoin__av em, .temoin__av strong, .temoin__av b, .ouverture em, .ouverture strong, .ouverture b, .enseigne em, .enseigne strong, .enseigne b, .bouton em, .bouton strong, .bouton b, .disque em, .disque strong, .disque b, .defile em, .defile strong, .defile b, .appel em, .appel strong, .appel b, .socle em, .socle strong, .socle b { color: var(--sur-bande); }

@media (min-width: 1024px) {
  .tranche .cadre:has(> .seo + .seo) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; align-items: start; }
  .tranche .cadre:has(> .seo + .seo) > .seo + .seo { margin-top: 0; }
}

.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}
@media (max-width:480px){header [data-cta-devis="clone"]{display:none}}
.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-bc{max-width:1200px;margin:0 auto;padding:.5rem 1rem;font-size:.85rem}.zx-bc__ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}.zx-bc__ol li+li::before{content:"›";margin-right:.35rem;opacity:.6}.zx-bc a{color:inherit;text-decoration:underline}
.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))}
@media (max-width:480px){header a[href^="tel:"] .zx-tel-num{display:none}}

[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%}

.tranche--grise,
.tranche--nuit .bouton--vide:hover,
.vue,
.deroul__grille,
.fil,
.jeton,
.fiche,
.tranche--grise .fiche,
.pave,
.bande,
.insigne,
.bareme,
.colonne,
.passe,
.parution,
.offre__k,
.temoin,
.plan__panneau,
.compare,
.formulaire,
.champ input,
.champ textarea,
.tri__l,
.etal,
.encart,
.article__som,
.encadre,
.zx-certs__lg { --texte-doux: var(--texte-doux-sol, var(--texte-doux)); --encre-accent: var(--encre-accent-sol, var(--accent)); color: var(--texte) }

.tranche--nuit,
.bouton:hover,
.bouton--vide:hover,
.enseigne,
.ouverture,
.pas--appel,
.appel,
.tri__l--ici,
.defile,
.socle,
.enseigne__nav,
.pave::after,
.parution::after,
.temoin::after,
.commune::after { --texte-doux: var(--texte-doux-inverse); --encre-accent: var(--encre-accent-inverse, var(--accent)); --encre-marque: var(--fond); color: var(--fond) }

.tranche--nuit .jeton,
.ouverture .jeton { --texte-doux: var(--texte-doux-inverse); --encre-accent: var(--encre-accent-inverse, var(--accent)); --encre-marque: var(--fond); color: var(--fond) }

.deroul__tete:hover,
.matiere__c h3,
.matiere__c .mot,
.compare__lab { --encre-accent: var(--encre-accent-inverse, var(--accent)); --encre-marque: var(--encre-accent-inverse, var(--fond)) }

.etiq::before,
.tranche--nuit .etiq::before,
.enseigne__pave,
.ouverture__pave,
.disque,
.puces li::before,
.pave__rond,
.colonne__ruban,
.offre__l:hover .offre__fl,
.temoin__av,
.compare__barre,
.compare__poignee,
.ouverture .etiq::before { --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))}