/* ════════════════════════════════════════════════════════════════════
   SITE PLM — une seule feuille
   ────────────────────────────────────────────────────────────────────
   Guilloché serré (le motif des billets), noir premium pour les unes,
   crème et cadres noirs pour l'éditorial. Aucune police distante :
   Georgia pour les titres, la police du système pour le texte.
   ════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --creme:#F7F2E7; --creme2:#EFE6D5; --encre:#1A140E; --gris:#6B6053;
  --or:#C8963E; --or-clair:#F0D08A; --vert:#1B5A3C; --terre:#9C4A1E;
  --nuit:#120E09;
}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--encre);
  font:16px/1.62 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* ⚠️ `height:auto` EST OBLIGATOIRE depuis que les captures portent des
   attributs width/height (2026-09-21, pour réserver leur place et
   réparer les ancres). Sans lui, la largeur vient du CSS et la hauteur
   de l'attribut HTML : toutes les images étaient écrasées. Les règles
   plus bas qui fixent une hauteur (.art .vue img, .voisin img) restent
   prioritaires, elles sont plus spécifiques. */
a{color:inherit;text-decoration:none}
.serif{font-family:Georgia,"Times New Roman",serif}
.cadre{max-width:1700px;margin:0 auto;padding:0 68px}

/* ── LE GUILLOCHÉ ──────────────────────────────────────────────────
   Trois trames de pas différents : cercles, croisillons, rayures.
   Serré comme un billet, assez pâle pour qu'on lise par-dessus. */
.guilloche{
  background-color:var(--creme);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%231A140E' stroke-opacity='.13' stroke-width='.6'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%231A140E' stroke-opacity='.09' stroke-width='.5'%3E%3Cpath d='M0 0L16 16M16 0L0 16'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(26,20,14,.045) 0 1px, transparent 1px 7px);
  background-size:48px 48px, 16px 16px, auto}
.guilloche-sombre{
  background-color:var(--nuit);color:var(--creme);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23C8963E' stroke-opacity='.22' stroke-width='.6'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%23C8963E' stroke-opacity='.12' stroke-width='.5'%3E%3Cpath d='M0 0L16 16M16 0L0 16'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 50% 0%, rgba(200,150,62,.16), transparent 70%);
  background-size:48px 48px, 16px 16px, auto}

/* ── BARRE ─────────────────────────────────────────────────────────── */
header{border-bottom:2px solid var(--encre);background:rgba(247,242,231,.94);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.barre{display:flex;align-items:center;gap:32px;height:92px}
.logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.logo b{font-weight:900;letter-spacing:.2em;font-size:15px;display:block}
.logo small{display:block;font-size:10px;letter-spacing:.16em;color:var(--gris);font-weight:700}
nav{margin-left:auto;display:flex;gap:24px;font-size:12px;text-transform:uppercase;
  letter-spacing:.11em;font-weight:700;color:var(--gris)}
nav a:hover,nav a.actif{color:var(--encre)}
.cta{background:var(--terre);color:var(--creme);font-weight:800;padding:14px 22px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cta:hover{background:var(--encre)}

/* ── UNE ───────────────────────────────────────────────────────────── */
.une,.une-produit{border-bottom:2px solid var(--encre)}
.une .cadre,.une-produit .cadre{padding-top:84px;padding-bottom:68px}
.chapo{display:inline-flex;align-items:center;gap:12px;color:var(--or);letter-spacing:.28em;
  font-size:12px;font-weight:800;text-transform:uppercase}
.chapo:before{content:"";width:54px;height:1px;background:currentColor}
h1{font-size:clamp(40px,6vw,104px);line-height:.99;letter-spacing:-.03em;margin:22px 0 18px;max-width:17ch}
h1 em{font-style:italic;color:var(--or)}
.une .intro,.une-produit .intro{font-size:20px;color:#D9CFBE;max-width:64ch}
.accroche{font-size:26px;color:var(--creme);max-width:46ch;margin-bottom:12px}
.retour{display:inline-block;margin-bottom:22px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#C6BAA6}
.une-produit .chapo{display:flex}
.retour:hover{color:var(--or)}
.actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{padding:16px 26px;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.btn.plein{background:var(--or);color:#1A1205}
.btn.plein:hover{background:var(--or-clair)}
.btn.vide{border:2px solid rgba(247,242,231,.4);color:var(--creme)}
.btn.vide:hover{border-color:var(--or);color:var(--or)}
.bandeau{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;
  border-top:1px solid rgba(200,150,62,.4)}
.bandeau div{padding:24px;border-right:1px solid rgba(200,150,62,.25)}
.bandeau div:last-child{border-right:0}
.bandeau b{display:block;font-size:40px;line-height:1}
.bandeau span{font-size:11.5px;color:#B9AD99;text-transform:uppercase;letter-spacing:.12em;font-weight:700}

/* ── ÉCRAN VEDETTE ─────────────────────────────────────────────────── */
.vedette{border-bottom:2px solid var(--encre);background:var(--creme2)}
.vedette .cadre{padding-top:56px;padding-bottom:56px}
.vedette figure{border:2px solid var(--encre);background:#fff;box-shadow:22px 22px 0 rgba(26,20,14,.10)}
.vedette figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 24px;border-top:2px solid var(--encre);font-size:14px;color:var(--gris)}
.vedette figcaption b{color:var(--encre);font-size:16px}

/* ── SECTIONS ──────────────────────────────────────────────────────── */
section{padding:100px 0}
h2{font-size:clamp(32px,4vw,62px);letter-spacing:-.03em;max-width:20ch;margin-bottom:14px}
.intro{font-size:18.5px;color:var(--gris);max-width:72ch;margin-bottom:52px}

/* ── CATALOGUE ─────────────────────────────────────────────────────── */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.art{background:#fff;border:2px solid var(--encre);display:flex;flex-direction:column;
  box-shadow:14px 14px 0 rgba(26,20,14,.07);transition:transform .18s ease,box-shadow .18s ease}
.art:hover{transform:translate(-3px,-3px);box-shadow:18px 18px 0 rgba(26,20,14,.12)}
.art .vue{position:relative;border-bottom:2px solid var(--encre);overflow:hidden;aspect-ratio:16/10;display:block}
.art .vue img{width:100%;height:100%;object-fit:cover;object-position:top left}
.art .bande{position:absolute;left:0;top:0;bottom:0;width:8px;z-index:2}
.art .txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .metier{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:900}
.art h3{font-size:27px;letter-spacing:-.018em}
.art p{font-size:15.5px;color:var(--gris)}
.art ul{list-style:none;border-top:1px solid rgba(26,20,14,.16);padding-top:12px;margin-top:4px}
.art li{font-size:14px;padding:6px 0 6px 18px;position:relative;border-bottom:1px dotted rgba(26,20,14,.18)}
.art li:last-child{border-bottom:0}
.art li:before{content:"";position:absolute;left:0;top:14px;width:9px;height:2px;background:currentColor;opacity:.7}
.art .lien{margin-top:auto;padding-top:14px;font-weight:800;font-size:13px;letter-spacing:.06em}

/* ── SOCLE ─────────────────────────────────────────────────────────── */
.socle{border-top:2px solid var(--encre);border-bottom:2px solid var(--encre)}
.socle h2{color:var(--creme)}
.socle .intro{color:#C6BAA6}
.socle-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 54px}
.socle h4{font-size:21px;margin:10px 0 8px}
.socle p{color:#C6BAA6;font-size:15.5px}
.socle .num{color:var(--or);font-weight:900;letter-spacing:.22em;font-size:12px}

/* ── PAGE LOGICIEL ─────────────────────────────────────────────────── */
.distinctions .trois{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.distinctions .trois div{border-top:2px solid var(--encre);padding-top:18px}
.distinctions .num{font-weight:900;letter-spacing:.2em;font-size:13px;display:block;margin-bottom:8px}
.distinctions p{font-size:18px}
.ecrans .ecran{display:grid;grid-template-columns:1.55fr 1fr;gap:38px;align-items:center;
  margin-bottom:56px}
.ecrans .ecran.inverse{grid-template-columns:1fr 1.55fr}
.ecrans .ecran.inverse .image{order:2}
.ecrans .image{border:2px solid var(--encre);background:#fff;box-shadow:16px 16px 0 rgba(26,20,14,.08)}
.ecrans figcaption{display:flex;flex-direction:column;gap:10px}
.ecrans figcaption b{font-size:30px;letter-spacing:-.02em}
.ecrans figcaption span{font-size:17px;color:var(--gris)}
.ecrans .pastille{width:44px;height:44px;border-radius:50%;color:#fff;font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.technique h2{color:var(--creme)}
.technique dl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(200,150,62,.3);
  border:1px solid rgba(200,150,62,.3)}
.technique dl > div{background:var(--nuit);padding:22px 24px}
.technique dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);font-weight:800}
.technique dd{font-size:16px;margin-top:6px}
.technique .actions{margin-top:38px}
.voisins .quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.voisin{background:#fff;border:2px solid var(--encre);display:block;position:relative;
  box-shadow:10px 10px 0 rgba(26,20,14,.07)}
.voisin img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:2px solid var(--encre)}
.voisin .bande{position:absolute;left:0;top:0;width:7px;bottom:0;z-index:2}
.voisin .nom{display:block;padding:16px 18px}
.voisin .nom b{display:block;font-size:17px}
.voisin .nom span{font-size:13px;color:var(--gris)}

/* ── TARIFS · CONTACT · APPEL ──────────────────────────────────────── */
.appel{background:var(--creme2);border-top:2px solid var(--encre)}
.appel .actions .btn.vide{border-color:var(--encre);color:var(--encre)}
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:34px}
.offre{background:#fff;border:2px solid var(--encre);padding:30px 28px;box-shadow:12px 12px 0 rgba(26,20,14,.07)}
.offre.mise-en-avant{background:var(--nuit);color:var(--creme);border-color:var(--encre)}
.offre h3{font-size:26px;margin-bottom:8px}
.offre .prix{font-size:15px;color:var(--or);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:16px}
.offre ul{list-style:none}
.offre li{padding:8px 0 8px 20px;position:relative;font-size:15.5px;border-bottom:1px dotted rgba(26,20,14,.18)}
.offre.mise-en-avant li{border-color:rgba(200,150,62,.3)}
.offre li:before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;background:var(--or)}
.note{font-size:15.5px;color:var(--gris);max-width:80ch}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.contact h3{font-size:24px;margin-bottom:10px}
.contact .grand{font-size:24px;font-weight:700;margin-bottom:8px}
.contact p{color:var(--gris)}
.contact ul{list-style:none;color:var(--gris)}
.contact li{padding:6px 0 6px 18px;position:relative}
.contact li:before{content:"";position:absolute;left:0;top:14px;width:9px;height:2px;background:var(--or)}

/* ── PIED ──────────────────────────────────────────────────────────── */
footer{border-top:2px solid var(--encre);background:var(--creme2)}
.pied{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:44px;padding-bottom:44px;
  flex-wrap:wrap;font-size:14px;color:var(--gris)}
.pied b{display:block;color:var(--encre)}
.pied .liens{display:flex;gap:22px;flex-wrap:wrap}
.pied .liens a:hover{color:var(--encre)}

/* ── TÉLÉPHONE ─────────────────────────────────────────────────────── */
/* La barre passe sur deux lignes bien avant d'être à l'étroit : mesuré,
   le bouton d'appel débordait de 151 px entre 760 et 1024 px. */
@media (max-width:1080px){
  .barre{height:auto;padding:14px 0;flex-wrap:wrap;gap:14px}
  nav{order:3;width:100%;margin-left:0;gap:18px;flex-wrap:wrap}
  .cta{margin-left:auto}
}
@media (max-width:1100px){
  .cadre{padding:0 28px}
  .journal{grid-template-columns:repeat(2,1fr)}
  .socle-grille,.distinctions .trois,.contact,.offres{grid-template-columns:repeat(2,1fr)}
  .technique dl{grid-template-columns:repeat(2,1fr)}
  .voisins .quatre{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .barre{height:auto;padding:14px 0;flex-wrap:wrap;gap:14px}
  nav{order:3;width:100%;margin-left:0;gap:16px;flex-wrap:wrap}
  .cta{padding:12px 16px;font-size:11px}
  .une .cadre,.une-produit .cadre{padding-top:52px;padding-bottom:46px}
  section{padding:64px 0}
  .bandeau{grid-template-columns:repeat(2,1fr)}
  .bandeau div{border-right:0;border-bottom:1px solid rgba(200,150,62,.25)}
  .coords{grid-template-columns:1fr}
  .coord{padding:20px 18px}
  .coord .tel{font-size:21px;word-break:break-word}
  .coord.courriel .tel{font-size:16px}
  .coord .whatsapp{margin-left:0;display:block;margin-top:6px}
  /* Le tableau des prix : deux colonnes suffisent sur un telephone. */
  .grille-prix tr > *:nth-child(2){display:none}
  .grille-prix td a{white-space:normal}
  .grille-prix{table-layout:fixed;width:100%}
  .grille-prix th,.grille-prix td{padding:12px 13px}
  .grille-prix .montant{font-size:18px}
  .grille-prix td a{font-size:14.5px;gap:8px}
  .grille-prix thead th{font-size:10px;letter-spacing:.1em}
  .grille-prix{box-shadow:6px 6px 0 rgba(26,20,14,.07)}
  .prix-produit b{font-size:25px}
  .journal,.socle-grille,.distinctions .trois,.contact,.offres,
  .voisins .quatre,.technique dl{grid-template-columns:1fr}
  .ecrans .ecran,.ecrans .ecran.inverse{grid-template-columns:1fr;gap:20px}
  .ecrans .ecran.inverse .image{order:0}
  .vedette figure,.art,.offre,.voisin,.ecrans .image{box-shadow:8px 8px 0 rgba(26,20,14,.08)}
  .accroche{font-size:21px}
  .ecrans figcaption b{font-size:24px}
}

/* ── LES PRIX ──────────────────────────────────────────────────────── */
.prix-produit{margin-top:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:15px;color:rgba(247,242,231,.78)}
.prix-produit b{font-family:var(--serif);font-size:30px;color:var(--or);letter-spacing:-.02em}
.prix-produit .sep{opacity:.45}
.prix-carte{margin-top:auto;padding-top:12px;font-size:14px;color:var(--gris)}
.prix-carte b{font-family:var(--serif);font-size:22px;color:var(--encre);margin-right:7px}
.art .lien{margin-top:10px}

.grille-prix{width:100%;border-collapse:collapse;border:2px solid var(--encre);background:#fff;
  box-shadow:12px 12px 0 rgba(26,20,14,.07)}
.grille-prix th,.grille-prix td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(26,20,14,.16)}
.grille-prix thead th{background:var(--nuit);color:var(--creme);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:800;border-bottom:2px solid var(--encre)}
.grille-prix td a{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.grille-prix .point{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.grille-prix .pour{color:var(--gris);font-size:14px}
.grille-prix .montant{text-align:right;font-family:var(--serif);font-size:21px;white-space:nowrap}
.grille-prix tbody tr:last-child td{border-bottom:0}
.grille-prix .sup td{background:var(--creme2);font-weight:700}
.grille-prix .sup .montant{color:var(--terre)}

/* ── NOS REPRÉSENTANTS ─────────────────────────────────────────────── */
.coords{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.coord{background:#fff;border:2px solid var(--encre);padding:24px 26px;
  box-shadow:10px 10px 0 rgba(26,20,14,.07)}
.coord .ville{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:900;color:var(--or);margin-bottom:8px}
.coord .tel{display:inline-block;font-family:var(--serif);font-size:26px;letter-spacing:-.02em}
.coord .whatsapp{display:inline-block;margin-left:12px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#1F7A4C;border-bottom:1px solid currentColor}
.coord b{display:block;margin-top:12px;font-size:16px}
.coord .role{display:block;font-size:13.5px;color:var(--gris);margin-top:3px;line-height:1.5}
.coord.courriel .tel{font-size:21px}

/* ── LA PREUVE DU TICKET ───────────────────────────────────────────── */
.preuve{background:var(--creme2);border-top:2px solid var(--encre);border-bottom:2px solid var(--encre)}
.preuve .cadre{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.preuve-texte h2{font-size:38px;letter-spacing:-.022em;margin:10px 0 14px}
.preuve-texte p{font-size:16.5px;color:var(--gris);line-height:1.7}
.preuve-image{border:2px solid var(--encre);background:#fff;box-shadow:14px 14px 0 rgba(26,20,14,.08)}
.preuve-image img{display:block;width:100%;max-height:640px;object-fit:contain;background:#fff;padding:12px}
@media (max-width:900px){
  .preuve .cadre{grid-template-columns:1fr;gap:26px}
  .preuve-texte h2{font-size:30px}
}

/* ── LE BOUTON WHATSAPP ────────────────────────────────────────────── */
/* Le vert de WhatsApp : reconnu sans lire. Le message part deja ecrit. */
.btn.vert{background:#1F7A4C;color:#fff;border:2px solid #1F7A4C;
  display:inline-flex;align-items:center;gap:9px}
.btn.vert:before{content:"";width:17px;height:17px;flex-shrink:0;background:#fff;
  -webkit-mask:var(--ico-wa) center/contain no-repeat;mask:var(--ico-wa) center/contain no-repeat}
.btn.vert:hover{background:#17603B;border-color:#17603B}
:root{--ico-wa:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.18 8.18 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23a8.2 8.2 0 0 1 8.24 8.24c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.08.15-1.18-.06-.11-.23-.17-.48-.29z'/%3E%3C/svg%3E")}
@media (max-width:760px){ .btn.vert{width:auto} }

.preuve .provenance{margin-top:14px;font-size:13.5px;color:var(--gris);
  border-left:2px solid rgba(26,20,14,.22);padding-left:12px;line-height:1.6}

/* ════════════════════════════════════════════════════════════════════
   MOUVEMENT — ajouté le 2026-09-20
   ────────────────────────────────────────────────────────────────────
   Le site n'avait aucune animation et aucun script. Il en a désormais
   un seul, minuscule, et ces règles.

   PROGRESSIF, DANS CE SENS-LÀ. Sans JavaScript, la page reste
   ENTIÈREMENT VISIBLE : l'état de départ n'existe que sous `.mouvement`,
   classe que le script pose sur <html> avant le premier affichage. Un
   visiteur qui bloque le JS, un robot d'indexation, l'aperçu WhatsApp
   voient la page complète. On n'échange pas du contenu contre un effet.

   VERTICAL SEULEMENT. Un glissement latéral sur les écrans alternés
   (.ecran / .ecran.inverse) serait plus joli, mais `.inverse` déborderait
   à droite et ferait apparaître une barre horizontale — ce que _verif/
   traque précisément.

   PAS DE `scale`. Georgia rendu pendant un changement d'échelle devient
   flou : sur un site dont les titres SONT le dessin, c'est perdant.
   ════════════════════════════════════════════════════════════════════ */

/* La courbe : rapide puis posée. Jamais `linear`, qui fait mécanique. */
/* ⚠️ `translate`, PAS `transform`. Les cartes du catalogue ont déjà un
   `transform` au survol : une révélation écrite en `transform` l'aurait
   écrasé, et le soulèvement au survol aurait disparu sans bruit. Les
   deux propriétés sont indépendantes et se composent. */
.mouvement .entre{
  opacity:0; translate:0 16px;
  transition:opacity .52s cubic-bezier(.22,.61,.36,1),
             translate .52s cubic-bezier(.22,.61,.36,1)}
.mouvement .entre.vu{opacity:1; translate:none}

/* Une fois arrivé, l'élément ne garde AUCUN décalage : il ne devient
   donc le bloc conteneur d'aucun `position:fixed` ou `sticky`. */

/* ── LA UNE ────────────────────────────────────────────────────────
   En CSS pur, sans le script : une animation se termine toujours, donc
   le titre finit visible même si le JavaScript ne s'exécute jamais.
   Trois temps — le titre, la phrase, les boutons. Pas quatre. */
@keyframes plmMonte{from{opacity:0;transform:translateY(18px)}
                    to{opacity:1;transform:none}}
.une h1, .une .intro, .une .actions,
.une-produit h1, .une-produit .chapo, .une-produit .actions{
  animation:plmMonte .62s cubic-bezier(.22,.61,.36,1) backwards}
.une .intro, .une-produit .chapo{animation-delay:.10s}
.une .actions, .une-produit .actions{animation-delay:.20s}

/* ── RESPECT DU RÉGLAGE SYSTÈME ────────────────────────────────────
   Windows et macOS savent dire « moins de mouvement ». On obéit, et on
   coupe aussi le défilement doux déclaré plus haut : il fait partie du
   mouvement, et l'oublier laissait la moitié du réglage sans effet. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mouvement .entre{opacity:1;translate:none;transition:none}
  .une h1, .une .intro, .une .actions,
  .une-produit h1, .une-produit .chapo, .une-produit .actions{animation:none}
}

/* ════════════════════════════════════════════════════════════════════
   LA TÊTE DE CARTE DU CATALOGUE — refaite le 2026-09-20
   ────────────────────────────────────────────────────────────────────
   AVANT : les neuf cartes étaient interchangeables. L'accent du métier
   tenait dans un filet de 8 px, et la capture encartée faisait 150 px
   de large — à cette taille, un plan de salle, un planning de chambres
   et un grand livre sont la même bouillie grise. Il fallait LIRE neuf
   titres pour trouver le sien.

   APRÈS : la couleur du métier prend toute la tête de la carte, et
   porte un pictogramme au trait. On reconnaît un lit, une croix, une
   balance à trois mètres de l'écran.

   DESSIN AU TRAIT, jamais plein : c'est l'écriture du guilloché qui
   court sous tout le site, celle d'un billet gravé. Un pictogramme
   plein aurait dit « application mobile » sur un site qui dit
   « imprimerie ».

   Ces règles viennent APRÈS celles du haut de la feuille, et les
   remplacent : à spécificité égale, la dernière gagne.
   ════════════════════════════════════════════════════════════════════ */
.art{--c:var(--or)}
.art .vue{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:auto; height:138px; overflow:hidden;
  background:var(--c); border-bottom:2px solid var(--encre)}

/* Le guilloché, en crème par-dessus la couleur du métier. La même
   trame que le fond du site : la carte appartient à la page.
   Le voile sombre qui l'accompagne sert à UNE chose — garantir que le
   pictogramme crème reste lisible même sur l'ocre de l'hôtel, la plus
   claire des neuf couleurs (3,31:1 sur la crème, mesuré). */
.art .vue:before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23F7F2E7' stroke-opacity='.30' stroke-width='.7'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='15'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3Ccircle cx='24' cy='24' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%23F7F2E7' stroke-opacity='.16' stroke-width='.5'%3E%3Cpath d='M0 0L16 16M16 0L0 16'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(26,20,14,.10), rgba(26,20,14,.34));
  background-size:48px 48px, 16px 16px, auto}

.art .picto{
  position:relative; width:62px; height:62px;
  fill:none; stroke:var(--creme); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:scale .35s cubic-bezier(.22,.61,.36,1)}
/* `scale` et non `transform` : la carte se sert déjà de `transform` au
   survol, et `translate`/`scale` sont des propriétés indépendantes. */
.art:hover .picto{scale:1.07}

/* Le numéro d'ordre, gravé dans le coin. Il donne à la grille son
   allure de planche numérotée, et il aide à dire « le 04 ». */
.art .rang{
  position:absolute; right:15px; bottom:4px;
  font-size:38px; line-height:1; letter-spacing:-.02em;
  color:rgba(247,242,231,.34)}

/* Le filet vertical d'avant n'a plus de raison d'être : la couleur
   occupe toute la tête. On le neutralise ici plutôt que d'aller le
   chercher en deux endroits plus haut. */
.art .bande{display:none}

@media (max-width:900px){
  .art .vue{height:112px}
  .art .picto{width:52px;height:52px}
  .art .rang{font-size:30px}
}

/* ════════════════════════════════════════════════════════════════════
   LA PROMOTION — ajoutée le 2026-09-20
   ────────────────────────────────────────────────────────────────────
   Tout se commande depuis `PROMO` dans v2/contenu.js. `actif: false`
   éteint l'étiquette, le prix barré et le bandeau d'un seul coup.

   LE PRIX BARRÉ N'EST PAS UN PRIX. Il est plus petit, gris, et sa barre
   est franche : l'œil doit attraper le NOUVEAU montant en premier. Un
   ancien prix aussi gros que le nouveau fait hésiter au lieu de vendre.
   ════════════════════════════════════════════════════════════════════ */

/* L'ancien montant. `text-decoration` explicite : certains navigateurs
   retirent le trait par défaut de <s> quand on change la couleur. */
.prix-ancien{
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px; color:var(--gris); margin-right:8px;
  text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(26,20,14,.55)}

/* ⚠️ SUR FOND SOMBRE, LE GRIS DISPARAÎT. La une des pages logiciel est
   noire : l'ancien montant en var(--gris) #6B6053 y devenait illisible,
   alors qu'il allait très bien sur la crème du catalogue. Même élément,
   deux fonds — il faut les deux couleurs. */
.une-produit .prix-ancien, .guilloche-sombre .prix-ancien{
  color:rgba(247,242,231,.58);
  text-decoration-color:rgba(247,242,231,.65)}

/* La remise, à côté du nouveau prix. */
.prix-remise{
  display:inline-block; margin-left:8px; vertical-align:2px;
  padding:3px 8px; border:1.5px solid currentColor; border-radius:2px;
  font-size:11px; font-weight:900; letter-spacing:.08em;
  color:var(--c, var(--terre))}

/* L'étiquette sur la tête de carte : coin haut gauche, crème sur la
   couleur du métier, pour qu'on la voie avant même de lire le titre. */
.art .etiquette{
  position:absolute; left:0; top:14px; z-index:3;
  padding:5px 12px 5px 14px;
  background:var(--creme); color:var(--encre);
  border:2px solid var(--encre); border-left:0;
  font-size:12px; font-weight:900; letter-spacing:.07em; white-space:nowrap}

/* Le bandeau d'annonce, sous le chapeau du catalogue. */
.annonce-promo{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin-top:22px; padding:14px 20px;
  border:2px solid var(--encre); border-left:8px solid var(--terre);
  background:var(--creme2)}
.annonce-promo b{
  font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terre)}
.annonce-promo span{font-size:15px; color:var(--encre)}

/* Dans le tableau des tarifs, l'ancien prix passe sur sa propre ligne :
   côte à côte, les deux montants débordaient de la colonne sur
   téléphone et se lisaient comme une fourchette de prix. */
.montant .prix-ancien{display:block; margin:0 0 2px; font-size:14px}

@media (max-width:900px){
  .art .etiquette{top:10px; font-size:11px; padding:4px 10px}
  .annonce-promo{padding:12px 14px}
}

/* ════════════════════════════════════════════════════════════════════
   ANCRES ET SECONDE PREUVE — 2026-09-20
   ────────────────────────────────────────────────────────────────────
   SIGNALÉ : « Démonstration ramène sur la facture normalisée DGI ».
   L'ancre était pourtant juste. Deux causes se cumulaient :

   1. l'en-tête est COLLANT sur 92 px. Sans marge de défilement, le
      titre visé se range DERRIÈRE la barre et l'œil ne voit que la fin
      de la section précédente — la facture DGI, justement ;
   2. les captures étaient en `loading="lazy"` SANS dimensions : elles
      n'occupaient aucune place tant qu'elles n'étaient pas chargées, se
      chargeaient après le saut et poussaient la page vers le bas.
      Corrigé dans la fabrique, qui lit maintenant assets/dimensions.js.
   ════════════════════════════════════════════════════════════════════ */
:target, section[id], div[id]{scroll-margin-top:108px}
@media (max-width:900px){ :target, section[id], div[id]{scroll-margin-top:84px} }

/* Deux preuves à la suite ne doivent pas se ressembler : la seconde
   inverse texte et image, et change de fond. Sinon la page bégaie. */
.preuve-inverse{background:var(--creme)}
.preuve-inverse .preuve-texte{order:2}
.preuve-inverse .preuve-image{order:1}
@media (max-width:900px){
  .preuve-inverse .preuve-texte{order:1}
  .preuve-inverse .preuve-image{order:2}
}


/* Un document servi en UNE seule taille (voir captureSimple dans la
   fabrique) : on ne l'étire pas à la largeur du cadre. `width:100%`
   l'aurait agrandi de 444 à ~700 px — du flou promettant du net. Il
   s'affiche à sa taille réelle, centré sur la feuille. */
.preuve-image img.document{
  width:auto; max-width:100%; max-height:560px; margin:0 auto; padding:18px}


/* ════════════════════════════════════════════════════════════════════
   LE STATUT D'UN LOGICIEL — 2026-09-21
   ────────────────────────────────────────────────────────────────────
   Seul ce qui n'est PAS encore livrable porte une pastille. « Disponible »
   est l'état normal : une pastille verte sur les neuf cartes ne
   distinguerait plus rien, elle ne ferait que du bruit.
   ════════════════════════════════════════════════════════════════════ */
.statut{
  display:inline-block; margin-left:10px; vertical-align:2px;
  padding:3px 9px; border:1.5px solid var(--sc, var(--gris));
  border-radius:2px; background:transparent; color:var(--sc, var(--gris));
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  font-size:10.5px; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap}
.statut-grand{
  margin-left:16px; vertical-align:middle;
  padding:5px 13px; font-size:12px; border-width:2px}
@media (max-width:900px){
  .statut-grand{display:block; margin:14px 0 0; width:max-content}
}


/* ════════════════════════════════════════════════════════════════════
   LA BOUCLE VIDÉO — 2026-09-21
   ────────────────────────────────────────────────────────────────────
   Même traitement que les captures : cadre noir, ombre portée dure.
   La vidéo appartient à la page, elle n'est pas posée dessus.
   ════════════════════════════════════════════════════════════════════ */
.film{background:var(--creme2);border-top:2px solid var(--encre);
  border-bottom:2px solid var(--encre)}
.film .cadre{padding-top:52px;padding-bottom:52px}
.film h2{font-size:34px;letter-spacing:-.022em;margin:0 0 22px;max-width:22ch}
.film figure{border:2px solid var(--encre);background:#fff;
  box-shadow:18px 18px 0 rgba(26,20,14,.10)}
.film video{display:block;width:100%;height:auto;background:#fff}
.film figcaption{border-top:2px solid var(--encre);padding:11px 16px;
  font-size:13px;color:var(--gris)}
@media (max-width:900px){
  .film .cadre{padding-top:34px;padding-bottom:34px}
  .film h2{font-size:26px}
  .film figure{box-shadow:10px 10px 0 rgba(26,20,14,.10)}
}

/* ════════════════════════════════════════════════════════════════════
   LA LOUPE — 2026-09-24
   Ces regles MANQUAIENT : la surcouche etait un <div> sans style, pose
   en bas de page (position:static), pendant que le script bloquait le
   defilement. Elle est maintenant fixe, plein ecran, au-dessus de tout.
   ════════════════════════════════════════════════════════════════════ */
html.loupe-ouverte,html.loupe-ouverte body{overflow:hidden}
.loupe{position:fixed;inset:0;z-index:2147483000;display:flex;
  align-items:center;justify-content:center;padding:56px 16px 16px;
  box-sizing:border-box;background:rgba(20,15,10,.92);cursor:zoom-out;
  overscroll-behavior:contain}
.loupe img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:default}
.loupe-fermer{position:absolute;top:10px;right:12px;width:44px;height:44px;
  border:2px solid #fff;border-radius:50%;background:#1a140e;color:#fff;
  font:700 20px/1 system-ui,sans-serif;cursor:pointer;z-index:1}
.loupe-fermer:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}

/* ════════════════════════════════════════════════════════════════════
   INTERFACE — ORDINATEUR ET TÉLÉPHONE (2026-09-27)
   Mesuré à 390 px : menu coupé au bord gauche et passé sous le bouton,
   page de 11 800 px (neuf cartes empilées), capture d'accueil à moitié
   vide, appel à l'action perdu dès qu'on défile. Placé EN DERNIER : en
   CSS, à spécificité égale, c'est la dernière règle qui gagne.
   ════════════════════════════════════════════════════════════════════ */
/* Accessibilité : un focus visible partout, et l'ancre sous l'en-tête. */
a:focus-visible,button:focus-visible{outline:3px solid var(--or);outline-offset:3px}
[id]{scroll-margin-top:110px}
.menu-btn{display:none}

/* Le bandeau du programme testeurs */
.testeurs{background:var(--nuit);color:var(--creme);border-bottom:2px solid var(--encre);padding:64px 0;
  background-image:radial-gradient(900px 420px at 85% 0%,rgba(200,150,62,.20),transparent 70%)}
.testeurs-grille{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.testeurs h2{font-size:clamp(30px,3.2vw,46px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 18px;color:var(--creme)}
.testeurs h2 em{font-style:italic;color:var(--or)}
.testeurs p{font-size:17.5px;color:rgba(247,242,231,.78);max-width:60ch}
.testeurs p b{color:var(--creme)}
.t-chiffres{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(240,208,138,.28);margin-bottom:22px}
.t-chiffres div{padding:20px 18px;border-left:1px solid rgba(240,208,138,.28)}
.t-chiffres div:first-child{border-left:0}
.t-chiffres b{display:block;font-size:34px;color:var(--or-clair);line-height:1;letter-spacing:-.02em}
.t-chiffres span{display:block;margin-top:8px;font-size:13.5px;color:rgba(247,242,231,.75);line-height:1.35}
.btn.large{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;text-align:center;padding:18px 20px}

/* La capture d'accueil : on montre la partie utile de l'écran, pas son vide. */
.vedette figure > img{display:block;width:100%;height:auto;aspect-ratio:16/8.6;object-fit:cover;object-position:top center}

/* La barre d'action du téléphone (masquée sur ordinateur) */
.barre-mobile{display:none}

@media (max-width:860px){
  /* En-tête compact : logo, bouton d'appel, bouton de menu */
  html.js .barre{flex-wrap:nowrap;height:68px;padding:0;gap:12px}
  html.js .logo svg{width:38px;height:38px}
  html.js .logo small{font-size:9px}
  html.js .menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;margin-left:auto;background:transparent;border:2px solid var(--encre);cursor:pointer;padding:0 11px}
  html.js .menu-btn span{display:block;height:2px;background:var(--encre);transition:transform .2s,opacity .2s}
  html.js header.menu-ouvert .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html.js header.menu-ouvert .menu-btn span:nth-child(2){opacity:0}
  html.js header.menu-ouvert .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html.js .barre .cta{display:none}
  html.js nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;width:auto;
    background:var(--creme);border-bottom:2px solid var(--encre);box-shadow:0 18px 40px rgba(26,20,14,.18);
    font-size:15px;letter-spacing:.08em}
  html.js nav a{padding:17px 24px;border-top:1px solid rgba(26,20,14,.12)}
  html.js header.menu-ouvert nav{display:flex}
  header{position:sticky;top:0;z-index:50}

  /* La barre fixe en bas : démonstration + WhatsApp, toujours à portée de pouce */
  .barre-mobile{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--encre);border-top:2px solid var(--or);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .barre-mobile a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-weight:800;
    font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  .bm-demo{background:var(--or);color:#1A1205;margin-right:5px}
  .bm-wa{background:#1F7A4C;color:#fff;margin-left:5px}
  .bm-wa:before{content:"";width:18px;height:18px;background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}

  /* Testeurs : une colonne */
  .testeurs{padding:48px 0}
  .testeurs-grille{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  .cadre{padding:0 20px}
  h1{font-size:clamp(34px,9.6vw,46px) !important;line-height:1.06}
  .intro{font-size:16.5px;margin-bottom:34px}
  .actions{gap:10px}
  .actions .btn{flex:1 1 100%;text-align:center}

  /* Les neuf cartes deviennent un carrousel qu'on fait glisser du pouce :
     la page raccourcit de moitié et chaque carte garde sa taille lisible. */
  .journal{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 22px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .journal::-webkit-scrollbar{display:none}
  .journal .art{scroll-snap-align:start;box-shadow:6px 6px 0 rgba(26,20,14,.08)}
  .journal .art:hover{transform:none}
  .art .vue{aspect-ratio:16/7}
  .art .txt{padding:18px 18px 20px;gap:8px}
  .art h3{font-size:24px}
  .art li{font-size:13.5px}
  #catalogue .intro:after{content:"Faites glisser pour voir les neuf →";display:block;margin-top:14px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--or)}

  .vedette .cadre{padding-top:28px;padding-bottom:30px}
  .vedette figure > img{aspect-ratio:4/3;object-position:top left}
  .vedette figcaption{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}
  .t-chiffres b{font-size:26px}
  .t-chiffres div{padding:14px 12px}
  .t-chiffres span{font-size:12px}
  .btn.large{font-size:12px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){ html.js .menu-btn span{transition:none} }

/* ── Changement d'ordinateur et ordinateur exigé (2026-09-27) ───────── */
.grille-prix .precision{display:block;font-size:12.5px;font-weight:400;color:var(--gris);margin-top:2px;letter-spacing:0}
.exigence{margin-top:22px;padding:16px 20px;border-left:4px solid var(--or);background:var(--creme2);
  font-size:15.5px;line-height:1.6;color:var(--encre);max-width:80ch}
.exigence b{display:block;margin-bottom:4px}
.testeurs .t-exigence{margin-top:10px;font-size:14.5px;opacity:.9}
@media (max-width:760px){.exigence{padding:14px 16px;font-size:14.5px}}