/* ============================================================
   Arvio — feuille SOURCE de la coquille. dist/style.css en est une
   copie, ecrasee a chaque rendu : ne jamais editer dist/.

   Huit variables de couleur, aucune autre, et pas un hexadecimal en
   dur : --marque --accent --fond --fond-2 --texte --texte-doux
   --bordure --sur-marque. --sur-marque est calculee par le moteur.

   Les bases de colonne sont en PIXELS, jamais en pourcentage : deux
   colonnes a 46 % tiennent toujours sur une ligne et le repli ne se
   declenche jamais.
   ============================================================ */

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

:root {
  --wr: 1100px;
  --pad: 20px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 30px;
  --anneau: 5px;
  --sct: clamp(56px, 7vw, 104px);
  --tr: 180ms ease;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; }
address { font-style: normal; }
figure { margin: 0; }

.wr { width: 100%; max-width: var(--wr); margin: 0 auto; padding: 0 var(--pad); }
.sct { padding: var(--sct) 0; }

/* ---------- briques communes ---------- */

.ig { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Le cadre d attente : il garde l intitule quand la photo n est pas
   encore posee. Jamais d image cassee, jamais de trou muet. */
.ig--nu {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 16px; text-align: center;
  background: var(--fond-2);
  border: 1px dashed var(--bordure);
  border-radius: inherit;
}
.ig--nu i {
  font-style: normal; font-size: 12px; line-height: 1.4;
  letter-spacing: 0.02em; color: var(--texte-doux);
}

.tt { color: var(--texte); }
.tt--xl { font-size: clamp(34px, 5.6vw, 62px); line-height: 1.03; }
.tt--l { font-size: clamp(28px, 4.2vw, 46px); }
.tt--m { font-size: clamp(24px, 3.2vw, 38px); }
.tt--s { font-size: clamp(20px, 2.4vw, 27px); }
.tt__c { color:var(--encre-marque,var(--marque)); font-weight: 600; }

.ch { color: var(--texte-doux); font-size: 16px; margin: 0; }
.mn { margin-top: 14px; font-size: 12px; color: var(--texte-doux); }

/* La pilule bicolore : pastille pleine, puis intitule sur fond clair. */
.pl {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px 6px 8px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte);
}
.pl__d { width: 9px; height: 9px; border-radius: 50%; background:var(--marque);--sur-bande:var(--sur-marque); flex: 0 0 auto; }

.bt {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid var(--bordure); background: var(--fond-2); color: var(--texte);
  transition: transform var(--tr), background var(--tr), border-color var(--tr);
}
.bt:hover { transform: translateY(-1px); }
.bt__fl { width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.bt--plein { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }
.bt--clair { background: var(--fond-2); border-color: var(--fond-2); color: var(--texte); }
.bt--fantome { background: transparent; border-color: var(--bordure); color: var(--texte); }
.bt--nu { opacity: 0.7; }

.lk {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color:var(--encre-marque,var(--marque));
}
.lk .bt__fl { width: 6px; height: 6px; }
.lk:hover { gap: 11px; }
.lk--nu { color: var(--texte-doux); }

.co { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.co li {
  display: flex; align-items: flex-start; gap: 9px;
  flex: 1 1 240px; min-width: 0;
  font-size: 14px; color: var(--texte-doux); line-height: 1.5;
}
.co li i {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 4px; border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque); position: relative;
}
.co li i::after {
  content: ""; position: absolute; left: 4.5px; top: 3.5px;
  width: 4px; height: 7px; border-right: 1.6px solid var(--sur-marque); border-bottom: 1.6px solid var(--sur-marque);
  transform: rotate(42deg);
}
.co--serre li { flex: 1 1 100%; }
.co--2 li { flex: 1 1 210px; }

.jt { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.jt li {
  padding: 5px 11px; border-radius: 999px; background: var(--fond);
  border: 1px solid var(--bordure); font-size: 12px; color: var(--texte-doux);
}

/* La carte d Arvio : blanche, tres arrondie, cerclee d un anneau pale. */
.ct-c {
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  box-shadow: 0 0 0 var(--anneau) var(--fond);
}

/* En-tete de section : gros titre a gauche, chapo et lien a droite. */
.sh { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; margin-bottom: 34px; }
.sh__g { flex: 1 1 380px; min-width: 0; }
.sh__d { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sh .pl { margin-bottom: 14px; }

/* Formulaires */
.fm { display: flex; flex-wrap: wrap; gap: 14px; }
.fm__c { flex: 1 1 240px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fm__c--l { flex: 1 1 100%; }
.fm__lb { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-doux); }
.fm__i {
  width: 100%; max-width: 100%; padding: 12px 14px; font: inherit; font-size: 14px;
  color: var(--texte); background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--r-s); resize: vertical;
}
.fm__i:focus { outline: 2px solid var(--marque); outline-offset: 1px; }
.fm__b { flex: 1 1 100%; }

/* ============================================================
   Entete
   ============================================================ */

.av-hd { position: sticky; top: 0; z-index: 40; background: var(--fond-2); border-bottom: 1px solid var(--bordure); }
.av-hd__k { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.av-hd__in {
  width: 100%; max-width: var(--wr); margin: 0 auto; padding: 0 var(--pad);
  min-height: 68px; display: flex; align-items: center; gap: 18px;
}
.av-hd__mq { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; flex: 0 0 auto; }
.av-hd__cube { width: 20px; height: 20px; border-radius: 6px; background:var(--marque);--sur-bande:var(--sur-marque); flex: 0 0 auto; }
.av-hd__fin { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.av-hd__fin .bt { padding: 10px 18px; }

.av-nv { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.av-nv__u { display: flex; align-items: center; gap: 4px; }
.av-nv__p { position: relative; }
.av-nv__tete, .av-nv__p > .av-nv__a { display: inline-flex; align-items: center; gap: 6px; }
.av-nv__a {
  display: inline-flex; align-items: center; padding: 22px 12px;
  font-size: 14px; font-weight: 500; color: var(--texte); white-space: nowrap;
}
.av-nv__p:hover > .av-nv__tete .av-nv__a, .av-nv__p > .av-nv__a:hover { color:var(--encre-marque,var(--marque)); }
/* Le chevron dit qu il y a un volet dessous. */
.av-nv__ch {
  width: 6px; height: 6px; margin-left: -6px;
  border-right: 1.5px solid var(--texte-doux); border-bottom: 1.5px solid var(--texte-doux);
  transform: translateY(-2px) rotate(45deg); transition: transform var(--tr);
}
.av-nv__p--v:hover .av-nv__ch { transform: translateY(0) rotate(225deg); border-color:var(--encre-marque,var(--marque)); }

/* Le volet est colle a la tete : top:100%, aucune marge. Le decalage de
   recentrage passe par --dx, jamais par une marge, sinon un trou se
   creuse entre le lien et le volet et le volet se ferme au survol. */
.av-vo {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  width: 640px; max-width: calc(100vw - 32px);
  padding-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--tr), visibility var(--tr);
  z-index: 50;
}
.av-nv__p--v:hover .av-vo, .av-nv__p--v:focus-within .av-vo { opacity: 1; visibility: visible; pointer-events: auto; }
.av-vo__carte {
  display: flex; flex-wrap: wrap; gap: 22px; padding: 22px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: var(--r-l); box-shadow: 0 18px 44px rgb(0 0 0 / 0.11);
}
.av-vo__piles { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; gap: 18px 24px; }
.av-vo__pile { flex: 1 1 130px; min-width: 0; }
.av-vo__pt { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.av-vo__u li + li { margin-top: 2px; }
.av-vo__u a {
  display: block; padding: 7px 9px; border-radius: var(--r-s);
  font-size: 14px; color: var(--texte); transition: background var(--tr), color var(--tr);
}
.av-vo__u a:hover { background: var(--fond); color:var(--encre-marque,var(--marque)); }
/* La vitrine : le volet montre toujours un visuel sur le cote. */
.av-vo__vt { flex: 1 1 240px; min-width: 0; padding: 14px; background: var(--fond); border-radius: var(--r-m); }
.av-vo__cadre { display: block; height: 132px; border-radius: var(--r-s); overflow: hidden; background: var(--fond-2); }
.av-vo__cadre .ig--nu { min-height: 132px; height: 132px; }
.av-vo__ve { margin: 12px 0 5px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-vo__vt2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.av-vo__vx { margin: 0 0 10px; font-size: 13px; color: var(--texte-doux); line-height: 1.5; }

/* Bouton du menu compact */
.av-hd__bg { display: none; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--bordure); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: var(--fond); }
.av-hd__bg i { display: block; width: 16px; height: 1.6px; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); }

@media (max-width: 1023px) {
  .av-hd__in { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .av-hd__fin { margin-left: auto; }
  .av-hd__bg { display: flex; }
  .av-nv { flex: 1 1 100%; order: 4; display: none; }
  .av-hd__k:checked ~ .av-hd__in .av-nv { display: block; }
  .av-nv__u { flex-direction: column; align-items: stretch; gap: 0; }
  .av-nv__p { border-top: 1px solid var(--bordure); }
  .av-nv__a { padding: 13px 2px; width: 100%; white-space: normal; }
  .av-nv__tete { justify-content: space-between; width: 100%; }
  .av-nv__ch { margin-left: 0; }
  /* Sur petit ecran le volet se replie a plat : pas de survol, tout est
     visible et atteignable au doigt. */
  .av-vo {
    position: static; transform: none; width: 100%; max-width: 100%;
    padding-top: 0; padding-bottom: 12px;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .av-vo__carte { box-shadow: none; padding: 14px; }
}

/* ============================================================
   Affiche
   ============================================================ */

.av-af { padding: clamp(40px, 6vw, 84px) 0 0; }
.av-af__in { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; }
.av-af__tx { flex: 1 1 420px; min-width: 0; }
.av-af__s { margin: 20px 0 26px; font-size: clamp(15px, 1.5vw, 18px); color: var(--texte-doux); max-width: 46ch; }
.av-af__b { display: flex; flex-wrap: wrap; gap: 12px; }
.av-af__vs { flex: 1 1 340px; min-width: 0; }
.av-af__cadre {
  display: block; border-radius: var(--r-xl); overflow: hidden;
  background: var(--fond-2); border: 1px solid var(--bordure);
  box-shadow: 0 0 0 var(--anneau) var(--fond-2), 0 26px 60px rgb(0 0 0 / 0.08);
  aspect-ratio: 4 / 3;
}
.av-af__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-af__ats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(34px, 4vw, 56px); }
.av-af__at {
  flex: 1 1 250px; min-width: 0; padding: 20px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
}
.av-af__att { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.av-af__atx { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }
.av-af__at .co { margin-top: 12px; }

/* ============================================================
   Intro
   ============================================================ */

.av-io__in { display: flex; flex-wrap: wrap; gap: 24px 44px; align-items: flex-start; }
.av-io__h { flex: 1 1 340px; min-width: 0; }
.av-io__tx { flex: 1 1 340px; min-width: 0; color: var(--texte-doux); font-size: 15px; }
.av-io__in > .bt { flex: 0 0 auto; }

/* ============================================================
   Prestations
   ============================================================ */

.av-sv__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-sv__c {
  flex: 1 1 290px; min-width: 0; padding: 24px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
  display: flex; flex-direction: column; gap: 10px;
}
.av-sv__vs { margin: -24px -24px 4px; }
.av-sv__cadre { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond); }
.av-sv__cadre .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-sv__cube {
  width: 40px; height: 40px; border-radius: 12px; 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: 13px; font-weight: 600; letter-spacing: 0;
}
.av-sv__t { font-size: 18px; }
.av-sv__x { margin: 0; font-size: 14px; color: var(--texte-doux); }
.av-sv__c .co { margin-top: 2px; }
.av-sv__c .lk { margin-top: auto; padding-top: 6px; }

/* ============================================================
   Blocs SEO
   ============================================================ */

.av-bs__l { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 76px); }
.av-bs__b { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 44px; }
.av-bs__tx { flex: 1 1 380px; min-width: 0; }
.av-bs__p { color: var(--texte-doux); font-size: 15px; }
.av-bs__tx .bt { margin-top: 20px; }
.av-bs__vs { flex: 1 1 320px; min-width: 0; }
/* L alternance est imposee par la coquille, jamais par les donnees. */
.av-bs__b--r .av-bs__tx { order: 2; }
.av-bs__b--r .av-bs__vs { order: 1; }
.av-bs__cadre {
  display: block; aspect-ratio: 5 / 4; border-radius: var(--r-xl); overflow: hidden;
  background: var(--fond-2); border: 1px solid var(--bordure);
  box-shadow: 0 0 0 var(--anneau) var(--fond-2);
}
.av-bs__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-bs__tx .tt { margin-bottom: 16px; }

/* ============================================================
   Expertise (panneau sombre)
   ============================================================ */

.av-ex__pan {
  display: flex; flex-wrap: wrap; gap: 30px 40px; align-items: center;
  padding: clamp(24px, 3.6vw, 46px);
  background: var(--accent); border-radius: var(--r-xl);
}
.av-ex__pan .tt, .av-ex__pan .pl { color: var(--fond-2); }
.av-ex__pan .pl { background: transparent; border-color: rgb(255 255 255 / 0.24); }
.av-ex__g { flex: 1 1 360px; min-width: 0; }
.av-ex__x { color: rgb(255 255 255 / 0.72); font-size: 15px; }
.av-ex__l { margin: 22px 0; display: flex; flex-direction: column; gap: 16px; }
.av-ex__p { display: flex; gap: 14px; align-items: flex-start; }
.av-ex__n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
  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: 12px; font-weight: 600;
}
.av-ex__pt { font-size: 16px; color: var(--fond-2); margin-bottom: 4px; }
.av-ex__p p { margin: 0; font-size: 14px; color: rgb(255 255 255 / 0.68); }
.av-ex__vs { flex: 1 1 300px; min-width: 0; }
.av-ex__cadre { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; background: var(--fond-2); }
.av-ex__cadre .ig--nu { min-height: 100%; height: 100%; }

/* ============================================================
   Reperes chiffres
   ============================================================ */

/* La marque ouvre le repere, le libelle annonce, la valeur ferme EN RETRAIT
   sous le libelle — jamais d aplomb. Pas de carton autour : un simple filet
   de tete separe les reperes. */
.av-rp__u2 { display: flex; flex-wrap: wrap; gap: 26px 34px; }
.av-rp__u {
  flex: 1 1 200px; min-width: 0; padding-top: 18px;
  border-top: 1px solid var(--bordure);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.av-rp__m { width: 22px; height: 22px; border-radius: 7px; background:var(--marque);--sur-bande:var(--sur-marque); display: block; }
.av-rp__l { font-size: 13px; color: var(--texte-doux); }
.av-rp__v { margin-left: 34px; font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--texte); }

/* ============================================================
   Confiance
   ============================================================ */

.av-wu__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-wu__c {
  flex: 1 1 250px; min-width: 0; padding: 22px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
}
.av-wu__pt { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color:var(--encre-marque,var(--marque)); }
.av-wu__t { margin-top: 10px; font-size: 17px; }
.av-wu__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }
.av-wu__vs { margin-top: 20px; }
.av-wu__cadre { display: block; aspect-ratio: 21 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bordure); }
.av-wu__cadre .ig--nu { min-height: 100%; height: 100%; }

/* ============================================================
   Etapes
   ============================================================ */

.av-pc__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-pc__c {
  flex: 1 1 280px; min-width: 0; padding: 18px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
}
.av-pc__cadre { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-m); overflow: hidden; background: var(--fond); margin-bottom: 16px; }
.av-pc__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-pc__bd {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
}
.av-pc__t { margin-top: 12px; font-size: 18px; }
.av-pc__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Matiere
   ============================================================ */

.av-mt__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-mt__c {
  flex: 1 1 240px; min-width: 0;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); overflow: hidden;
}
.av-mt__cadre { display: block; aspect-ratio: 4 / 3; background: var(--fond); }
.av-mt__cadre .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-mt__tx { padding: 18px; }
.av-mt__t { font-size: 16px; }
.av-mt__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Partenaires
   ============================================================ */

.av-mq { padding: 26px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.av-mq__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.av-mq__t { margin: 0; flex: 1 1 180px; min-width: 0; font-size: 13px; color: var(--texte-doux); }
.av-mq__u { flex: 3 1 320px; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.av-mq__i { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--texte-doux); opacity: 0.75; }

/* ============================================================
   Publics
   ============================================================ */

.av-b2__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-b2__c {
  flex: 1 1 290px; min-width: 0;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); overflow: hidden;
}
.av-b2__cadre { display: block; aspect-ratio: 16 / 9; background: var(--fond); }
.av-b2__cadre .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-b2__tx { padding: 20px; }
.av-b2__m { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-b2__t { font-size: 18px; }
.av-b2__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Communes autour
   ============================================================ */

.av-za__l { display: flex; flex-wrap: wrap; gap: 14px; }
.av-za__c { flex: 1 1 240px; min-width: 0; }
.av-za__a {
  display: flex; gap: 14px; align-items: center; height: 100%; padding: 14px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-m);
  transition: border-color var(--tr), transform var(--tr);
}
.av-za__a:hover { border-color:var(--encre-marque,var(--marque)); transform: translateY(-2px); }
.av-za__vs { flex: 0 0 74px; width: 74px; height: 74px; border-radius: var(--r-s); overflow: hidden; background: var(--fond); }
.av-za__vs .ig--nu { min-height: 74px; height: 74px; padding: 6px; }
.av-za__vs .ig--nu i { font-size: 10px; }
.av-za__tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.av-za__g { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-za__t { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.av-za__lb { font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   Ancrage local
   ============================================================ */

.av-ul__in { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.av-ul__vs { flex: 1 1 340px; min-width: 0; }
.av-ul__cadre { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-xl); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bordure); box-shadow: 0 0 0 var(--anneau) var(--fond-2); }
.av-ul__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-ul__d { flex: 1 1 300px; min-width: 0; }
.av-ul__ad { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; font-size: 15px; color: var(--texte-doux); }
.av-ul__d .bt { margin-top: 20px; }

/* ============================================================
   Avis
   ============================================================ */

.av-av__vd { display: flex; flex-wrap: wrap; gap: 22px 36px; align-items: center; }
.av-av__vs { flex: 1 1 300px; min-width: 0; position: relative; }
.av-av__cadre { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bordure); }
.av-av__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-av__lg {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--fond-2); border-radius: var(--r-m);
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
}
.av-av__lg span { font-size: 12px; font-weight: 400; color: var(--texte-doux); }
.av-av__q { flex: 1 1 340px; min-width: 0; margin: 0; }
.av-av__e { display: block; margin-bottom: 12px; font-size: 15px; letter-spacing: 5px; color:var(--encre-marque,var(--marque)); }
.av-av__qt { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 14px; }
.av-av__qx { font-size: 16px; color: var(--texte-doux); }
.av-av__l { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.av-av__c { flex: 1 1 280px; min-width: 0; padding: 22px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); }
.av-av__t { font-size: 16px; margin-bottom: 8px; }
.av-av__x { margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
.av-av__n { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; }
.av-av__pt {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  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: 13px;
}
.av-av__r { font-weight: 400; color: var(--texte-doux); font-size: 13px; }

/* ============================================================
   Questions
   ============================================================ */

/* Les plis sont poses en PREMIER dans le flux et remis a droite par `order` :
   la colonne etroite d appel se lit a gauche, face a la pile. */
.av-qs__in { display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: flex-start; }
.av-qs__pl { order: 2; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.av-qs__cl { order: 1; flex: 1 1 300px; min-width: 0; }
.av-qs__cl .ch { margin-top: 14px; }
.av-qs__ap { margin-top: 22px; padding: 22px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); }
.av-qs__apt { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.av-qs__apx { margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
.av-qs__p { border-bottom: 1px solid var(--bordure); }
.av-qs__q {
  display: flex; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer;
  list-style: none; font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
}
.av-qs__q::-webkit-details-marker { display: none; }
/* Le signe est renvoye a l extreme droite du pli. */
.av-qs__sg { flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin-left: auto; }
.av-qs__sg::before, .av-qs__sg::after { content: ""; position: absolute; left: 50%; top: 50%; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); transform: translate(-50%, -50%); }
.av-qs__sg::before { width: 12px; height: 1.6px; }
.av-qs__sg::after { width: 1.6px; height: 12px; transition: opacity var(--tr); }
.av-qs__p[open] .av-qs__sg::after { opacity: 0; }
.av-qs__r { padding: 0 24px 20px 4px; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Avant / apres
   ============================================================ */

.av-ab__l { display: flex; flex-wrap: wrap; gap: 22px; }
.av-ab__c { flex: 1 1 320px; min-width: 0; }
.cp {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--r-l); overflow: hidden; background: var(--fond-2);
  border: 1px solid var(--bordure); touch-action: pan-y;
}
.cp__f { position: absolute; inset: 0; display: block; }
.cp__f .ig { width: 100%; height: 100%; border-radius: 0; }
.cp__f .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
/* Les deux photos sont superposees : la seconde est decoupee par --pos. */
.cp__f--ap { clip-path: inset(0 0 0 var(--pos, 50%)); }
.cp__tr { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--fond-2); transform: translateX(-1px); }
.cp__tr i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--fond-2); border: 2px solid var(--marque);
}
.cp__lb {
  position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.cp__lb--av { left: 12px; }
.cp__lb--ap { right: 12px; }
/* Le curseur est en surimpression : souris, doigt et clavier. */
.ab__i {
  position: absolute; left: 14px; right: 14px; bottom: 14px; width: calc(100% - 28px);
  height: 26px; margin: 0; appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize; z-index: 3;
}
.ab__i:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }
.ab__i::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--fond-2); border: 1px solid var(--bordure); }
.ab__i::-moz-range-track { height: 6px; border-radius: 999px; background: var(--fond-2); border: 1px solid var(--bordure); }
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background:var(--marque);--sur-bande:var(--sur-marque); border: 2px solid var(--fond-2); }
.ab__i::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background:var(--marque);--sur-bande:var(--sur-marque); border: 2px solid var(--fond-2); }
/* Le titre et les jetons ouvrent la fiche, AVANT la figure ; le propos ferme. */
.av-ab__t { font-size: 18px; margin-bottom: 10px; }
.av-ab__c .jt { margin-bottom: 14px; }
.av-ab__x { margin: 14px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Chantiers
   ============================================================ */

.av-rz__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-rz__c { flex: 1 1 280px; min-width: 0; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); overflow: hidden; }
.av-rz__cadre { display: block; aspect-ratio: 3 / 2; background: var(--fond); }
.av-rz__cadre .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-rz__tx { padding: 20px; }
.av-rz__m { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-rz__t { font-size: 17px; }
.av-rz__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Garanties
   ============================================================ */

/* Comparatif : les rangs sont ecrits en premier et renvoyes a droite par
   `order` ; la coche ouvre le rang, l intitule suit, la precision se cale a
   l extreme droite sur la MEME ligne. */
.av-gr__in { display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: flex-start; }
.av-gr__l { order: 2; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; }
.av-gr__cl { order: 1; flex: 1 1 300px; min-width: 0; }
.av-gr__cl .ch { margin-top: 14px; }
.av-gr__n { margin: 14px 0 0; font-size: 14px; color: var(--texte-doux); }
.av-gr__r { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.av-gr__ok {
  flex: 0 0 auto; position: relative; width: 18px; height: 18px; border-radius: 50%;
  background:var(--marque);--sur-bande:var(--sur-marque);
}
.av-gr__ok::after {
  content: ""; position: absolute; left: 5px; top: 4px; width: 5px; height: 9px;
  border-right: 1.7px solid var(--sur-marque); border-bottom: 1.7px solid var(--sur-marque);
  transform: rotate(42deg);
}
.av-gr__t { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.av-gr__x { flex: 0 1 auto; margin: 0; text-align: right; font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   Dispositifs
   ============================================================ */

.av-ad__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-ad__c { flex: 1 1 280px; min-width: 0; padding: 22px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); }
.av-ad__t { font-size: 17px; }
.av-ad__x { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   Reperes de prix
   ============================================================ */

.av-tf__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-tf__c { flex: 1 1 280px; min-width: 0; padding: 24px; background: var(--accent); border-radius: var(--r-l); color: var(--fond-2); display: flex; flex-direction: column; gap: 10px; }
.av-tf__t { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); }
.av-tf__p { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.av-tf__u { margin-left: 7px; font-size: 13px; font-weight: 400; color: rgb(255 255 255 / 0.7); letter-spacing: 0; }
.av-tf__x { margin: 0; font-size: 14px; color: rgb(255 255 255 / 0.72); }
.av-tf__c .co li { color: rgb(255 255 255 / 0.8); }
.av-tf__c .bt { margin-top: auto; align-self: flex-start; }

/* ============================================================
   Appel direct
   ============================================================ */

.av-ug__carte {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center;
  padding: clamp(24px, 3.4vw, 42px); border-radius: var(--r-xl);
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.av-ug__carte .tt { color:var(--sur-bande,var(--sur-marque)); }
.av-ug__carte .pl { background: transparent; border-color: rgb(255 255 255 / 0.3); color:var(--sur-bande,var(--sur-marque)); }
.av-ug__carte .pl__d { background: var(--sur-marque); }
/* Une seule colonne : le moyen de contact ouvre la carte, l argumentaire
   suit. Le numero et le bouton tiennent la premiere rangee, le reste passe
   a la ligne. */
.av-ug__carte > * { flex: 1 1 100%; min-width: 0; }
.av-ug__tel { flex: 0 1 auto; margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.04em; }
.av-ug__carte > .bt { flex: 0 0 auto; }
.av-ug__x { margin: 0; font-size: 15px; opacity: 0.86; }
.av-ug__carte .co li { color:var(--sur-bande,var(--sur-marque)); opacity: 0.9; }
.av-ug__carte .co li i { background: var(--sur-marque); }
.av-ug__carte .co li i::after { border-color:var(--encre-marque,var(--marque)); }

/* ============================================================
   Facettes
   ============================================================ */

.av-fa { padding: 24px 0; }
.av-fa__in { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; }
/* Le rail de choix ouvre le bloc, sur sa propre ligne ; l intitule et le
   repere se lisent en dessous, cote a cote. */
.av-fa__in { flex-direction: column; align-items: flex-start; }
.av-fa__u { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; }
.av-fa__in .tt { max-width: 100%; }
.av-fa__b {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  font-size: 13px; font-weight: 500; color: var(--texte);
}
.av-fa__b--on { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }

/* ============================================================
   Grille de references
   ============================================================ */

/* Une vedette pleine largeur — vue a gauche, propos a droite — puis la
   rangee de fiches serrees ou le prix ouvre la lecture. */
.av-gp__vd {
  display: flex; flex-wrap: wrap; gap: 24px 34px; align-items: center; margin-bottom: 16px;
  padding: 22px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-xl);
}
.av-gp__vs { flex: 1 1 360px; min-width: 0; margin: 0; }
.av-gp__tx { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.av-gp__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-gp__f {
  /* Bornee : une fiche seule ne s etire jamais a toute la rangee. */
  flex: 1 1 260px; max-width: 380px; min-width: 0; padding: 18px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.av-gp__cadre { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: var(--fond); }
.av-gp__cadre .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-gp__vs--f { width: 100%; }
.av-gp__vs--f .av-gp__cadre { aspect-ratio: 1 / 1; }
.av-gp__t { font-size: 19px; }
.av-gp__t--f { font-size: 16px; }
.av-gp__x { margin: 0; font-size: 14px; color: var(--texte-doux); }
.av-gp__p { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.04em; color:var(--encre-marque,var(--marque)); }
.av-gp__p--f { font-size: 20px; }
.av-gp__u { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--texte-doux); letter-spacing: 0; }
.av-gp__f .lk { margin-top: auto; }

/* ============================================================
   Fiche de reference
   ============================================================ */

/* Une seule colonne centree : la rangee de tete met le repere face au prix,
   le visuel n arrive qu apres le chapeau. */
.av-fp__in { max-width: 760px; }
.av-fp__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.av-fp__p { margin: 0 0 0 auto; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.05em; color:var(--encre-marque,var(--marque)); }
.av-fp__u { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--texte-doux); letter-spacing: 0; }
.av-fp__in .ch { margin-top: 16px; }
.av-fp__vs { margin: 26px 0 0; }
.av-fp__cadre { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bordure); box-shadow: 0 0 0 var(--anneau) var(--fond-2); }
.av-fp__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-fp__in .co { margin-top: 24px; }
.av-fp__in .bt { margin-top: 22px; }

/* ============================================================
   Caracteristiques
   ============================================================ */

.av-sp__in { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-start; }
.av-sp__h { flex: 1 1 280px; min-width: 0; }
.av-sp__h .ch { margin-top: 14px; }
.av-sp__l { flex: 1 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.av-sp__r {
  flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  justify-content: space-between; align-items: center; padding: 14px 18px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-m);
}
.av-sp__lb { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--texte-doux); }
.av-sp__n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--fond);
  color:var(--encre-marque,var(--marque)); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.av-sp__vl { margin: 0; font-size: 14px; font-weight: 600; min-width: 0; }

/* ============================================================
   Maillage interne
   ============================================================ */

.av-mi__l { display: flex; flex-wrap: wrap; gap: 14px; }
.av-mi__c { flex: 1 1 300px; min-width: 0; }
.av-mi__a {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-m);
  transition: border-color var(--tr), transform var(--tr);
}
.av-mi__a:hover { border-color:var(--encre-marque,var(--marque)); transform: translateY(-2px); }
/* Le rang se lit intitule d abord, propos ensuite, la vue ferme le rang ; le
   repere est renvoye a l extreme droite de la premiere ligne. */
.av-mi__a { flex-wrap: wrap; }
.av-mi__t { flex: 0 1 auto; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.av-mi__m { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-mi__x { flex: 1 1 100%; min-width: 0; font-size: 13px; color: var(--texte-doux); }
.av-mi__vs { flex: 0 0 68px; width: 68px; height: 68px; border-radius: var(--r-s); overflow: hidden; background: var(--fond); }
.av-mi__vs .ig--nu { min-height: 68px; height: 68px; padding: 6px; }
.av-mi__vs .ig--nu i { font-size: 10px; }

/* ============================================================
   Bandeau d appel
   ============================================================ */

.av-cb { padding: 0 0 var(--sct); }
.av-cb__carte {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl);
  background: var(--accent); color: var(--fond-2); text-align: center;
}
.av-cb__vs { position: absolute; inset: 0; opacity: 0.18; }
.av-cb__vs .ig { width: 100%; height: 100%; border-radius: 0; }
.av-cb__vs .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
/* La saisie est ecrite en PREMIER dans le flux et remise sous le propos par
   `order` ; les champs tiennent sur une seule rangee. */
.av-cb__carte { display: flex; flex-direction: column; align-items: center; }
.av-cb__carte > * { position: relative; z-index: 1; max-width: 100%; }
.av-cb__carte .tt { order: 1; color: var(--fond-2); }
.av-cb__x { order: 2; margin: 16px 0 0; max-width: 52ch; font-size: 15px; color: rgb(255 255 255 / 0.74); }
.av-cb__carte .pl { order: 3; margin-top: 18px; background: transparent; border-color: rgb(255 255 255 / 0.24); color: var(--fond-2); }
.av-cb__f { order: 4; width: 100%; margin-top: 28px; text-align: left; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.av-cb__f > * { flex: 1 1 190px; min-width: 0; }
.av-cb__f .fm__lb { color: rgb(255 255 255 / 0.66); }
.av-cb__f .fm__i { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); color: var(--fond-2); }
.av-cb__f .fm__b { flex: 0 0 auto; }
.av-cb__vs { order: 5; position: absolute; inset: 0; z-index: 0; }

/* ============================================================
   Contact
   ============================================================ */

/* Ilot centre : la tete, les coordonnees puis la saisie s empilent au milieu
   de la page. Chaque champ est un LABEL englobant — intitule au-dessus,
   saisie dessous — et le bouton reste cale a gauche, jamais pleine largeur. */
.av-ct__in { max-width: 760px; text-align: center; }
.av-ct__hd { margin-bottom: 26px; }
.av-ct__x { margin-top: 16px; font-size: 15px; color: var(--texte-doux); }
.av-ct__cos { display: flex; flex-wrap: wrap; gap: 12px; }
.av-ct__co { flex: 1 1 200px; min-width: 0; padding: 18px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-m); text-align: left; }
.av-ct__cot { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-ct__col li { font-size: 14px; color: var(--texte-doux); }
.av-ct__col a:hover { color:var(--encre-marque,var(--marque)); }
.av-ct__f {
  margin-top: 26px; padding: 24px; text-align: left;
  background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l);
  display: flex; flex-wrap: wrap; gap: 14px;
}
.av-ct__c { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.av-ct__c--l { flex: 1 1 100%; }
.av-ct__lb { font-size: 13px; font-weight: 600; color: var(--texte); }
.av-ct__i {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--r-s);
}
.av-ct__i:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.av-ct__ac { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--texte-doux); }
.av-ct__ck { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color:var(--encre-marque,var(--marque)); }
.av-ct__f .bt { flex: 0 0 auto; }

/* ============================================================
   Journal
   ============================================================ */

.av-bl__l { display: flex; flex-wrap: wrap; gap: 16px; }
.av-bl__c { flex: 1 1 290px; min-width: 0; }
.av-bl__a { display: flex; flex-direction: column; height: 100%; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-l); overflow: hidden; }
.av-bl__a:hover { border-color:var(--encre-marque,var(--marque)); }
.av-bl__vs { display: block; aspect-ratio: 16 / 10; background: var(--fond); }
.av-bl__vs .ig--nu { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.av-bl__tx { display: flex; flex-direction: column; gap: 7px; padding: 18px; }
.av-bl__m { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); }
.av-bl__t { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.av-bl__x { font-size: 14px; color: var(--texte-doux); }

/* Colonne unique : la rangee de tete met la mention face au repere, le
   sommaire se lit avant le visuel, le corps ferme. */
.av-ba__in { max-width: 700px; }
.av-ba__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.av-ba__m { margin: 0 0 0 auto; order: 2; font-size: 13px; color: var(--texte-doux); }
.av-ba__hd .pl { order: 1; }
.av-ba__vs { margin: 26px 0 0; }
.av-ba__cadre { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bordure); }
.av-ba__cadre .ig--nu { min-height: 100%; height: 100%; }
.av-ba__so { margin-top: 24px; padding: 18px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--r-m); }
.av-ba__sot { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texte-doux); }
.av-ba__so li + li { margin-top: 4px; }
.av-ba__so a { font-size: 14px; color: var(--texte-doux); }
.av-ba__so a:hover { color:var(--encre-marque,var(--marque)); }
.av-ba__tx { margin-top: 30px; font-size: 16px; color: var(--texte-doux); }
.av-ba__h2 { margin: 28px 0 12px; font-size: clamp(21px, 2.4vw, 27px); color: var(--texte); }
.av-ba__h3 { margin: 22px 0 10px; font-size: 18px; color: var(--texte); }
.av-ba__en { margin: 22px 0; padding: 20px; background: var(--fond-2); border-left: 3px solid var(--marque); border-radius: var(--r-m); }
.av-ba__ent { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--texte); }

/* ============================================================
   Mentions
   ============================================================ */

/* Vis-a-vis : l intitule tient dans une colonne etroite a gauche, le texte
   lui fait face. La date de mise a jour ouvre la page, avant le repere. */
.av-lg__in { max-width: 900px; }
.av-lg__hd { margin-bottom: 30px; }
.av-lg__m { margin: 0 0 12px; font-size: 13px; color: var(--texte-doux); }
.av-lg__hd .pl { margin-top: 14px; }
.av-lg__b { display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 24px 0; border-top: 1px solid var(--bordure); }
.av-lg__t { flex: 1 1 210px; min-width: 0; margin: 0; font-size: 18px; color: var(--texte); }
.av-lg__p { flex: 3 1 340px; min-width: 0; color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   Fil d Ariane
   ============================================================ */

.av-fi { padding: 18px 0 0; }
/* Le chevron ouvre la ligne a gauche, hors de la liste, et la page courante
   est renvoyee a l extreme droite. */
.av-fi__in { display: flex; align-items: center; gap: 10px; }
.av-fi__ch { flex: 0 0 auto; width: 7px; height: 7px; border-top: 1.5px solid var(--texte-doux); border-right: 1.5px solid var(--texte-doux); transform: rotate(45deg); }
.av-fi__l { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--texte-doux); }
.av-fi__i { display: inline-flex; align-items: center; min-width: 0; }
.av-fi__i--fin { margin-left: auto; color: var(--texte); }
.av-fi__i a:hover { color:var(--encre-marque,var(--marque)); }

/* ============================================================
   Pied
   ============================================================ */

.av-pd { padding: clamp(40px, 5vw, 70px) 0 26px; border-top: 1px solid var(--bordure); }
.av-pd__in { display: flex; flex-wrap: wrap; gap: 28px 34px; }
.av-pd__mq { flex: 1 1 280px; min-width: 0; }
.av-pd__mt { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.av-pd__ds { margin: 0; font-size: 14px; color: var(--texte-doux); max-width: 38ch; }
.av-pd__pcs { display: flex; gap: 8px; margin-top: 16px; }
.av-pd__pcs i { width: 30px; height: 30px; border-radius: 50%; background: var(--fond-2); border: 1px solid var(--bordure); display: block; }
/* Les coordonnees ouvrent la bande de droite, les colonnes de liens se
   serrent a l extreme droite. */
.av-pd__nap { flex: 1 1 210px; min-width: 0; margin-left: auto; }
.av-pd__col { flex: 0 1 165px; min-width: 0; }
.av-pd__ct { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texte-doux); }
.av-pd__col li + li, .av-pd__nap li + li { margin-top: 5px; }
.av-pd__col a, .av-pd__nap li { font-size: 14px; color: var(--texte-doux); }
.av-pd__col a:hover, .av-pd__nap a:hover { color:var(--encre-marque,var(--marque)); }
.av-pd__bas {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--bordure);
}
.av-pd__lg { margin: 0; font-size: 13px; color: var(--texte-doux); }
.av-pd__ls { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.av-pd__ls a { font-size: 13px; color: var(--texte-doux); }
.av-pd__ls a:hover { color:var(--encre-marque,var(--marque)); }

@media (max-width: 600px) {
  .av-av__lg { position: static; left: auto; right: auto; bottom: auto; margin-top: 12px; border: 1px solid var(--bordure); }
  .av-ba__so { position: static; }
  .cp__lb { font-size: 10px; padding: 4px 9px; }
}

/* ================= SIGNATURES DE FORME =================
   Traits releves EN LIGNE sur arvio.framer.website, portes ici en CSS pur.
   Documentation lisible : arvio/signatures.md */

/* SIGNATURE — l ANNEAU DE FOND. Le trait le plus reconnaissable du modele :
   `0 0 0 5px` (25 occurrences) et `0 0 0 3px` (19 occurrences) d une ombre
   pleine a la COULEUR DU FOND, jamais d une bordure. La pastille est donc
   detouree du fond par un halo net qui la fait flotter au-dessus des piles,
   sans que sa boite change de taille. */
.av-av__pt, .av-vo__pt, .av-wu__pt {
  box-shadow: 0 0 0 5px var(--fond-2);
}
.jt {
  box-shadow: 0 0 0 3px var(--fond-2);
}

/* SIGNATURE — l ombre TEINTEE DE MARQUE. Le modele n a pas une seule ombre
   noire : toutes ses piles sont bleues (28,70,255) a des opacites qui montent
   de 1 a 36 pour cent. Les blocs calmes portent la pile a 1/1/3 (45 fois),
   les blocs actifs celle a 13/17/36 (8 fois). */
.av-sv__c, .av-wu__c, .av-mt__c, .av-b2__c {
  box-shadow:
    0 .4px 1.3px -.4px color-mix(in srgb, var(--marque) 3%, transparent),
    0 1.6px 4.8px -.8px color-mix(in srgb, var(--marque) 3%, transparent),
    0 7px 21px color-mix(in srgb, var(--marque) 6%, transparent);
}
.bt--plein {
  box-shadow:
    0 .4px .9px -.4px color-mix(in srgb, var(--marque) 13%, transparent),
    0 1.6px 3.5px -.8px color-mix(in srgb, var(--marque) 17%, transparent),
    0 7px 15px color-mix(in srgb, var(--marque) 36%, transparent);
}

/* SIGNATURE — le fond de marque est un DEGRE RADIAL a foyer haut-droit
   (`radial-gradient(88% 75%, marque 37% -> marque clair 100%)`, releve 33
   fois toutes variantes confondues). Le modele n emploie presque jamais
   l aplat pour sa couleur : la surface bleue est toujours bombee. */
.bt--plein, .av-za__a, .av-hd__cube, .av-sv__cube {
  background-image: radial-gradient(
    88% 75% at 88% 25%,
    var(--marque) 37%,
    color-mix(in srgb, var(--fond) 24%, var(--marque)) 100%);
}

/* SIGNATURE — la vue est TAILLEE PAR UN FOYER OVALE : deux masques radiaux
   `radial-gradient(50% 75% at 19.6% 25.9%, plein 44.5% -> transparent 87%)`.
   Le modele ne coupe pas ses images au carre, il les fait fondre depuis un
   point haut-gauche. */
.av-af__cadre .frame {
  -webkit-mask-image: radial-gradient(65% 84% at 21% 24%, #000 45%, transparent 87%);
  mask-image: radial-gradient(65% 84% at 21% 24%, #000 45%, transparent 87%);
}

/* SIGNATURE — la file s efface aux DEUX bouts, a deux ecartements distincts :
   8/92 pour cent (2 occurrences) pour les longues pistes, 25/75 pour cent
   (2 occurrences) pour les courtes. Le modele ne ferme jamais une file net. */
.av-mq__u {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.av-rp__u {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
}

/* SIGNATURE — la piece qui COIFFE n arrondit que ses deux coins hauts
   (`27px 27px 0 0` trois fois, `32px 32px 0 0` une fois) : le panneau se lit
   comme la suite du bloc qui le porte, jamais comme une carte detachee. */
.av-vo__carte { border-radius: 27px 27px 0 0; }
.av-qs__pl { border-radius: 32px 32px 0 0; }

/* ============================================================
   NORME COQUILLE — CE QUE LE GABARIT TIENT (R3, R5a, R7, T5)
   ------------------------------------------------------------
   Ce bloc ferme la feuille : il vient APRES les regles generiques pour
   que ses paliers gagnent une cascade a specificite egale. Rien ici ne
   depend de la matiere ; tout se lit sur une fixture vide comme pleine.
   ============================================================ */

/* --- R3 : une largeur par grille, en pistes COMPTEES ---------
   `flex: 1 1 base` laisse le dernier orphelin s etaler sur toute la
   rangee : deux largeurs pour une meme famille de cartes. On declare
   donc un nombre de colonnes a chaque palier ; `minmax(0, 1fr)` garde
   les pistes egales et autorise le contenu long a se replier. */
.av-af__ats, .av-sv__l, .av-wu__l, .av-mt__l, .av-b2__l, .av-za__l { display: grid; }
.av-sv__l, .av-b2__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.av-af__ats, .av-wu__l, .av-mt__l, .av-za__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1200px) {
  .av-af__ats, .av-wu__l, .av-mt__l, .av-za__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .av-af__ats, .av-sv__l, .av-wu__l, .av-mt__l, .av-b2__l, .av-za__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .av-af__ats, .av-sv__l, .av-wu__l, .av-mt__l, .av-b2__l, .av-za__l { grid-template-columns: minmax(0, 1fr); }
}

/* --- R5a : le cadre du journal tient son ratio dans les deux etats ---
   `.av-bl__vs` est un enfant de colonne flex : sa taille de contenu
   (la hauteur intrinseque de l image) primait sur son `aspect-ratio`.
   On sort le contenu du flux : le cadre mesure 0, le 16/10 gouverne. */
.av-bl__vs { position: relative; overflow: hidden; }
.av-bl__vs > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- T5 : un prix est un jeton, il ne se coupe pas en deux lignes ;
       sa mention descend en dessous, alignee sur lui. --- */
.av-gp__p { white-space: nowrap; }
p.av-gp__u { margin: 4px 0 0; }

/* --- R7 : la paire appel + devis ------------------------------
   Un point de conversion porte les DEUX portes. Le contenant est un
   simple rang qui se replie ; le bouton creux est la variante claire
   des panneaux sombres (panneau expertise, carte du bandeau). */
.bt--creux { background: transparent; border-color: rgb(255 255 255 / 0.34); color: var(--fond-2); }
.bt--creux:hover { border-color: rgb(255 255 255 / 0.62); }
.av-ex__b, .av-cb__b, .av-ct__b { display: flex; flex-wrap: wrap; gap: 12px; }
.av-ex__b { margin-top: 22px; }
.av-ct__b { flex: 1 1 100%; }
.av-cb__f .av-cb__b { flex: 0 0 auto; }

@media (max-width: 600px) {
  /* T5 : la ligne de certification serrait le titre a quelques ems entre
     la coche et la mention de droite ; on la replie sur deux rangees. */
  .av-gr__r { flex-wrap: wrap; }
  .av-gr__x { flex: 1 1 100%; text-align: left; }
}

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Aucun cadre porteur : toute l encre de cette coquille repose sur ses
   sections, pas sur ses cadres. Les cadres vides restent clairs. */
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */
/* contraste-bandes (2026-09-15) — regles portees par la carte qui peint le fond.
   1. Carte de zone (.av-za__a). Deux regles se contredisaient : la carte declare un fond CLAIR (--fond-2,
      filet --bordure, filet de marque au survol) et des encres pensees pour lui (titre --texte, commune
      --texte-doux, departement --marque) ; mais la SIGNATURE « fond de marque en degre radial » la liste
      avec les boutons pleins et lui peint la marque par-dessus. Mesure (gate voile, lecture pleine
      hauteur) : titre #0A0B10 sur bleu 3,27, commune 1,35, departement 1,00 — marque sur marque, invisible
      au gate de contraste qui lit le fond clair annonce. La carte garde le fond qu elle declare ; la
      signature reste sur les boutons pleins et les cubes. */
.av-za__l .av-za__a { background-image: none; }