/*
Theme Name: APCM
Theme URI: https://adrianpcmaster.ch/
Author: AdrianPCMaster
Author URI: https://adrianpcmaster.ch/
Description: Thème sur mesure pour AdrianPCMaster Sàrl : informatique, jeu vidéo et web à Sierre. Source de vérité unique : ce dossier.
Version: 1.9.19
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Propriétaire
Text Domain: apcm
Tags: custom, woocommerce
*/

/* ============================================================
   AdrianPCMaster Sàrl — Design system
   Fond blanc, accent rouge, un dégradé signature rouge vers rouge-orangé.
   Ce fichier est desormais maintenu directement dans le theme.

   Rouge de marque : #e30613 (relevé au pixel dans logo.png, 495 503 px opaques).
   L'interface utilise #e30606, qui n'en diffère que sur le bleu (13/255) :
   écart imperceptible, et 4.89:1 sur blanc / 4.57:1 sur le gris des sections
   alternées, donc conforme WCAG AA sur les deux fonds.
   ============================================================ */

:root{
  /* --- Neutres --- */
  --bg:#ffffff;
  --bg-alt:#f7f7f8;
  --ink:#111318;          /* 18.6:1 sur blanc */
  --ink-soft:#3b404b;     /* 10.4:1 */
  --muted:#535966;        /*  7.0:1 */
  --faint:#6b7280;        /*  4.8:1 — plancher WCAG AA pour le petit texte */
  --line:#e6e7ea;
  --line-soft:#f0f1f3;

  /* --- Accent --- */
  --red:#e30606;          /*  4.89:1 blanc, 4.57:1 sur --bg-alt (le logo, lui, est en #e30613) */
  --red-dark:#c80000;     /*  6.08:1 */
  --red-tint:rgba(227,6,6,.08);
  --red-tint-2:rgba(227,6,6,.16);
  --live:#17a34a;         /* statut "magasin ouvert" uniquement */

  /* --- Dégradés ---
     --grad     : version vive. Grandes surfaces et gros texte seulement (H1, filets 3px).
     --grad-btn : version resserrée. Sur les boutons : le texte blanc doit tenir 4.5:1,
                  or l'orangé vif (#ff5a2a) ne donne que 3.11:1. Pire point ici : 4.73:1. */
  --grad:linear-gradient(98deg,#c80000 0%,#e30606 42%,#ff5a2a 100%);
  --grad-btn:linear-gradient(98deg,#c80000 0%,#e30606 55%,#dc2e0e 100%);

  /* --- Formes --- */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --nav-h:66px;
  /* Hauteur réelle du bloc collant (bandeau + nav). Mesurée à l'exécution par
     main.js : elle change quand le bandeau est fermé, quand les polices
     arrivent, et quand le bandeau passe sur deux lignes en mobile.
     La valeur ci-dessous n'est qu'un repli si le JS ne tourne pas. */
  --sticky-h:104px;
  --maxw:1180px;

  /* --- Ombres douces. Jamais de bordure épaisse. --- */
  --sh-1:0 1px 2px rgba(17,19,24,.04), 0 1px 3px rgba(17,19,24,.05);
  --sh-2:0 2px 4px rgba(17,19,24,.03), 0 12px 28px -10px rgba(17,19,24,.12);
  --sh-3:0 4px 8px rgba(17,19,24,.04), 0 24px 48px -16px rgba(17,19,24,.18);
  --sh-red:0 10px 30px -10px rgba(227,6,6,.45);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
::selection{background:var(--red-tint-2);color:var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1100;background:#fff;color:var(--ink);padding:14px 20px;border:1px solid var(--line);border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
section{position:relative;z-index:2;padding:clamp(72px,9vw,116px) 0}
/* Atterrissage des ancres (y compris inter-pages, ex. histoire.html#sion) :
   sans cela, la nav collante recouvre le haut de la section visée. */
section[id]{scroll-margin-top:calc(var(--sticky-h) + 20px)}
.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tight{padding-top:clamp(48px,6vw,72px)}

/* ============================================================
   ÉTATS INITIAUX
   Appliqués uniquement si GSAP a chargé ET que le mouvement est autorisé.
   Sans la classe .gsap sur <html>, rien n'est masqué : la page reste
   parfaitement lisible si le JS échoue ou si le fichier GSAP manque.
   ============================================================ */
.gsap .rv{opacity:0}
.gsap .part{opacity:0}
.gsap #asmBadge{opacity:0}
/* Pas de transform initial en CSS sur .i : GSAP parserait le translateY(115%)
   en y:48px puis empilerait son propre yPercent par-dessus, et les mots ne
   remonteraient jamais entièrement. GSAP est seul propriétaire du transform.
   Aucun risque de flash : .i n'existe qu'après le découpage, et main.js
   s'exécute en fin de <body>, avant le premier paint. */

.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.i{display:inline-block;will-change:transform}

/* ============================================================
   INTRO / BOOT (index uniquement)
   ============================================================ */
#boot{position:fixed;inset:0;background:#fff;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .6s,visibility .6s;cursor:pointer}
#boot.done{opacity:0;visibility:hidden}
.boot-logo{width:min(250px,58vw);height:auto}
.boot-inner{font-family:'JetBrains Mono',monospace;font-size:clamp(11px,1.3vw,13px);color:var(--muted);line-height:2.1;width:100%;max-width:400px;padding:0 24px}
.boot-line{opacity:0;transform:translateY(4px);display:flex;justify-content:space-between;gap:16px}
.boot-line.show{opacity:1;transform:none;transition:.18s ease-out}
.boot-line .v{color:var(--red);font-weight:500}
.boot-line.dim{color:var(--faint);justify-content:center;letter-spacing:.08em}
/* Les deux magasins, séparés du diagnostic par un filet. */
.boot-line.sep{border-top:1px solid var(--line);margin-top:9px;padding-top:9px}
.boot-bar{width:min(400px,calc(100% - 48px));height:2px;background:var(--line);border-radius:2px;overflow:hidden}
/* 2,58 s = 200 ms + 7 lignes x 240 ms + 700 ms, cf. bootLines dans main.js */
.boot-bar i{display:block;height:100%;width:0;background:var(--grad);animation:bootfill 2.58s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bootfill{to{width:100%}}
#boot .skip{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* html.force-motion : le visiteur a explicitement redemandé les animations,
   voir « MOUVEMENT RÉDUIT » en bas de fichier. */
@media(prefers-reduced-motion:reduce){html:not(.force-motion) #boot{display:none}}

/* ============================================================
   AMBIANCE
   ============================================================ */
.rgb-strip{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:900}
.grid-bg{
  position:fixed;inset:0;z-index:0;
  background-image:linear-gradient(rgba(17,19,24,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,24,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 0%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 0%,transparent 100%);
}

/* ============================================================
   BANDEAU D'ANNONCE + BANNIÈRE DE BIENVENUE

   Les deux ne s'affichent JAMAIS ensemble : deux bandeaux empilés écrasent
   la navigation. Tant que l'annonce n'est pas fermée, elle occupe le créneau.
   Une fois fermée (sessionStorage), la bannière de bienvenue reprend sa place.
   Les deux restent dans le DOM : leur contenu demeure lisible par les moteurs.
   ============================================================ */
.announce{position:relative;z-index:30;background:var(--grad-btn);color:#fff}
.announce-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:9px clamp(46px,7vw,64px);
  display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;
  font-size:13.5px;letter-spacing:-.005em;
}
.announce p{font-weight:500}
.announce b{font-weight:700}
.announce .a-sm{display:none}   /* libellé court, activé en mobile */
.announce .a-cta{
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  color:#fff;font-weight:600;font-size:12.5px;white-space:nowrap;
  transition:background .2s,border-color .2s;
}
.announce .a-cta:hover{background:rgba(255,255,255,.26);border-color:#fff}
.announce .a-close{
  position:absolute;right:clamp(8px,1.6vw,18px);top:50%;transform:translateY(-50%);
  background:none;border:0;color:rgba(255,255,255,.85);font-size:14px;line-height:1;
  padding:9px;cursor:pointer;border-radius:8px;transition:background .2s,color .2s;
}
.announce .a-close:hover{color:#fff;background:rgba(255,255,255,.16)}
.announce .a-close:focus-visible{outline:2px solid #fff;outline-offset:-1px}

.topbar{display:none}
.announce-closed .announce{display:none}
.announce-closed .topbar{display:block}

/* Mobile : le bandeau doit tenir sur UNE ligne. Avec le libellé long, le bloc
   collant (bandeau + nav) atteignait 130px, soit 19,5% d'un écran de 667px. */
@media(max-width:560px){
  .announce-inner{font-size:12px;padding:7px 36px 7px 12px;gap:10px;flex-wrap:nowrap}
  .announce .a-lg{display:none}
  .announce .a-sm{display:block;white-space:nowrap}
  .announce .a-cta{padding:3px 10px;font-size:11.5px}
  .announce .a-close{right:4px;padding:8px;font-size:13px}
}

.topbar{position:relative;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px;text-align:center;font-size:13px;color:var(--muted);letter-spacing:-.005em}
.topbar b{color:var(--ink);font-weight:600}
.topbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:9px;position:relative;top:-1px;box-shadow:0 0 0 0 rgba(23,163,74,.45);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(23,163,74,0)}100%{box-shadow:0 0 0 0 rgba(23,163,74,0)}}

/* Le bloc collant : bandeau d'annonce + navigation, solidaires.
   Il est enfant direct de <body> : un élément sticky est borné par la hauteur
   de son PARENT. Tant que la nav vivait dans un <header> de 114px, elle se
   décollait au bout de 114px de défilement. Vérifié, corrigé. */
.sticky-top{position:sticky;top:0;z-index:60}
/* Décalage sous la barre d'admin WordPress (visible pour l'admin/shop-manager).
   Uniquement ≥783px : là, la barre WP est position:fixed. En dessous elle est
   position:absolute (elle défile avec la page) → top:0 par défaut reste correct. */
@media screen and (min-width:783px){body.admin-bar .sticky-top{top:32px}}

nav.main{
  position:relative;z-index:50;
  /* Grille 3 colonnes : logo | menu (centré sur le vrai centre de page) | actions.
     Les colonnes latérales sont égales (1fr), donc le menu du milieu est centré
     quelle que soit la largeur du logo ou des actions (panier + CTA). */
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
  padding:14px clamp(20px,5vw,64px);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.logo{justify-self:start;grid-column:1}
.nav-links{justify-self:center;grid-column:2}
.nav-actions{justify-self:end;grid-column:3;display:flex;align-items:center;gap:12px;min-width:0}
/* Logo : pictogramme + lettrage, segmentés depuis logo.png (voir tools/build-logo-assets.js).
   Le lockup complet (empilé, avec baseline) est illisible sous 60px de haut :
   il est réservé au footer, à l'intro et à l'og:image. */
.logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;line-height:0}
.logo img{display:block}
.logo-mark{height:40px;width:45px}
.logo-word{height:20px;width:120px}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);font-size:14.5px;color:var(--muted);font-weight:500}
.nav-links a{position:relative;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--red);border-radius:2px;transition:width .28s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-links a[aria-current="page"]::after{width:100%}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-size:17px;line-height:1;padding:9px 12px;cursor:pointer}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;
  cursor:pointer;border:1px solid transparent;
  transition:box-shadow .25s,border-color .25s,background .25s,color .25s;
  will-change:transform;
}
.btn-grad{background:var(--grad-btn);color:#fff;box-shadow:var(--sh-1)}
.btn-grad:hover{box-shadow:var(--sh-red)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-lg{font-size:15px;padding:15px 30px}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
nav.main .btn{padding:10px 18px;font-size:14px;white-space:nowrap;flex-shrink:0}

.link-red{color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.link-red:hover{gap:11px}

/* ============================================================
   TITRES DE SECTION
   ============================================================ */
.tag{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:500}
.sec-head{margin-bottom:clamp(40px,5vw,64px);text-align:center}
.sec-head h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.035em;margin-top:14px;line-height:1.08}
.sec-head p{color:var(--muted);max-width:580px;margin:18px auto 0;line-height:1.65;font-size:16px}
.sec-head.left{text-align:left}
.sec-head.left p{margin-left:0}

/* ============================================================
   HERO (accueil) — deux colonnes : texte + bannière visuelle
   ============================================================ */
.hero{position:relative;z-index:2;padding:clamp(48px,7vh,84px) 0 clamp(64px,8vh,92px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(28px,4vw,56px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border:1px solid var(--line);border-radius:100px;font-size:13px;color:var(--muted);margin-bottom:28px;background:#fff;box-shadow:var(--sh-1)}
.eyebrow .star{color:var(--red);font-size:11px;letter-spacing:1px}
.hero h1{font-size:clamp(37px,4.6vw,61px);line-height:1.04;letter-spacing:-.04em}
.hero .g,.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{max-width:540px;margin:26px 0 0;color:var(--muted);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(28px,5vw,72px);justify-content:center;margin-top:clamp(52px,6vw,76px);flex-wrap:wrap;padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--line)}

/* --- Bannière visuelle du hero (SVG, aucune image externe) --- */
.hero-visual{position:relative;width:100%;max-width:520px;margin:0 auto}
.hero-visual::before{
  content:'';position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:112%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(227,6,6,.11),rgba(227,6,6,.03) 45%,transparent 68%);
}
#heroArt{position:relative;width:100%;height:auto;display:block;overflow:visible}
#heroArt .float,#heroArt .orbit{will-change:transform}
#heroArt .chip-bg{fill:#fff;stroke:#e6e7ea;stroke-width:1;filter:drop-shadow(0 6px 14px rgba(17,19,24,.10))}
#heroArt .chip-t{font-family:'JetBrains Mono',monospace;font-size:12px;fill:var(--muted);letter-spacing:.06em}
#heroArt .ghost{fill:#fff;stroke:#eceef0;stroke-width:1.4}

/* ============================================================
   SECTIONS DE CONTENU
   ============================================================ */
.stat .num{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,3.4vw,42px);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.stat .num em{font-style:normal;color:var(--red)}
.stat .lbl{font-size:12.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-top:8px;font-weight:500}

/* ============================================================
   HERO DE PAGE INTERNE
   ============================================================ */
.page-hero{position:relative;z-index:2;padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,56px);text-align:center}
.page-hero h1{font-size:clamp(33px,5.2vw,60px);letter-spacing:-.04em;line-height:1.04;margin-top:16px}
.page-hero p.lead{max-width:640px;margin:22px auto 0;color:var(--muted);font-size:clamp(15.5px,1.4vw,18px);line-height:1.65}
/* Le hero de l'accueil est en deux colonnes, donc .hero-cta est aligné à gauche.
   Les heros de page interne sont centrés : il faut recentrer les boutons. */
.page-hero .hero-cta{margin-top:34px;justify-content:center}

/* --- Hero de page interne en deux colonnes : texte + illustration animée --- */
.ph-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,56px);align-items:center;text-align:left}
.ph-grid .crumbs{justify-content:flex-start}
.ph-grid p.lead{margin-left:0;margin-right:0}
.ph-grid .hero-cta{justify-content:flex-start}
.ph-grid .hero-stats{justify-content:flex-start;border-top:0;padding-top:clamp(28px,3vw,40px);margin-top:clamp(28px,3vw,40px)}

.page-art{position:relative;width:100%;max-width:470px;margin:0 auto}
.page-art::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:104%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(227,6,6,.10),rgba(227,6,6,.03) 45%,transparent 68%);
}
.page-art svg{position:relative;width:100%;height:auto;display:block;overflow:visible}
.page-art .float,.page-art .orbit{will-change:transform}
.page-art .chip-bg{fill:#fff;stroke:var(--line);stroke-width:1;filter:drop-shadow(0 6px 14px rgba(17,19,24,.10))}
.page-art .chip-t{font-family:'JetBrains Mono',monospace;font-size:12px;fill:var(--muted);letter-spacing:.06em}
.page-art .ghost{fill:#fff;stroke:#eceef0;stroke-width:1.4}

/* ============================================================
   CADRES PHOTO
   Les images sont volontairement plus hautes que leur cadre : la marge
   verticale sert au parallaxe. Sans JS, elles restent centrées et couvrantes.
   ============================================================ */
.photo{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--bg-alt);box-shadow:var(--sh-3);isolation:isolate;
}
.photo::before{content:'';position:absolute;z-index:2;top:0;left:0;right:0;height:3px;background:var(--grad)}
.photo::after{
  content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(17,19,24,.07);
}
/* <picture> ne sert qu'à choisir la source, il ne doit pas créer de boîte :
   sans cela une ligne de texte vide se glisserait dans le cadre. */
.photo picture{display:contents}
/* L'image fait 116 % de la hauteur du cadre et remonte de 8 %. Les fichiers
   sont produits à ce ratio-là (cadre ÷ 1.16) : object-fit:cover ne rogne donc
   rien sur les côtés, et le parallaxe dispose de 8 % de matière en haut comme
   en bas. Une image au ratio du cadre perdrait 8 % de chaque côté. */
.photo img{
  position:absolute;top:-8%;left:0;width:100%;height:116%;
  object-fit:cover;display:block;will-change:transform;
}
/* Fond opaque sous le texte, dégradé seulement au-dessus. Un simple dégradé
   à 62% donnait 3.15:1 sur une photo claire ; à 86% le blanc tient 5.37:1
   même sur du blanc pur. */
.photo figcaption{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:12px 22px 14px;
  font-size:12.5px;color:#fff;letter-spacing:-.005em;
  background:rgba(17,19,24,.86);
}
.photo figcaption::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:52px;
  background:linear-gradient(180deg,transparent,rgba(17,19,24,.86));
}
.photo figcaption b{font-weight:600}

.ar-16x9{aspect-ratio:16/9}
.ar-4x3{aspect-ratio:4/3}
.ar-4x5{aspect-ratio:4/5}

/* Bande photo pleine largeur du contenu */
.photo-band{margin:0 auto;max-width:var(--maxw)}

/* Galerie de machines */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery .photo{border-radius:var(--radius)}

.crumbs{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12.5px;color:var(--faint);margin-bottom:22px;flex-wrap:wrap}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}
.crumbs .sep{color:#c8ccd3}

/* ============================================================
   CARTES SERVICES (grille)
   ============================================================ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;
  position:relative;overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s;
}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--red-tint),transparent 46%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#dcdde1}
.card:hover::before{opacity:1}
.card h3{font-size:18.5px;margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.62}
.card .link-red{margin-top:18px;font-size:14px}
a.card{display:block}
a.card:hover h3{color:var(--red)}

/* Icônes SVG au trait (aucune image externe, aucun emoji) */
.ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);border:1px solid var(--line);margin-bottom:22px;flex-shrink:0;
}
.ico svg{width:23px;height:23px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico svg .accent{stroke:var(--red)}
.ico svg .accent-f{fill:var(--red);stroke:none}
.card:hover .ico{border-color:rgba(227,6,6,.25);background:var(--red-tint)}

/* ============================================================
   BANDE SUR MESURE + PC STATIQUE
   ============================================================ */
.band{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.band.rev{direction:rtl}
.band.rev > *{direction:ltr}
.band h2{font-size:clamp(27px,3.5vw,42px);letter-spacing:-.035em;line-height:1.08;margin-top:14px}
.band p{color:var(--muted);margin:20px 0 30px;line-height:1.65;font-size:16px;max-width:540px}
.pc-static{position:relative;max-width:340px;margin:0 auto;width:100%}
.pc-static::after{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(227,6,6,.10),transparent 66%);z-index:-1}
.pc-static svg{width:100%;height:auto;filter:drop-shadow(0 18px 32px rgba(17,19,24,.10))}

/* ============================================================
   BLOC STUDIO : applicationsweb.ch (page web-digital)

   Le studio n'est pas un partenaire externe, c'est la même maison. D'où le
   traitement en carte pleine, pas en encart publicitaire. Le seul signe
   d'extériorité est la flèche ↗ des liens, et la mention du nouvel onglet.
   ============================================================ */
.studio{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,64px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh-3);padding:clamp(30px,4vw,56px);
  position:relative;overflow:hidden;
}
.studio::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.studio h2{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(23px,3vw,37px);letter-spacing:-.02em;line-height:1.1;margin-top:12px;
  overflow-wrap:anywhere;
}
.studio .lead{color:var(--ink-soft);font-size:17px;line-height:1.6;margin-top:18px}
.studio-copy > p{color:var(--muted);font-size:15px;line-height:1.68;margin-top:16px}

.studio-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:14px 34px;
  margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line-soft);
}
.studio-facts b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.studio-facts span{display:block;margin-top:3px;font-size:12.5px;color:var(--faint)}

/* Sur toute la largeur de la carte : les trois boutons tiennent sur une ligne. */
.studio-actions{grid-column:1 / -1;margin-top:8px;padding-top:30px;border-top:1px solid var(--line-soft)}
.studio-cta{display:flex;flex-wrap:wrap;gap:12px}
.studio-note{font-size:12.5px;color:var(--faint);margin-top:16px}

/* La flèche des liens sortants. Décorative, aria-hidden dans le HTML : le lien
   reste parfaitement lisible sans elle. */
.ext{display:inline-block;margin-left:2px;transition:transform .25s}
a:hover .ext{transform:translate(2px,-2px)}

.studio-art{position:relative;width:100%;max-width:460px;margin:0 auto}
.studio-art::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:104%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(227,6,6,.10),transparent 62%);
}
.studio-art svg{width:100%;height:auto;position:relative}
.studio-art .ghost{fill:#f7f7f8;stroke:var(--line)}

@media(max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr);text-align:center}
  .studio-facts{justify-content:center;text-align:center}
  .studio-cta{justify-content:center}
  .studio .lead,.studio-copy > p{margin-left:auto;margin-right:auto;max-width:560px}
  /* Le visuel reste SOUS le texte : le remonter repousserait les trois boutons
     hors du premier écran, et ce sont eux qui comptent. */
  .studio-art{max-width:380px}
}

/* ============================================================
   SCÈNE D'ASSEMBLAGE (sur-mesure.html)
   Animation autonome en boucle. Aucun pin, aucun scrub :
   la page se scrolle normalement, l'animation vit sa vie.
   ============================================================ */
.asm-stage{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vw,44px)}
.asm-head{text-align:center}
.asm-head h2{font-size:clamp(27px,3.5vw,42px);letter-spacing:-.035em;margin-top:12px;line-height:1.08}
.asm-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(24px,4vw,60px);align-items:center;width:100%;max-width:940px}
.asm-canvas{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1}
.asm-canvas::before{content:'';position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(227,6,6,.09),transparent 68%);z-index:0}
#asmScene{position:relative;z-index:1;width:100%;height:100%}
.part{will-change:transform,opacity}

#asmBadge{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);z-index:2;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-2);
}
#asmBadge .chk{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--grad-btn);color:#fff;font-size:10px;font-weight:700}

.asm-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:2px}
.asm-steps li{counter-increment:s;display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--radius-sm);font-size:14.5px;color:var(--faint);border:1px solid transparent;transition:color .3s,background .3s,border-color .3s}
.asm-steps li::before{content:'0' counter(s);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--faint);transition:color .3s}
.asm-steps li.done{color:var(--muted)}
.asm-steps li.active{color:var(--ink);font-weight:500;background:var(--red-tint);border-color:rgba(227,6,6,.22)}
.asm-steps li.active::before{color:var(--red)}
.asm-progress{position:relative;height:2px;width:100%;background:var(--line);border-radius:2px;overflow:hidden;margin-top:16px}
.asm-progress i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--grad)}
.asm-hint{font-size:11.5px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-top:14px}

/* ============================================================
   PROCESSUS NUMÉROTÉ
   ============================================================ */
.steps{list-style:none;counter-reset:p;display:grid;gap:16px}
.steps li{
  counter-increment:p;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px 26px 78px;box-shadow:var(--sh-1);transition:box-shadow .3s,border-color .3s;
}
.steps li:hover{box-shadow:var(--sh-2);border-color:#dcdde1}
.steps li::before{
  content:counter(p,decimal-leading-zero);position:absolute;left:28px;top:26px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--red);letter-spacing:.05em;
}
.steps h3{font-size:17.5px;margin-bottom:9px;letter-spacing:-.02em}
.steps p{color:var(--muted);font-size:14.5px;line-height:1.62}

/* ============================================================
   BLOC SERVICE DÉTAILLÉ (services.html)
   ============================================================ */
/* --- Grille de cartes ---
   Deux colonnes. Une carte dépliée occupe toute la largeur : le détail tient
   sur deux colonnes lisibles au lieu de s'étirer sur 350 px. Les cartes qui
   suivent se réorganisent, c'est le prix du confort de lecture. */
.svc-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;align-items:stretch;
  padding:clamp(48px,6vw,80px) 0;
}
/* Sans JavaScript, .js-accordion n'est jamais posée et tout est déplié : une
   seule colonne, sinon le texte détaillé s'écrase sur 230 px de large. */
.svc-cards:not(.js-accordion){grid-template-columns:minmax(0,1fr)}
/* Colonne flex : les deux cartes d'une ligne ont la même hauteur et leurs
   boutons s'alignent, quelle que soit la longueur de l'accroche. */
.svc-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh-1);padding:clamp(24px,3vw,34px);
  scroll-margin-top:calc(var(--sticky-h) + 24px);
  transition:border-color .3s,box-shadow .3s;
}
.svc-card:hover{border-color:#dcdde1;box-shadow:var(--sh-2)}
.svc-card:hover .ico{border-color:rgba(227,6,6,.25);background:var(--red-tint)}
.svc-card.is-open{grid-column:1 / -1;border-color:#dcdde1;box-shadow:var(--sh-2)}

.svc-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.svc-head .ico{margin-bottom:0;width:48px;height:48px;flex-shrink:0}
.svc-head .ico svg{width:24px;height:24px}
.svc-card h2{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em;line-height:1.15}
.svc-card .lead{color:var(--ink-soft);font-size:15.5px;line-height:1.62;margin-bottom:22px}

/* --- Le bouton ---
   margin-top:auto le colle au bas de la carte : les boutons d'une même ligne
   s'alignent. align-self l'empêche de s'étirer sur toute la largeur. */
.svc-toggle{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;align-self:flex-start;
  padding:10px 17px;border:1px solid var(--line);border-radius:100px;background:#fff;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:color .2s,border-color .2s,background .2s;
}
/* display:inline-flex sur une classe l'emporte sur [hidden]{display:none} de la
   feuille du navigateur. Sans cette ligne, le bouton s'affiche quand JS est
   absent, et il ne sert à rien. */
.svc-toggle[hidden]{display:none}
.svc-toggle:hover{color:var(--red);border-color:var(--red);background:var(--red-tint)}
.svc-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.svc-toggle .chev{
  width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;
}
.svc-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* --- Le contenu détaillé ---
   Sans JavaScript, .js-accordion n'est jamais posée : tout reste déplié et le
   bouton reste masqué par son attribut hidden. Le texte est TOUJOURS dans le
   DOM : rien n'est chargé au clic, Google lit la page entière. */
.js-accordion .svc-body{overflow:hidden}
.svc-body .svc-grid{
  margin-top:26px;padding-top:26px;border-top:1px solid var(--line-soft);
}
.svc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,56px);align-items:start}
.svc-body p{color:var(--muted);font-size:15px;line-height:1.68;margin-bottom:16px}
.svc-body p:last-child{margin-bottom:0}
.svc-panels .panel + .panel{margin-top:16px}

@media(max-width:900px){
  .svc-cards{grid-template-columns:minmax(0,1fr)}
  .svc-card.is-open{grid-column:auto}
  .svc-toggle{min-height:46px;padding:12px 20px;font-size:14px}
}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--sh-1)}
.panel + .panel{margin-top:16px}
.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:600}
.panel.alt-bg{background:var(--bg-alt)}

.checks{list-style:none;display:grid;gap:12px}
.checks li{position:relative;padding-left:28px;font-size:14.5px;color:var(--muted);line-height:1.55}
.checks li::before{
  content:'';position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;
  background-color:var(--red-tint);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' stroke='%23e30606' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.checks li b{color:var(--ink);font-weight:600}

.flow{list-style:none;counter-reset:f;display:grid;gap:0}
.flow li{counter-increment:f;position:relative;padding:0 0 20px 34px;font-size:14.5px;color:var(--muted);line-height:1.55}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:counter(f);position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;background:var(--red-tint);color:var(--red);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace}
.flow li::after{content:'';position:absolute;left:10px;top:24px;bottom:2px;width:1px;background:var(--line)}
.flow li:last-child::after{display:none}
.flow b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px}

/* ============================================================
   CONFIGURATIONS (sur-mesure.html)
   ============================================================ */
.config{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--sh-1);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s,border-color .35s}
.config:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#dcdde1}
.config.feature{border-color:rgba(227,6,6,.3);box-shadow:var(--sh-2)}
.config.feature::before{content:'Le plus demandé';position:absolute;top:-10px;left:28px;background:var(--grad-btn);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.config{position:relative}
.config h3{font-size:20px;letter-spacing:-.025em;margin-bottom:6px}
.config .for{font-size:13px;color:var(--red);font-weight:600;margin-bottom:16px}
.config > p{color:var(--muted);font-size:14.5px;line-height:1.62;margin-bottom:20px}
.config .specs{list-style:none;display:grid;gap:9px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft)}
.config .specs li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;color:var(--muted)}
.config .specs li b{color:var(--ink);font-weight:600;text-align:right}

/* ============================================================
   COMPARATIF
   ============================================================ */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-1)}
.compare caption{caption-side:top;text-align:left;font-size:13px;color:var(--faint);padding-bottom:14px}
.compare th,.compare td{padding:16px 20px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.compare thead th{background:var(--bg-alt);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600}
.compare thead th.us{color:var(--red)}
.compare tbody th{font-weight:600;color:var(--ink);width:26%}
.compare td{color:var(--muted)}
.compare td.us{color:var(--ink);background:rgba(227,6,6,.03);font-weight:500}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}

/* ============================================================
   TIMELINE (histoire.html + teaser accueil)
   ============================================================ */
.tl{position:relative;max-width:760px;margin:0 auto;list-style:none}
.tl::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--red) 0%,rgba(227,6,6,.35) 55%,var(--line) 100%)}
.tl-item{position:relative;padding:0 0 46px 44px}
.tl-item:last-child{padding-bottom:0}
.tl-item .pt{position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 0 0 4px #fff}
.tl-item .yr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--red);letter-spacing:.1em;font-weight:500}
.tl-item h3{font-size:19.5px;margin:9px 0;letter-spacing:-.025em}
.tl-item p{color:var(--muted);font-size:14.8px;line-height:1.65;margin-bottom:12px}
.tl-item p:last-child{margin-bottom:0}
.tl-item.future .pt{background:var(--red);animation:pulse-red 2.4s infinite}
@keyframes pulse-red{
  0%{box-shadow:0 0 0 4px #fff,0 0 0 4px rgba(227,6,6,.4)}
  70%{box-shadow:0 0 0 4px #fff,0 0 0 12px rgba(227,6,6,0)}
  100%{box-shadow:0 0 0 4px #fff,0 0 0 0 rgba(227,6,6,0)}
}

/* ============================================================
   AVIS
   ============================================================ */
.reviews-wrap{overflow:hidden;position:relative;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee{display:flex;gap:18px;width:max-content;will-change:transform}
.no-gsap .marquee{animation:scrollx 55s linear infinite}
@keyframes scrollx{to{transform:translateX(-50%)}}
.review{width:340px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--sh-1)}
.review .stars{color:var(--red);font-size:12px;letter-spacing:2.5px}
.review p{color:var(--ink-soft);font-size:14px;line-height:1.62;margin:14px 0 18px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.review .who{font-size:13.5px;font-weight:600;color:var(--ink)}
.review .who span{color:var(--faint);font-weight:400;margin-left:8px;font-size:12.5px}
.gbadge{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:40px;color:var(--muted);font-size:14.5px;flex-wrap:wrap}
.gbadge b{color:var(--ink);font-size:24px;font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
.gbadge .s{color:var(--red);letter-spacing:2px;font-size:12px}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(44px,6vw,76px) clamp(24px,5vw,64px);box-shadow:var(--sh-3);position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,70%);height:3px;background:var(--grad);border-radius:0 0 4px 4px}
.cta-final h2{font-size:clamp(27px,3.9vw,44px);letter-spacing:-.035em;line-height:1.08}
.cta-final p{color:var(--muted);margin:20px auto 34px;max-width:480px;line-height:1.65;font-size:16px}
.cta-info{display:flex;gap:clamp(24px,4vw,56px);justify-content:center;flex-wrap:wrap;margin-top:44px;padding-top:36px;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--muted)}
.cta-info p{line-height:1.62}
.cta-info b{color:var(--faint);display:block;margin-bottom:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.cta-info a{color:var(--ink);font-weight:500;transition:color .2s}
.cta-info a:hover{color:var(--red)}

/* ============================================================
   FORMULAIRE (contact.html) — front uniquement
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,38px);box-shadow:var(--sh-2)}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.field .req{color:var(--red);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.field input::placeholder,.field textarea::placeholder{color:#a3a8b3}
.field .hint{font-size:12.5px;color:var(--faint);margin-top:7px}
.field .err{font-size:12.5px;color:var(--red);margin-top:7px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5}
.consent input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--red)}
.form-note{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.5}
.form-status{display:none;margin-top:20px;padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;line-height:1.5}
.form-status.ok{display:block;background:rgba(23,163,74,.08);border:1px solid rgba(23,163,74,.3);color:#0f7a37}
.form-status.ko{display:block;background:var(--red-tint);border:1px solid rgba(227,6,6,.3);color:var(--red-dark)}
.form-status.pending{display:block;background:var(--bg-alt);border:1px solid var(--line);color:var(--muted)}
/* Le JS lui donne le focus au retour d'un envoi sans JavaScript, pour que les
   lecteurs d'ecran l'annoncent. L'element porte tabindex="-1" : aucun clavier
   ne l'atteint, personne ne perd son indicateur de focus. */
.form-status:focus{outline:none}

/* Pendant l'envoi : on interdit le double clic sans jamais masquer le libelle. */
.form button[disabled]{opacity:.62;cursor:progress;filter:saturate(.85)}

/* ------------------------------------------------------------
   POT DE MIEL

   Ni display:none ni [hidden] : les robots un peu serieux lisent le CSS et
   sautent les champs ainsi masques. On le sort du cadre, il est inatteignable
   au clavier (tabindex=-1) et invisible aux lecteurs d'ecran (aria-hidden).
   Un humain ne peut litteralement pas le remplir ; un robot qui remplit tout
   ce qu'il trouve, si.
   ------------------------------------------------------------ */
.hp-field{
  position:absolute!important;left:-9999px!important;top:auto;
  width:1px;height:1px;overflow:hidden;
}

.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--sh-1)}
.info-card + .info-card{margin-top:16px}
.info-card h2,.info-card h3{font-size:17px;letter-spacing:-.02em;margin-bottom:18px}
.info-list{list-style:none;display:grid;gap:18px}
.info-list li{display:flex;gap:14px;align-items:flex-start}
.info-list .ic{width:36px;height:36px;border-radius:9px;background:var(--bg-alt);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-list .ic svg{width:17px;height:17px;stroke:var(--red);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.info-list dt,.info-list .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600;margin-bottom:4px}
.info-list dd,.info-list .v{font-size:15px;color:var(--ink);font-weight:500;line-height:1.5}
.info-list a:hover{color:var(--red)}

/* Plan d'accès : illustration SVG, aucune image externe */
.map-card{position:relative;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.map-card svg{width:100%;height:auto}
.map-card .map-cta{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);white-space:nowrap}

/* ============================================================
   HORAIRES — deux volets, un magasin par volet.

   Sans JavaScript, .hours-tabs reste masqué et les deux volets
   s'affichent empilés, chacun sous son propre titre : l'information
   n'est jamais inaccessible. Le module 8 de main.js ajoute .tabs-on,
   révèle les onglets et masque le volet inactif.
   ============================================================ */
.hours-card{scroll-margin-top:calc(var(--sticky-h) + 24px)}
.hours-card h2{margin-bottom:16px}
.hours-tabs{display:none}
.tabs-on .hours-tabs{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:20px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:100px;
}
.hours-tabs button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  padding:8px 20px;border-radius:100px;white-space:nowrap;
  transition:color .2s,background .2s,box-shadow .2s;
}
.hours-tabs button:hover{color:var(--ink)}
.hours-tabs button[aria-selected="true"]{background:var(--grad-btn);color:#fff;box-shadow:var(--sh-red)}
.hours-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Empilement de repli : une séparation nette entre les deux magasins. */
.hours-panel + .hours-panel{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-soft)}
.tabs-on .hours-panel + .hours-panel{margin-top:0;padding-top:0;border-top:0}
.hours-panel:focus{outline:none}

.hours-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:17px;letter-spacing:-.02em;margin-bottom:6px}
.hours-state{
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:100px;
}
/* #15803d sur le fond teinte vert : 4.65:1, conforme AA. */
.hours-state.since{color:#15803d;background:rgba(23,163,74,.1);border:1px solid rgba(23,163,74,.3)}
.hours-state.soon{color:#fff;background:var(--grad-btn)}
.hours-sub{font-size:13.5px;color:var(--faint);line-height:1.55;margin-bottom:16px}
.hours-sub a{color:var(--red);font-weight:600}
.hours-sub a:hover{text-decoration:underline}

.hours{display:grid;gap:2px}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 12px;border-radius:var(--radius-sm)}
.hrow dt{font-size:14.5px;color:var(--ink-soft);font-weight:500}
.hrow dd{font-size:14.5px;color:var(--ink);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrow dd.closed{color:var(--faint);font-weight:500}
/* Le jour courant, posé par le JS. #e30606 sur --red-tint : 4.76:1. */
.hrow.is-today{background:var(--red-tint)}
.hrow.is-today dt,.hrow.is-today dd{color:var(--red);font-weight:700}
.today-tag{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--red);margin-left:8px;vertical-align:1px;
}

@media(max-width:460px){
  .tabs-on .hours-tabs{display:flex;width:100%}
  .hours-tabs button{flex:1;padding:9px 10px}
  .hrow{padding:9px 8px}
  .hrow dt,.hrow dd{font-size:14px}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-1);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 54px 20px 24px;font-weight:600;font-size:15.5px;
  letter-spacing:-.01em;position:relative;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{
  content:'';position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--red)}
.faq .answer{padding:0 24px 22px;color:var(--muted);font-size:14.8px;line-height:1.68}
.faq .answer p + p{margin-top:12px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{position:relative;z-index:2;border-top:1px solid var(--line);background:#fff}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,5vw,64px) clamp(20px,5vw,64px) clamp(32px,4vw,44px);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.foot-brand .logo-full{width:200px;height:auto;margin-bottom:18px}
.foot-brand p{color:var(--muted);font-size:14px;line-height:1.62;max-width:300px}
.foot-col h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);font-weight:600;font-family:'Inter',sans-serif;margin-bottom:16px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-size:14px;color:var(--muted);transition:color .2s}
.foot-col a:hover{color:var(--red)}
/* Rappel compact des horaires de Sierre, sur toutes les pages. */
.foot-hours{font-size:13px;color:var(--faint);line-height:1.72;padding-top:4px}
.foot-hours b{display:block;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:5px}
.foot-hours .closed{color:var(--faint)}
.foot-bottom{border-top:1px solid var(--line-soft)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:22px clamp(20px,5vw,64px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--faint);font-size:13.5px}
footer .socials{display:flex;gap:20px;font-weight:500;color:var(--muted)}
footer .socials a{transition:color .2s}
footer .socials a:hover{color:var(--red)}

/* ============================================================
   POPUP SION 2027 (index uniquement)
   ============================================================ */
#overlay{position:fixed;inset:0;background:rgba(17,19,24,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.4s}
#overlay.open{opacity:1;visibility:visible}
.popup{background:#fff;border-radius:22px;max-width:470px;width:100%;padding:44px 40px;text-align:center;position:relative;overflow:hidden;transform:scale(.94) translateY(14px);transition:.45s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 40px 90px -20px rgba(17,19,24,.35)}
.popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
#overlay.open .popup{transform:none}
.popup .close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--faint);font-size:18px;line-height:1;padding:8px;cursor:pointer;transition:color .2s}
.popup .close:hover{color:var(--ink)}
.popup .badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:7px 15px;border-radius:100px;background:var(--red-tint);color:var(--red);margin-bottom:24px;font-weight:500}
.popup h2{font-size:clamp(24px,3.6vw,31px);line-height:1.15;letter-spacing:-.035em}
.popup p{color:var(--muted);margin:18px 0 30px;line-height:1.65;font-size:15px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  /* minmax(0,1fr) et non 1fr : le minimum automatique d'une piste vaut la
     largeur min-content de son contenu, ce qui faisait dépasser la colonne
     de droite du .wrap sur petit écran. */
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:900px){
  .grid3{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .band,.band.rev{grid-template-columns:1fr;direction:ltr;text-align:center}
  .band p{margin-left:auto;margin-right:auto}
  .band .btn{margin:0 auto}
  .pc-static{max-width:260px;margin-top:12px}
  .asm-body{grid-template-columns:1fr;gap:30px}
  .asm-steps{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .asm-steps li{padding:8px 13px;font-size:13px;border-color:var(--line);background:#fff}
  .asm-progress{max-width:320px;margin:8px auto 0}
  /* .svc-head reste en ligne : c'est l'en-tête d'une carte compacte, pas d'une
     section pleine page. Empiler le picto au-dessus du titre l'allongerait. */
  .hero-grid{grid-template-columns:1fr;gap:44px;text-align:center}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-visual{max-width:420px;order:-1}

  .ph-grid{grid-template-columns:1fr;gap:38px;text-align:center}
  .ph-grid .crumbs,.ph-grid .hero-cta,.ph-grid .hero-stats{justify-content:center}
  .ph-grid p.lead{margin-left:auto;margin-right:auto}
  .page-art{max-width:380px;order:-1}

  .gallery{grid-template-columns:1fr 1fr}
  .gallery .photo:last-child{grid-column:1 / -1;aspect-ratio:16/9}
}
/* Le menu bascule en burger dès 1080px : avec cinq liens + le bouton d'appel
   à l'action, la barre déborde vers 1020px et le bouton se casse sur trois
   lignes. Mesuré, pas supposé. */
@media(max-width:1080px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;
    padding:6px clamp(20px,5vw,64px) 18px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
  }
  nav.main.menu-open .nav-links{display:flex}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:15.5px}
  .nav-links a::after{display:none}
  .burger{display:block}
}
@media(max-width:700px){
  .compare{display:block;border:0;box-shadow:none;background:transparent}
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  .compare tr{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;padding:6px 0;box-shadow:var(--sh-1)}
  .compare tbody th{width:100%;padding-bottom:6px;font-size:15px}
  .compare td{border-bottom:0;padding-top:6px;padding-bottom:10px}
  .compare td::before{content:attr(data-l);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600;margin-bottom:5px}
  .compare td.us{background:transparent}
  .compare td.us::before{color:var(--red)}
}
@media(max-width:640px){
  .grid3{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .hero-stats{gap:30px 44px}
  .hero-visual{max-width:330px}
  section{padding:64px 0}
  .asm-canvas{max-width:300px}
  .grid-bg{background-size:44px 44px}
  nav.main .btn{display:none}
  .review{width:280px}
  .field-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:32px}
  .foot-inner{flex-direction:column;text-align:center}
  .steps li{padding:24px 22px 24px 22px}
  .steps li::before{position:static;display:block;margin-bottom:10px}
  .page-art{max-width:300px}
  .gallery{grid-template-columns:1fr;gap:14px}
  .gallery .photo:last-child{aspect-ratio:4/5}
  .photo figcaption{padding:28px 16px 13px;font-size:12px}
}
@media(max-width:520px){
  #asmBadge{font-size:12px;padding:9px 15px;bottom:-14px}
  .logo{gap:9px}
  .logo-mark{height:34px;width:38px}
  .logo-word{height:17px;width:102px}
  .foot-brand .logo-full{width:170px}
}

/* ============================================================
   MOUVEMENT RÉDUIT

   Le signal est respecté par défaut. Mais certains navigateurs le forcent
   sans que le visiteur l'ait choisi (Opera en économie de batterie, système
   en mode économie d'énergie). Une invitation discrète lui permet de
   réactiver les animations : elle pose html.force-motion, qui neutralise
   ces règles. Jamais sans clic explicite.

   D'où le sélecteur descendant html:not(.force-motion) : il exclut <html>
   lui-même, qui ne porte aucune animation.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html:not(.force-motion) .rv{opacity:1;transform:none}
  html:not(.force-motion) .boot-bar i{width:100%}
}

/* --- Invitation à réactiver les animations (injectée par main.js) ---
   Discrète, dans un coin, ignorable définitivement. Sous le popup Sion
   (z-index 200) et au-dessus du bloc collant (60). */
.motion-toast{
  position:fixed;left:20px;bottom:20px;z-index:80;
  max-width:min(440px,calc(100vw - 40px));
  display:flex;align-items:center;gap:10px;
  padding:12px 12px 12px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh-2);
}
.motion-toast p{font-size:13.5px;color:var(--muted);line-height:1.45;flex:1}
.motion-toast .mt-on{
  appearance:none;border:0;cursor:pointer;flex-shrink:0;
  font-family:inherit;font-size:13px;font-weight:600;color:#fff;
  padding:9px 16px;border-radius:100px;background:var(--grad-btn);
  white-space:nowrap;
}
.motion-toast .mt-on:hover{box-shadow:var(--sh-red)}
.motion-toast .mt-close{
  appearance:none;border:0;background:transparent;cursor:pointer;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  color:var(--faint);font-size:13px;line-height:1;
}
.motion-toast .mt-close:hover{background:var(--bg-alt);color:var(--ink)}
.motion-toast button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:520px){
  .motion-toast{left:12px;right:12px;bottom:12px;max-width:none;flex-wrap:wrap;padding:14px}
  .motion-toast p{flex:1 1 100%;order:1}
  .motion-toast .mt-on{order:2;margin-top:10px}
  .motion-toast .mt-close{order:3;margin:10px 0 0 auto}
}