:root{
  /* Thème CLAIR par défaut · bascule vers sombre via le bouton */
  --paper:#f5f5f2; --paper-2:#e9e8e4; --surface:#ffffff; --ink:#0a0a0a; --anthracite:#2c2c2c;
  --muted:rgba(10,10,10,0.62); --faint:rgba(10,10,10,0.45); --line:rgba(10,10,10,0.12);
  --nav-glass:rgba(245,245,242,0.80); --nav-menu:#f7f7f4;
  --nav-text:rgba(10,10,10,0.80);
  /* Bleu d'encre, echantillonne dans les photos de l'atelier : le pot de
     serigraphie donne #01368C, l'impression numerique #1943A6. Eclairci a
     #1A4FB0 pour tenir le contraste AA sur le papier (6,9:1), variante claire
     #6E9CEA en theme sombre, meme teinte (217 deg), 7,2:1.
     Pose d'abord sur --accent le 13 aout : erreur, ce jeton alimente seize
     details (surtitres, puces, numeros, libelles) et le bleu s'est retrouve
     partout. Conserve ici, inutilise, pret pour un usage unique et rare. */
  --accent:#1A4FB0;
  --serif:"Archivo","Satoshi",system-ui,sans-serif; /* police display : grotesque moderne */
  --sans:"Satoshi","Inter",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1); --maxw:1360px;
  /* Angle vif sur tout le contenu — images, cartes, galeries, tableaux.
     Le 4 px arrondi partout etait un reglage par defaut ; le tranchant se
     remarque et personne ne le fait. Les commandes (boutons, champs, onglets)
     gardent leur 4 px en dur : le contenu est net, ce qu'on manipule est doux. */
  --radius:0;
}
:root[data-theme="dark"]{
  --paper:#0a0a0a; --paper-2:#151515; --surface:#171717; --ink:#f4f2ec; --anthracite:#c8c6c0;
  --muted:rgba(244,242,236,0.62); --faint:rgba(244,242,236,0.45); --line:rgba(244,242,236,0.14);
  --nav-glass:rgba(10,10,10,0.72); --nav-menu:#0c0c0c;
  --nav-text:rgba(244,242,236,0.86);
}
:root[data-theme="dark"] .brand img{filter:none}
:root[data-theme="light"]{
  --paper:#f5f5f2; --paper-2:#e9e8e4; --surface:#ffffff; --ink:#0a0a0a; --anthracite:#2c2c2c;
  --muted:rgba(10,10,10,0.62); --faint:rgba(10,10,10,0.45); --line:rgba(10,10,10,0.12);
  --nav-glass:rgba(245,245,242,0.80); --nav-menu:#f7f7f4;
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top : la barre de navigation est en position:fixed, haute de
   84 px puis 70 px une fois la page defilee. Sans cette ligne, tout lien vers
   une ancre (#serigraphie, #broderie, #realisations, #comparatif, #restauration,
   #medical, #btp, #devis...) amenait le titre de la section DERRIERE la barre :
   on arrivait sur le corps du texte, jamais sur le titre. 70 px de barre plus
   16 px d'air. Une seule declaration couvre les 22 ancres du site, et le
   defilement doux la respecte.

   scroll-behavior:smooth a ete RETIRE d'ici le 31 aout 2026, apres mesure.
   Chrome abandonne l'animation de defilement vers une ancre quand elle est
   lancee pendant le chargement de la page : la page restait en haut. Mesure
   sur /personnalisation#comparatif, arrivee fraiche depuis une autre page :

       avec smooth : scrollY = 0     — la section n'est jamais atteinte
       sans smooth : scrollY = 7806  — la section se pose a 86 px

   Ce n'etait pas visible en cliquant une ancre DEPUIS la meme page, ou le
   defilement doux fonctionne : seule l'arrivee depuis une autre page cassait.
   C'est pourtant le cas de tous les boutons « Demander un devis » et des trois
   redirections 301 vers #restauration, #medical et #btp.
   Le confort du defilement doux est rendu par js/main.js, uniquement sur les
   clics d'ancre au sein d'une meme page. Si ce script ne s'execute pas, le saut
   est instantane — jamais absent. */
html{scroll-padding-top:86px;-webkit-font-smoothing:antialiased}
/* js/main.js pose tabindex="-1" sur la section visee par une ancre, pour que
   le clavier suive le regard. Chrome dessinait alors un cadre noir autour de
   la section entiere. On le retire sans rien perdre : un element en
   tabindex="-1" est hors du parcours de tabulation, il ne peut recevoir le
   focus que par programme — jamais au clavier. Les vrais anneaux de focus des
   liens, boutons et champs ne sont pas touches. */
[tabindex="-1"]:focus{outline:none}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}
/* Le zoom au survol est retire des images non cliquables (.serie, .galerie-op,
   .split-media, .lieu-large__img) : une image qui bouge sous la souris annonce
   un lien. Il ne subsiste que sur les vignettes qui en sont vraiment un —
   .real-grid .cell et .detail-grid, qui ouvrent la loupe. */

/* ---- APPARITION -------------------------------------------------------- */
/* Une seule regle, pour les 538 elements concernes : le contenu apparait, sans
   deplacement ni decoupe.
   Trois reglages ont ete retires le 13 aout, tous pour la meme raison — ils
   fabriquaient du mouvement la ou il n'apportait rien :
   - la montee de 28 px sur 1,1 s, appliquee a tout, qui signait la page ;
   - un volet lateral reserve aux titres, qui ajoutait une seconde facon
     d'apparaitre sur le meme ecran ;
   - 78 decalages en cascade repartis sur douze valeurs differentes (.05 a .3 s),
     soit douze cadences pour un seul effet.
   Ce qui reste est le plus calme, donc le plus sur. */
.reveal{opacity:0;transition:opacity .7s var(--ease)}
.reveal.in{opacity:1}
.reveal-all .reveal{opacity:1}

/* Le volet lateral — les titres qui s'ouvraient de gauche a droite — a ete
   retire : deux facons d'apparaitre sur la meme page, ca se remarque et ca
   distrait. Une seule regle desormais, pour les 538 elements : le contenu
   apparait, sans deplacement ni decoupe. C'est le plus calme, donc le plus sur. */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-0.01em;line-height:1.04}
.eyebrow{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--muted)}

/* ---- NAV ---- */
nav.lux{position:fixed;top:0;left:0;right:0;z-index:100;height:84px;display:flex;align-items:center;transition:background .5s var(--ease),border-color .5s var(--ease),height .4s var(--ease);border-bottom:1px solid transparent}
nav.lux .wrap{display:flex;align-items:center;justify-content:space-between}
nav.lux.scrolled{background:var(--nav-glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line);height:70px}
.brand img{height:26px;width:auto;filter:brightness(0);transition:filter .3s var(--ease)}
nav.lux.over:not(.scrolled) .brand img{filter:none}
.nav-mid{display:flex;gap:clamp(20px,2.4vw,40px)}
/* La barre paraissait delavee : graisse 400 combinee a 62 % d'opacite.
   On monte a 500 et on remonte le contraste — le menu doit se lire d'un coup,
   pas se deviner. */
.nav-mid a:not(.btn){font-size:13.5px;font-weight:500;letter-spacing:0.015em;
  color:var(--nav-text);transition:color .3s var(--ease)}
.nav-mid a:not(.btn):hover{color:var(--ink)}
nav.lux.over:not(.scrolled) .nav-mid a:not(.btn){color:rgba(255,255,255,0.92)}
nav.lux.over:not(.scrolled) .nav-mid a:not(.btn):hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-tel{font-size:13.5px;font-weight:500;letter-spacing:0.015em;color:var(--nav-text)}
nav.lux.over:not(.scrolled) .nav-tel{color:rgba(255,255,255,0.92)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0.02em;padding:13px 26px;border-radius:4px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink)}
nav.lux.over:not(.scrolled) .btn-outline{color:#fff;border-color:rgba(255,255,255,0.4)}
.nav-burger{display:none}

/* ---- HERO ---- */
/* Le hero occupait 100 % de l'ecran quelle que soit la fenetre. Deux effets
   mesures : sur une fenetre haute (1440x1200) la video etait agrandie 1,11 fois
   au-dela de sa definition et rognee de 33 % en largeur ; sur telephone, de 74 %.
   On voyait un quart de l'image, tres agrandi.
   A 86 svh le haut de la section suivante depasse — meilleur appel au defilement
   qu'un indicateur — et la video est moins etiree. 74 svh sur telephone, ou
   l'ecart entre le 16/9 du film et l'ecran est le plus violent. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero video,.hero .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Deux voiles superposes. Le vertical assoit le titre et le pied de page ;
   l'horizontal assombrit la moitie gauche, la seule ou du texte se pose, et
   laisse la moitie droite de l image intacte.
   Valeurs allegees le 23 aout : le film a ete mesure image par image sur la
   zone du texte (55 % gauche, moitie basse). Luma moyenne 104/255, plan le
   plus clair 153, percentile haut 209. Le voile combine etait a ~73 %, ce qui
   donnait plus de 10:1 dans le pire cas — trois fois le necessaire, pour un
   film inutilement eteint. A ~52 % derriere le titre, le pire cas tient
   encore 5,1:1, au-dessus du seuil AA de 4,5:1 pour du petit texte.
   Ne pas descendre plus bas sans remesurer : sous 45 %, le percentile haut
   passe sous le seuil et le sous-titre blanc devient limite. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(10,10,9,0.34) 0%,rgba(10,10,9,0.26) 45%,rgba(10,10,9,0) 85%),
               linear-gradient(180deg,rgba(10,10,9,0.42) 0%,rgba(10,10,9,0.18) 30%,rgba(10,10,9,0.66) 47%,rgba(10,10,9,0.74) 100%)}
.hero .wrap{position:relative;z-index:2;color:#fff;padding-bottom:clamp(56px,8vh,110px);padding-top:120px;width:100%}
/* 34ch : la premiere ligne, « Personnalisation textile a Paris : », tient
   entiere. Le <br> du HTML place la seconde, pour que la coupure de ligne
   coincide avec le passage en gras. Sans ces deux reglages, le titre cassait
   sur « a » et le gras demarrait en milieu de ligne. */
.hero h1{font-size:clamp(2.3rem,4.4vw,4rem);font-weight:300;color:#fff;max-width:34ch;letter-spacing:-0.02em}
.hero h1 em{font-style:italic;color:#fff}
.hero .lead{color:rgba(255,255,255,0.97);max-width:52ch;margin-top:clamp(22px,3vw,32px)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,44px)}
/* Le hero est toujours sur fond sombre (vidéo + dégradé) : ses boutons ne
   doivent pas suivre le thème, sinon en sombre var(--ink) devient clair et
   on obtient du blanc sur blanc. Couleurs figées, et vrai contraste entre
   le bouton principal et le secondaire. */
.hero .btn{background:#fff;color:#0a0a0a;border-color:#fff}
.hero .btn:hover{background:#efece6;border-color:#efece6}
.hero .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)}
.hero .btn-outline:hover{background:rgba(255,255,255,0.14);border-color:#fff}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,0.7);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-scroll span{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,0.7),transparent);animation:scrollLine 2.4s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- SECTIONS ---- */
section{position:relative}
.pad{padding:clamp(90px,13vw,190px) 0}
.section-eye{display:block;margin-bottom:26px}
.big{font-size:clamp(2rem,4.6vw,3.8rem);font-weight:300;letter-spacing:-0.015em;max-width:20ch}
/* Un titre porte une largeur maximale : dans un bloc centre, son cadre doit
   etre centre lui aussi. Sans cela le texte se centre a l'interieur d'un cadre
   reste cale a gauche, et le titre parait decale — c'etait le cas sur les
   11 blocs d'appel du site. */
[style*="text-align:center"] .big,
[style*="text-align: center"] .big,
[style*="text-align:center"] .lead,
[style*="text-align: center"] .lead{ margin-inline:auto }
.big em{font-style:italic}

/* Manifeste */
.manifeste{text-align:center}
.manifeste .stmt{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.22;letter-spacing:-0.01em;max-width:22ch;margin:22px auto 0}
.manifeste .stmt b{font-weight:500;font-style:italic}
.manifeste .sub{max-width:60ch;margin:34px auto 0}

/* Pourquoi — piliers */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(40px,5vw,70px)}
.pillar{border-top:1px solid var(--line);padding-top:26px}
.pillar .n{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--accent)}
.pillar h2, .pillar h3{font-size:1.5rem;margin:16px 0 12px;font-weight:600;letter-spacing:-0.01em}
.pillar p{color:var(--muted);font-size:0.98rem}

/* Split présentation */
.split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(36px,5vw,90px);align-items:center}
.split.alt .split-media{order:2}
.split-media{border-radius:var(--radius);overflow:hidden}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}

.split-body .big{margin:18px 0 0}
.split-body p{color:var(--muted);margin-top:22px;max-width:50ch}
.mini-list{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:14px}
.mini-list li{display:flex;gap:14px;align-items:baseline;color:var(--ink);font-size:1rem}
.mini-list li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}

/* Expertises */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(40px,5vw,64px)}
.exp{background:var(--paper);padding:clamp(26px,2.4vw,38px);min-height:230px;display:flex;flex-direction:column;transition:background .5s var(--ease)}
.exp:hover{background:var(--paper-2)}
.exp .x{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1rem}
.exp h3{font-size:1.35rem;margin:14px 0 10px}
.exp p{color:var(--muted);font-size:0.92rem;flex:1}
/* Les tuiles sont devenues des liens vers les pages locales : c'est le maillage
   interne qui donne du poids a ces pages. On neutralise le style de lien par
   defaut et on affiche l'ancre descriptive en pied de tuile — elle sert autant
   au visiteur qu'au referencement. */
a.exp{color:inherit;text-decoration:none}
.exp-lien{display:block;margin-top:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease)}
/* Espace insecable : sinon la fleche se retrouve seule sur la ligne suivante
   quand l'ancre passe sur deux lignes. */
.exp-lien::after{content:"\00a0\2192"}
a.exp:hover .exp-lien{color:var(--accent)}
a.sect{color:inherit;text-decoration:none}

/* Réalisations */
.dark{background:#0a0a0a;color:#f4f2ec}
.dark .eyebrow{color:var(--accent)}
.dark .big{color:#f7f5ef}
/* Les photos de realisations vont du ratio 0,56 au ratio 1,78. Sans hauteur
   imposee, la grille subissait celle de l'image : une tuile de 1 460 px voisinait
   une tuile de 400 px, et le bloc devorait un tiers de la page d'accueil.
   On fixe la proportion du bloc entier ; les images se recadrent dedans. */
.real-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:clamp(38px,5vw,60px);
  aspect-ratio:5/4}
/* min-height:0 est indispensable : sans lui, un element de grille refuse de
   descendre sous la hauteur naturelle de son image, et la proportion imposee
   plus haut est ignoree des que les photos finissent de charger. */
.real-grid .cell{border-radius:var(--radius);overflow:hidden;position:relative;min-height:0}
.real-col{min-height:0}
.real-col .cell{min-height:0}
.real-grid .cell img{width:100%;height:100%;object-fit:cover;min-height:0;transition:transform 1.2s var(--ease)}
.real-grid .cell:hover img{transform:scale(1.05)}
.real-col{display:grid;gap:16px;grid-template-rows:1fr 1fr}
/* En une seule colonne, la proportion du bloc n'a plus de sens : c'est chaque
   tuile qui doit tenir sa forme. */
@media(max-width:820px){
  .real-grid{aspect-ratio:auto}
  .real-grid .cell{aspect-ratio:4/3}
  .real-col{grid-template-rows:auto auto}
}
.real-cap{position:absolute;left:20px;bottom:18px;color:#fff;font-size:.85rem;letter-spacing:.02em;z-index:2}
.real-grid .cell::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6));z-index:1}
.logo-band{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);overflow:hidden;margin-top:36px}
.logo-band div{background:#161615;aspect-ratio:16/9;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Les logos vont du carré (Accor, Rugby) à l'ultra-large (Bumble × Goodnews).
   On borne les deux côtés : sans max-height, les logos hauts débordent la tuile. */
.logo-band img{width:auto;height:auto;max-width:60%;max-height:68%;object-fit:contain}
.dark .link-lux{color:#f4f2ec;border-color:rgba(255,255,255,0.3)}

/* Secteurs */
.sect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(40px,5vw,60px)}
.sect{border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s var(--ease),transform .4s var(--ease)}
.sect:hover{background:var(--paper-2);transform:translateY(-3px)}
.sect .s-n{font-family:var(--serif);font-style:italic;color:var(--faint);font-size:.95rem}
.sect h3{font-size:1.15rem;font-weight:400}

/* Méthode */
/* La methode est une SEQUENCE, pas quatre choses egales : un filet continu la
   traverse et chaque etape y est posee. Cela evite aussi la troisieme grille
   de quatre colonnes d'affilee sur la page d'accueil. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);
  margin-top:clamp(44px,5vw,70px);counter-reset:step;position:relative;padding-top:34px}
/* Le filet part du centre du premier point et s'arrete au centre du dernier :
   il relie les etapes au lieu de border le bloc. */
.steps::before{content:"";position:absolute;top:11px;left:12.5%;right:12.5%;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.5s var(--ease) .15s}
.steps.trace::before{transform:scaleX(1)}
.step{border-top:0;padding-top:0;position:relative}
/* Le point de l'etape, pose sur le filet. */
.step::before{content:"";position:absolute;top:-29px;left:50%;width:9px;height:9px;
  margin-left:-4.5px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line);transform:scale(0);
  transition:transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.steps.trace .step::before{transform:scale(1);background:var(--ink);border-color:var(--ink)}
.steps.trace .step:nth-child(1)::before{transition-delay:.25s}
.steps.trace .step:nth-child(2)::before{transition-delay:.55s}
.steps.trace .step:nth-child(3)::before{transition-delay:.85s}
.steps.trace .step:nth-child(4)::before{transition-delay:1.15s}
.step .st-n{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;
  color:var(--faint);line-height:1}
@media(prefers-reduced-motion:reduce){
  .steps::before{transform:scaleX(1);transition:none}
  .steps .step::before{transform:scale(1);background:var(--ink);border-color:var(--ink);transition:none}
}
/* En une colonne, le filet devient vertical et longe les etapes. */
@media(max-width:820px){
  .steps{padding-top:0;padding-left:26px}
  .steps::before{top:6px;bottom:6px;left:4px;right:auto;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease)}
  .steps.trace::before{transform:scaleY(1)}
  .step::before{top:6px;left:-26px;margin-left:0}
}
.step h3{font-size:1.3rem;margin:14px 0 10px}
.step p{color:var(--muted);font-size:0.94rem}

/* Avis */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);margin-top:clamp(40px,5vw,60px)}
.quote{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,2.4vw,36px);background:var(--paper)}
.quote p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:1.15rem;line-height:1.5}
.quote .who{margin-top:22px;font-size:.85rem;color:var(--muted);font-style:normal;font-family:var(--sans)}
.quote .who b{color:var(--ink);font-weight:500}

/* FAQ */
.faq{max-width:820px;margin:clamp(40px,5vw,56px) auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--serif);font-size:1.3rem;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{transition:transform .35s var(--ease);color:var(--accent);font-family:var(--sans);font-weight:400}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq .ans{color:var(--muted);padding:0 0 26px;max-width:70ch}

/* CTA final */
.cta-final{text-align:center}
.cta-final .big{margin:22px auto 0}
.cta-final .lead{max-width:54ch;margin:26px auto 0}
.cta-final .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.cta-chan{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:40px;color:var(--muted);font-size:.9rem}
.cta-chan a{display:inline-flex;align-items:center;gap:9px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px}

/* Footer */
footer.lux{background:#0a0a0a;color:rgba(245,243,238,0.8);padding:clamp(64px,8vw,110px) 0 40px}
/* Cinq colonnes depuis l'activation des pages secteurs : le bloc de marque
   cede un peu de largeur et l'ecart se resserre, sinon les intitules de
   secteurs se coupent en trois lignes. */
.foot-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:clamp(24px,2.6vw,40px)}
/* width:auto obligatoire : depuis que le <img> porte width="420" height="114"
   (reservation d'espace, anti-CLS), l'attribut fait office de largeur declaree.
   Avec height:34px impose ici, le logo etait etire a 273x34 au lieu de 125x34. */
footer.lux .f-logo img{height:34px;width:auto;filter:none;margin-bottom:22px}
footer.lux p{color:rgba(245,243,238,0.55);font-size:.92rem;max-width:34ch}
/* Ces intitules de colonne etaient des <h4>. Ils creaient un saut h2 -> h4 dans
   le plan de la page (h1 -> h4 sur contact, faq, merci) alors qu'ils n'ouvrent
   aucune section : ce sont des etiquettes de navigation. Passes en <p>. */
footer.lux .foot-t{font-family:var(--sans);font-size:.75rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,243,238,0.5);margin-bottom:18px;font-weight:500;max-width:none}
footer.lux ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer.lux ul a{color:rgba(245,243,238,0.8);font-size:.94rem}
footer.lux ul a:hover{color:#fff}

/* Au doigt, les liens du pied de page tombaient a 19 px de haut : sous le
   minimum de 24 px demande par WCAG 2.5.8, et penible a viser. Sur telephone
   ils deviennent des lignes cliquables de 34 px, l'espacement de la liste
   servant de zone de touche plutot que d'air perdu. */
/* Reseaux : deux liens sous le bloc de marque. Le site n'en affichait aucun,
   alors que la chaine YouTube etait deja declaree dans le Schema.org. */
/* Selecteur aligne sur footer.lux ul, qui impose une colonne a toutes les
   listes du pied et l'emportait sur la classe seule. */
footer.lux ul.foot-social{list-style:none;display:flex;flex-direction:row;gap:22px;margin-top:20px}
@media(max-width:760px){
  footer.lux ul{gap:2px}
  footer.lux ul a{display:block;padding:8px 0;font-size:1rem}
  footer.lux ul.foot-social{gap:14px;margin-top:14px}
  footer.lux ul.foot-social a{padding:8px 0}
}
.foot-social a{color:rgba(245,243,238,0.55);font-size:.86rem;letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,0.16);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot-social a:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,6vw,80px);padding-top:26px;border-top:1px solid rgba(255,255,255,0.1);font-size:.82rem;color:rgba(245,243,238,0.5)}
.link-lux{display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:5px;font-size:.85rem;letter-spacing:0.02em;transition:gap .3s var(--ease)}
.link-lux:hover{gap:18px}

@media(max-width:960px){
  .nav-mid,.nav-tel{display:none}
  .pillars,.exp-grid,.sect-grid,.steps,.quotes{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}.split.alt .split-media{order:0}
  .real-grid{grid-template-columns:1fr}.logo-band{grid-template-columns:repeat(4,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .exp-grid,.sect-grid,.steps,.quotes,.pillars{grid-template-columns:1fr}
  .logo-band{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  /* Sur mobile les deux boutons passent l'un sous l'autre et viennent
     recouvrir l'indicateur « Defiler ». Le geste de scroll etant evident
     au doigt, on retire l'indicateur plutot que de tasser les CTA. */
  .hero-scroll{display:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-scroll span{animation:none}}

/* ============================================================
   PAGES INTÉRIEURES (hero de page + specs)
   ============================================================ */
.page-hero-lux{ padding:clamp(124px,15vh,178px) 0 clamp(50px,7vw,90px); border-bottom:1px solid var(--line); }
.page-hero-lux h1{ font-size:clamp(2.6rem,7vw,5.8rem); font-weight:300; max-width:15ch; margin-top:18px; letter-spacing:-0.02em; }
.page-hero-lux h1 em{ font-style:italic; }
.page-hero-lux .lead{ max-width:58ch; margin-top:24px; }

/* Variante à deux colonnes : le texte à gauche, une image à droite.
   Sans le modificateur, le gabarit reste identique sur les autres pages. */
.page-hero-lux--media{ padding-top:clamp(112px,13vh,152px); }
.page-hero-lux--media .wrap{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,76px);
}
.page-hero-lux--media h1{ font-size:clamp(2.4rem,4.4vw,4.1rem); max-width:none; }
.page-hero-lux--media .lead{ max-width:46ch; }
.hero-media{ margin:0; }
.hero-media img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 18%;
  border-radius:var(--radius); background:var(--paper-2);
}
@media (max-width:900px){
  .page-hero-lux--media .wrap{ grid-template-columns:1fr; gap:clamp(26px,5vw,38px); }
  .hero-media img{ aspect-ratio:16/10; }
}

.specs{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px; }
/* « Conditions » / « Avantages » etaient des <h4> sous un <h2> : saut de niveau
   dans le plan de la page. Ce sont des etiquettes de colonne, pas des sections. */
.specs .specs-t{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; font-weight:600; }
.specs ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
/* Meme puce que .mini-list : un point rond. Le tiret cadratin employe ici
   faisait doublon avec les tirets de ponctuation du texte courant et alourdissait
   des listes deja denses. */
.specs li{ color:var(--muted); font-size:.94rem; line-height:1.5; padding-left:18px; position:relative; }
.specs li::before{ content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--faint); }
@media(max-width:600px){ .specs{ grid-template-columns:1fr; gap:24px; } }

/* Événementiel : bloc simple centré */
.evt-band{ text-align:center; }
.evt-band .big{ margin:18px auto 0; }
.evt-band .lead{ max-width:60ch; margin:26px auto 0; }

/* Tags, produits, références (pages intérieures) */
.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; list-style:none; }
.tags li{ border:1px solid var(--line); border-radius:4px; padding:7px 15px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dark .tags li{ border-color:rgba(255,255,255,0.2); color:rgba(245,243,238,0.72); }
/* Quand une etiquette porte un lien, le rembourrage doit passer sur le lien :
   sinon la pastille a l air cliquable mais seul le texte l est, soit 15 px de
   haut — sous le minimum de 24 px et trompeur a l usage. La marge negative
   annule le rembourrage du <li>, l apparence ne bouge pas. */
.tags li:has(a){ padding:0 }
.tags li a{ display:block; padding:7px 15px; margin:0; color:inherit; text-decoration:none }
@supports not selector(:has(a)){
  .tags li a{ margin:-7px -15px }
}
.prod-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:clamp(38px,5vw,56px); }
.prod-grid figure{ text-align:center; }
.prod-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); background:var(--paper-2); border:1px solid var(--line); transition:transform .5s var(--ease); }
.prod-grid figure:hover img{ transform:translateY(-4px); }
.prod-grid figcaption{ margin-top:10px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media(max-width:760px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
.ref-list{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 0; margin-top:clamp(28px,3vw,44px); }
.ref-list span{ font-family:var(--serif); font-weight:300; font-size:clamp(1.1rem,2.4vw,1.9rem); padding:0 clamp(16px,2vw,26px); border-right:1px solid var(--line); line-height:1.1; }

/* ============================================================
   MENU MOBILE (burger)
   ============================================================ */
.nav-burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:11px }
.nav-burger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease),opacity .3s var(--ease) }
nav.lux.over:not(.scrolled) .nav-burger span{ background:#fff }
nav.lux.open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
nav.lux.open .nav-burger span:nth-child(2){ opacity:0 }
nav.lux.open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
.nav-mobile-extra{ display:none }
@media(max-width:960px){
  .nav-burger{ display:flex }
  .nav-right{ display:none }
    /* display:flex indispensable : le bloc @media plus haut pose display:none
       sur .nav-mid pour le sortir du bandeau, et ne le releve nulle part. */
  .nav-mid{ display:flex; position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--nav-menu); border-bottom:1px solid var(--line); padding:8px clamp(22px,5vw,64px) 34px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease),transform .35s var(--ease); box-shadow:0 30px 60px rgba(0,0,0,0.35) }
  nav.lux.open .nav-mid{ opacity:1; transform:none; pointer-events:auto }
  nav.lux .nav-mid a:not(.btn), nav.lux.over:not(.scrolled) .nav-mid a:not(.btn){ color:var(--ink); font-size:1.35rem; font-family:var(--serif); font-weight:300; padding:18px 0; border-bottom:1px solid var(--line) }
  .nav-mobile-extra{ display:flex; flex-direction:column; gap:16px; margin-top:24px; border:0 }
  .nav-mobile-extra a{ border:0 !important; font-family:var(--sans) !important; font-size:.95rem !important; padding:0 !important }
  .nav-mobile-extra .btn{ justify-content:center; padding:15px 26px !important; font-size:.85rem !important }
}

/* Bande de faits (vrais) */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,50px) }
.fact{ border-top:1px solid var(--line); padding-top:24px }
.fact .f-n{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.4vw,2.9rem); letter-spacing:-0.01em; line-height:1 }
.fact p{ color:var(--muted); font-size:.94rem; margin-top:12px; max-width:24ch }
@media(max-width:820px){ .facts{ grid-template-columns:1fr 1fr } }
@media(max-width:480px){ .facts{ grid-template-columns:1fr } }

/* ============================================================
   TYPO DATA/LABELS — DM Mono (CLAUDE.md)
   ============================================================ */
/* Les surtitres passent en Satoshi. En chasse fixe, un mot seul en petites
   capitales tres espacees rendait l'espacement inegal ; et c'etait une
   troisieme police pour un gain de caractere quasi nul a cette taille.
   Le monospace reste sur les chiffres, ou il sert vraiment (alignement). */
.eyebrow{ font-family:var(--sans); font-weight:600; letter-spacing:0.16em; font-size:11.5px; }
/* 11,5 px en capitales, c'est lisible sur ecran large et juste sur telephone :
   un demi-point de plus, la ou l'ecran est tenu a bout de bras. */
@media(max-width:760px){.eyebrow{font-size:12px}.tags li{font-size:12px}}
.specs .specs-t{ font-family:var(--sans); font-weight:600; letter-spacing:0.14em; }
.fact .f-n{ font-family:var(--mono); font-weight:500; letter-spacing:-0.02em; }
.cfeat-idx, .tech-num{ font-family:var(--mono); }
.hero-scroll{ font-family:var(--mono); }

/* ============================================================
   AVIS (note Google) + FORMULAIRE DEVIS
   ============================================================ */
.rating{ display:inline-flex; align-items:baseline; gap:18px; margin-top:10px }
.rating .stars{ color:var(--accent); font-size:1.7rem; letter-spacing:3px }
.rating .score{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1 }
.rating .score span{ font-size:.38em; color:var(--muted) }

.contact-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(36px,5vw,72px); margin-top:clamp(40px,5vw,60px); align-items:start }
.form{ display:grid; gap:18px }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.field input, .field textarea, .field select{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:14px 15px; font-family:var(--sans); font-size:16px; color:var(--ink); transition:border-color .3s var(--ease) }
.field textarea{ min-height:120px; resize:vertical }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--ink) }
/* Les deux groupes de cases a cocher etaient annonces par un <label> qui ne
   designait aucun champ : un lecteur d'ecran ne le rattachait a rien, on
   entendait « Personnalisation B2B, case a cocher » sans jamais entendre
   « Type de projet ». C'est desormais un fieldset/legend, qui porte le groupe.
   min-width:0 parce qu'un fieldset a min-inline-size:min-content par defaut et
   ferait deborder la grille du formulaire. */
fieldset.field{ border:0; padding:0; margin:0; min-width:0 }
fieldset.field > legend{ display:block; float:left; width:100%; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.choices{ clear:both; display:flex; flex-wrap:wrap; gap:10px }
.choices label{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:4px; padding:10px 14px; font-size:14px; cursor:pointer; color:var(--ink); transition:border-color .25s var(--ease),background .25s var(--ease); margin:0; text-transform:none; letter-spacing:0; font-family:var(--sans);
  /* flex:0 0 auto et nowrap : sans eux, la case la plus large etait comprimee
     par ses voisines et son intitule se cassait en deux ou trois lignes —
     « Je ne sais pas » tenait sur trois. Les cases d'une meme ligne prenaient
     alors 91 px de haut au lieu de 45, en hauteurs inegales. Le texte de ces
     cases est court : il tient toujours sur une ligne, et le retour a la ligne
     se fait entre les cases, pas dedans. */
  flex:0 0 auto; white-space:nowrap }
.choices label:hover{ border-color:var(--ink) }
.choices input{ accent-color:var(--accent) }
.form .btn{ justify-content:center; padding:16px 30px }
.hp{ position:absolute; left:-9999px }
.contact-side{ border-top:1px solid var(--line); padding-top:24px }
.contact-side .blk{ margin-bottom:22px }
.contact-side .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px }
.contact-side .v{ font-size:1.02rem; color:var(--ink) }
.contact-side .v a{ border-bottom:1px solid var(--line) }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr } .form .row2{ grid-template-columns:1fr } }

/* Vidéos collaborations (lecture à la visibilité) */
.split-media video{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--paper-2) }

/* ============================================================
   SHOP
   ============================================================ */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(34px,4vw,52px) }
.product-card .ph{ display:block; border:1px solid var(--line); border-radius:4px; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2) }
.product-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.product-card:hover .ph img{ transform:scale(1.03) }
.product-card .info{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; gap:10px }
.product-card .name{ font-family:var(--serif); font-size:1.15rem; font-weight:400 }
.product-card .price{ font-family:var(--mono); font-size:.92rem; color:var(--anthracite) }
.product-card .buy{ display:block; text-align:center; margin-top:12px; border:1px solid var(--ink); border-radius:4px; padding:11px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition:background .3s var(--ease),color .3s var(--ease) }
.product-card .buy:hover{ background:var(--ink); color:var(--paper) }
.shop-note{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); margin-top:22px }
@media(max-width:820px){ .shop-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:480px){ .shop-grid{ grid-template-columns:1fr } }

/* Pages légales / texte long */
.legal{ max-width:760px; margin-top:clamp(30px,4vw,48px) }
.legal h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin:clamp(34px,4vw,52px) 0 14px }
.legal p, .legal li{ color:var(--muted); line-height:1.75; margin-bottom:14px }
.legal ul{ padding-left:20px }
.legal a{ border-bottom:1px solid var(--line) }
.legal .todo{ background:rgba(201,168,76,0.14); border-left:2px solid var(--accent); padding:2px 8px; color:var(--anthracite); font-family:var(--mono); font-size:.85em }

/* ============================================================
   BASCULE DE THÈME (sombre par défaut / clair au choix)
   ============================================================ */
.theme-toggle{ display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);border-radius:4px;background:transparent;color:inherit;cursor:pointer;transition:border-color .3s var(--ease),transform .2s var(--ease) }
.theme-toggle:hover{ border-color:var(--ink) }
.theme-toggle:active{ transform:scale(.94) }
.theme-toggle svg{ width:18px;height:18px;display:block }
.theme-toggle .ic-sun{ display:none }
.theme-toggle .ic-moon{ display:block }
:root[data-theme="dark"] .theme-toggle .ic-sun{ display:block }
:root[data-theme="dark"] .theme-toggle .ic-moon{ display:none }
nav.lux.over:not(.scrolled) .theme-toggle{ color:#fff;border-color:rgba(255,255,255,0.4) }
@media(max-width:960px){ .nav-right{ display:flex } .nav-right .nav-tel, .nav-right .btn-outline{ display:none } }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px); margin-top:clamp(40px,5vw,60px) }
.blog-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:transform .4s var(--ease),border-color .4s var(--ease) }
.blog-card:hover{ transform:translateY(-4px); border-color:var(--ink) }
.blog-card .ph{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2) }
.blog-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.blog-card:hover .ph img{ transform:scale(1.05) }
.blog-card .bc-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1 }
.blog-card .bc-cat{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.blog-card h2, .blog-card h3{ font-family:var(--serif); font-weight:400; font-size:1.32rem; margin:12px 0 10px; line-height:1.14 }
.blog-card p{ color:var(--muted); font-size:.92rem; flex:1 }
.blog-card .bc-more{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; margin-top:18px; color:var(--ink) }
@media(max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .blog-grid{ grid-template-columns:1fr } }
.article{ max-width:720px; margin:0 auto }
.article .lead-p{ font-size:1.22rem; color:var(--ink); line-height:1.7; margin-bottom:20px }
.article h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.05rem); margin:clamp(34px,4vw,50px) 0 14px; line-height:1.15 }
.article p, .article li{ color:var(--muted); line-height:1.8; margin-bottom:15px; font-size:1.05rem }
.article ul{ padding-left:20px; margin-bottom:16px }
.article strong{ color:var(--ink); font-weight:600 }

/* ============================================================
   SHOP — galerie produit (survol 2e vue + lightbox)
   ============================================================ */
.product-card .ph{ position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); cursor:zoom-in }
.product-card .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease),transform .6s var(--ease) }
.product-card .ph .ph-2{ opacity:0 }
.product-card:hover .ph .ph-2{ opacity:1 }
.product-card:hover .ph img{ transform:scale(1.03) }
.lb{ position:fixed; inset:0; z-index:1000; background:rgba(8,8,8,0.93); display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,50px) }
.lb.open{ display:flex }
.lb-inner{ display:flex; flex-direction:column; gap:16px; max-width:980px; width:100% }
.lb-main{ position:relative; text-align:center }
.lb-main img{ max-height:62vh; max-width:100%; border-radius:4px; object-fit:contain; background:#fff }
.lb-thumbs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.lb-thumbs button{ width:60px; height:74px; border:1px solid rgba(255,255,255,0.2); border-radius:4px; overflow:hidden; padding:0; cursor:pointer; background:none; opacity:.5; transition:opacity .3s,border-color .3s }
.lb-thumbs button.active,.lb-thumbs button:hover{ opacity:1; border-color:#fff }
.lb-thumbs img{ width:100%; height:100%; object-fit:cover }
.lb-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; flex-wrap:wrap }
.lb-bar .n{ font-family:var(--serif); font-size:1.4rem }
.lb-bar .p{ font-family:var(--mono) }
.lb-bar .buy{ background:#fff; color:#0a0a0a; border-radius:4px; padding:12px 26px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase }
.lb-close{ position:absolute; top:-6px; right:0; z-index:2; background:none; border:0; color:#fff; font-size:30px; cursor:pointer; line-height:1 }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); border:0; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:22px }
.lb-nav.prev{ left:6px } .lb-nav.next{ right:6px }

/* ============================================================
   SÉCURITÉS MOBILE (anti-débordement horizontal)
   ============================================================ */
html, body{ max-width:100%; overflow-x:hidden }
h1, h2, h3, .big, .stmt, .hero h1, .page-hero-lux h1{ overflow-wrap:break-word; word-wrap:break-word }
img, video{ max-width:100% }
/* Depuis que chaque <img> porte width="" et height="" pour reserver sa place
   (anti-CLS), ces attributs valent largeur et hauteur declarees. Des qu'une
   regle CSS impose l'une des deux dimensions sans liberer l'autre, l'image est
   etiree : c'est ce qui est arrive au logo du pied de page et aux chevrons de
   l'intro. height:auto par defaut retablit le ratio partout ; les regles qui
   posent explicitement une hauteur (object-fit:cover) restent prioritaires. */
img{ height:auto }
@media (max-width:420px){
  .hero h1{ font-size:clamp(1.8rem,8.5vw,2.4rem) }
  .page-hero-lux h1{ font-size:clamp(2.1rem,9vw,3rem) }
  .big{ font-size:clamp(1.7rem,7.5vw,2.4rem) }
  .wrap{ padding:0 20px }
}

/* ============================================================
   NOUVELLE DIRECTION — grotesque Archivo · monochrome · sans italique
   ============================================================ */
/* Accent lisible selon le fond : sombre sur clair, clair sur sombre */
:root[data-theme="dark"]{ --accent:#6E9CEA }
.dark, footer.lux, nav.lux.over:not(.scrolled){ --accent:#6E9CEA }

/* Zéro italique nulle part */
em, i, .hero h1 em, .big em, .manifeste .stmt b, .pillar .n, .exp .x,
.sect .s-n, .quote p, .page-hero-lux h1 em{ font-style:normal !important }

/* Titres : grotesque affirmé (Archivo aime un peu de poids) */
h1, h2, h3{ font-weight:600; letter-spacing:-0.02em }
.manifeste .stmt{ font-weight:500 }
.fact .f-n, .rating .score, .step .st-n, .lb-bar .n{ font-weight:600 }
.hero h1 em, .big em{ font-weight:700 }
.faq summary{ font-weight:600 }
.eyebrow, .exp .x, .sect .s-n{ font-weight:600 }

/* L'ancien surlignage or des [À REMPLIR] passe en neutre */
.legal .todo{ background:rgba(10,10,10,0.06); border-left-color:var(--ink) }

/* ============================================================
   RÉFÉRENCE ATELIER AMELOT — version premium Maison Vivaldi
   ============================================================ */
/* Titre de section façon Amelot : grotesque gras MAJUSCULES */
.h-amelot{ font-family:var(--serif); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4.8vw,3.4rem); letter-spacing:-0.005em; line-height:1.02 }
.h-amelot .thin{ font-weight:400; color:var(--muted) }

/* NOS TECHNIQUES — pastilles rondes (signature) */
.tech-circles{ display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(22px,3.5vw,60px); margin-top:clamp(44px,5vw,72px) }
.tech-c{ width:clamp(140px,16vw,210px); text-align:center }
.tech-c .disc{ display:block; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line) }
.tech-c .disc img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.tech-c:hover .disc img{ transform:scale(1.06) }
.tech-c .t-label{ display:block; margin-top:18px; font-family:var(--serif); font-weight:600;
  font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em }
.tech-c .t-sub{ display:block; margin-top:5px; font-size:.83rem; color:var(--muted); line-height:1.35 }

/* Bouton DEMANDER UN DEVIS — flottant collant.
   Le monogramme MV se retourne pour reveler l'appel : c'est la marque qui
   attire l'oeil, pas un rond de texte. */
.devis-float{ position:fixed; bottom:26px; right:26px; z-index:90;
  width:clamp(94px,9vw,118px); height:clamp(94px,9vw,118px);
  perspective:620px; border-radius:50%;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.24));
  transition:transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
  /* `backwards` et non `both` : avec `both`, l'animation d'apparition fige
     l'opacite a 1 pour toujours et empeche le fondu de disparition en pied
     de page — le bouton s'effacait d'un coup. */
  animation:devisIn .6s var(--ease) backwards }
.devis-float:hover{ transform:scale(1.07) }

/* Etat de repos : la face qui vend. Le monogramme ne s'affiche qu'a l'arrivee
   et au survol — une boucle permanente parasiterait la lecture, et pendant
   sa phase logo le bouton ne dit pas ce qu'il declenche. */
.devis-float__piece{ position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transform:rotateY(180deg);
  transition:transform .65s var(--ease);
  animation:devisEntree 2s var(--ease) .5s backwards }
/* Le survol ramene le monogramme : une recompense, pas un rappel.
   L'animation d'entree ne remplit pas son etat final, donc la regle de repos
   reprend la main sans a-coup une fois la bascule jouee. */
.devis-float:hover .devis-float__piece,
.devis-float:focus-visible .devis-float__piece{ transform:rotateY(0) }

.devis-float__face{ position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:12px;
  background:var(--ink); color:var(--paper);
  -webkit-backface-visibility:hidden; backface-visibility:hidden }
.devis-float__face--texte{ transform:rotateY(180deg);
  text-align:center; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; line-height:1.25 }

/* Monogramme pose en masque et non en <img> : la couleur suit alors le theme
   clair ou sombre, alors qu'un PNG blanc resterait blanc sur fond clair. */
/* Le PNG source porte une large marge transparente autour du chevron : la zone
   de masque doit donc etre nettement plus grande que le mark voulu. */
.devis-float__mark{ display:block; width:96%; height:82%; background:var(--paper);
  -webkit-mask:url(../media/brand/logo-mv-mark.png) center/contain no-repeat;
          mask:url(../media/brand/logo-mv-mark.png) center/contain no-repeat }

/* Le monogramme s'installe, puis bascule une seule fois vers l'appel. */
@keyframes devisEntree{
  0%,60% { transform:rotateY(0) }
  100%   { transform:rotateY(180deg) }
}
/* Efface au niveau du bloc d'appel final et du pied de page : il y recouvrait
   « Mentions legales » et repetait un bouton deja present a l'ecran. */
.devis-float--efface{ opacity:0; visibility:hidden; transform:scale(.85); pointer-events:none }
@keyframes devisIn{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:scale(1) } }
@media(max-width:600px){
  .devis-float{ width:74px; height:74px; bottom:16px; right:16px }
  .devis-float__face{ padding:9px }
  .devis-float__face--texte{ font-size:10px; letter-spacing:.03em }
}
/* Sans animation, on fige sur la face texte : c'est elle qui porte le sens.
   Figer sur le monogramme laisserait un bouton muet. */
@media print,(prefers-reduced-motion:reduce){
  .devis-float{ animation:none }
  .devis-float__piece{ animation:none; transform:rotateY(180deg) }
}

/* ═══════════════════════════════════════════
   LOGO MAISON VIVALDI — animation
   Monogramme et wordmark sont deux images
   distinctes (logo-mv-mark.png / logo-mv-word.png)
   ═══════════════════════════════════════════ */
.brand{display:inline-flex;align-items:center}
.brand__mark,.brand__word{display:inline-flex;line-height:0}
.brand__mark{perspective:400px}

/* Entrée : le monogramme se dévoile de haut en bas,
   puis le nom s'écrit de gauche à droite */
@keyframes mv-mark-in{
  from{clip-path:inset(0 0 100% 0);opacity:0}
  to  {clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes mv-word-in{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  to  {clip-path:inset(0 0 0 0);opacity:1}
}
.brand__mark{animation:mv-mark-in .65s var(--ease) both}
.brand__word{animation:mv-word-in .85s var(--ease) .2s both}

/* Avec l'intro, cette animation se jouerait derrière les panneaux noirs
   et personne ne la verrait. On la retient, puis on la relance au moment
   exact où les portes s'ouvrent (classe posée par main.js). */
html.intro-on .brand__mark,
html.intro-on .brand__word{animation:none;opacity:0}
html.intro-fait .brand__mark{animation:mv-mark-in .65s var(--ease) both}
html.intro-fait .brand__word{animation:mv-word-in .85s var(--ease) .2s both}

/* Survol : le monogramme se retourne sur son axe.
   La marque étant symétrique, elle retombe à l'identique. */
.brand__mark img{transition:transform .7s var(--ease),filter .3s var(--ease)}
.brand:hover .brand__mark img,
.brand:focus-visible .brand__mark img{transform:rotateY(180deg)}

@media (prefers-reduced-motion:reduce){
  .brand__mark,.brand__word{animation:none;clip-path:none;opacity:1}
  .brand__mark img{transition:none}
  .brand:hover .brand__mark img,
  .brand:focus-visible .brand__mark img{transform:none}
}
/* ═══════════════════════════════════════════
   INTRO — ouverture du site
   Séquence : les chevrons se rejoignent (0,08-0,63 s),
   le nom se révèle (0,50-1,00 s), une lumière balaie
   (0,55-1,25 s), les panneaux s'ouvrent (1,00-1,50 s).
   Sans JS : rien ne s'affiche, le site est direct.
   ═══════════════════════════════════════════ */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:9999;pointer-events:none;
}
.intro__panneau{position:absolute;left:0;right:0;height:50.5%;background:#0a0a0a}
.intro__panneau--haut{top:0;animation:mv-porte-haut .45s var(--ease) 1.13s both}
.intro__panneau--bas{bottom:0;animation:mv-porte-bas .45s var(--ease) 1.13s both}
@keyframes mv-porte-haut{to{transform:translateY(-100%)}}
@keyframes mv-porte-bas{to{transform:translateY(100%)}}

.intro__logo{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.2vw,24px);
  animation:mv-logo-out .2s var(--ease) .95s both;
}
@keyframes mv-logo-out{to{opacity:0}}

.intro__mark{display:block;width:clamp(58px,7vw,94px)}
.intro__chev{display:block;width:100%}
.intro__chev--haut{animation:mv-chev-haut .5s var(--ease) .05s both}
.intro__chev--bas{animation:mv-chev-bas .5s var(--ease) .05s both}
@keyframes mv-chev-haut{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@keyframes mv-chev-bas{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

.intro__word{display:block;width:clamp(178px,27vw,310px);animation:mv-word-reveal .46s var(--ease) .42s both}
.intro__word img{display:block;width:100%}
@keyframes mv-word-reveal{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  22%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1}
}

/* La lumière qui dévoile */
.intro__logo::after{
  content:"";position:absolute;inset:-14% -30%;pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  animation:mv-lueur .6s var(--ease) .48s both;
}
@keyframes mv-lueur{
  from{transform:translateX(-72%);opacity:0}
  30%{opacity:1}
  to{transform:translateX(72%);opacity:0}
}

/* Interruption au premier geste */
.intro--skip{opacity:0;transition:opacity .28s linear}

/* ── Logo un peu plus présent dans la nav ── */
.brand img{height:34px}  /* trait fin : la taille lui donne du corps */
nav.lux.scrolled .brand img{height:30px}
/* ═══════════════════════════════════════════
   FILIGRANE — le monogramme en fond de section
   Décoratif : hors flux, non cliquable, invisible
   pour les lecteurs d'écran.
   ═══════════════════════════════════════════ */
.manifeste{position:relative;overflow:hidden}
.manifeste > .wrap{position:relative;z-index:1}

.filigrane{
  position:absolute;
  /* Dimensionne par la HAUTEUR : le monogramme est plus haut que large,
     le caler sur la largeur le faisait deborder de la section et 37 % du
     mark etait rogne — on ne lisait plus le logo, juste une forme grise. */
  top:50%;left:auto;right:-3%;
  height:112%;
  width:auto;
  max-width:none;
  transform:translateY(-50%);
  opacity:.05;
  filter:brightness(0);          /* le PNG est blanc : on le passe en encre */
  pointer-events:none;
  user-select:none;
  z-index:0;
}
:root[data-theme="dark"] .filigrane{filter:none;opacity:.07}

/* Il se lève doucement quand la section arrive */
.filigrane{
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
@media (max-width:820px){
  .filigrane{height:76%;width:auto;opacity:.04}
  :root[data-theme="dark"] .filigrane{opacity:.055}
}
@media (prefers-reduced-motion:reduce){
  .filigrane{transition:none}
}
/* ═══════════════════════════════════════════
   CORRECTIONS DE THÈME
   Deux causes distinctes de texte invisible :
   1. --accent n'était jamais redéfini en thème sombre : il restait
      #0a0a0a, donc noir sur noir. Il sert à 13 endroits (eyebrows,
      numéros, puces, étoiles…).
   2. Les sections .dark sont sombres dans les DEUX thèmes : leurs
      couleurs ne doivent donc jamais dépendre du thème.
   ═══════════════════════════════════════════ */
:root[data-theme="dark"]{--accent:#6E9CEA}

/* Sections sombres : couleurs figées, quel que soit le thème */
.dark .eyebrow{color:#f4f2ec}
/* Les legendes des chiffres et leur lien heritaient de --muted et --faint,
   calcules sur fond clair : elles disparaissaient entierement sur fond sombre.
   Le trait de separation aussi. */
/* Lien vers les avis, precede du G de Google. Le soulignement ne court que sous
   le texte : un trait sous le logo l'abimerait. */
.avis-google{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.avis-google .g-logo{width:15px;height:15px;flex:0 0 auto}
.avis-google span{border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.avis-google:hover span{border-bottom-color:currentColor}
.dark .avis-google span{border-bottom-color:rgba(255,255,255,0.35)}

.dark .fact p{color:rgba(245,243,238,0.72)}
.dark .fact a{color:#f4f2ec;border-bottom-color:rgba(255,255,255,0.35)}
.dark .fact{border-top-color:rgba(255,255,255,0.18)}
.dark .btn{background:#f4f2ec;color:#0a0a0a;border-color:#f4f2ec}
.dark .btn:hover{background:#fff;border-color:#fff}
.dark .btn-outline{background:transparent;color:#f4f2ec;border-color:rgba(255,255,255,0.4)}
.dark .btn-outline:hover{background:rgba(255,255,255,0.12);border-color:#f4f2ec}
.dark .link-lux{color:#f4f2ec;border-color:rgba(255,255,255,0.3)}
/* Les légendes de coloris étaient en var(--muted) : gris foncé sur la
   section noire, donc illisibles en thème clair. Les sections .dark
   restent sombres dans les deux thèmes, la couleur est donc figée. */
.dark .prod-grid figcaption{color:rgba(245,243,238,0.72)}
/* ═══════════════════════════════════════════
   VISUELS REPRIS DE L'ANCIEN SITE
   ═══════════════════════════════════════════ */

/* Deuxieme rangee de realisations, proportions inversees */
.real-grid--inv{grid-template-columns:1fr 2fr;margin-top:16px}
@media (max-width:820px){.real-grid--inv{grid-template-columns:1fr}}

/* La devanture est en paysage : le cadrage 4/5 par defaut la massacrerait */
.split-media--paysage img{aspect-ratio:5/4;height:auto}

/* Devanture sur la page contact */
.contact-photo{margin:0 0 26px}
.contact-photo img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:5/4;object-fit:cover}
.contact-photo figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---- SOMMAIRE D'ANCRES ----
   La page Expertises enchaine quatre techniques puis un comparatif, sans que
   rien ne l'annonce : on sortait du titre pour tomber direct sur la premiere.
   Les numeros repris dans les surtitres de section font le lien. */
.ancres{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,44px)}
.ancres a{display:inline-flex;align-items:baseline;gap:9px;padding:10px 18px;
  border:1px solid var(--line);border-radius:100px;font-size:13.5px;font-weight:500;
  color:var(--muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.ancres a .n{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--faint);
  transition:color .3s var(--ease)}
.ancres a:hover{color:var(--ink);border-color:var(--ink)}
.ancres a:hover .n{color:var(--ink)}
.ancres a.ancres-fin{background:var(--paper-2)}

/* Numero de technique dans le surtitre de section. Il existait deja dans les
   commentaires du HTML (01 a 04) sans jamais apparaitre a l'ecran. */
.eyebrow .num{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);margin-right:8px}

/* ---- COMPARATIF DES TECHNIQUES ----
   L'ancien site le livrait en image : illisible au telephone, et invisible
   pour les moteurs. Memes valeurs, en tableau. */
.comparo{width:100%;border-collapse:collapse;margin-top:clamp(34px,4.5vw,50px);
  font-size:15px;text-align:left}
.comparo caption{caption-side:bottom;margin-top:20px;text-align:left;max-width:72ch;
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.comparo th,.comparo td{padding:20px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.comparo thead th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding-top:0;padding-bottom:13px}
.comparo tbody th{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;
  font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.2}
.comparo th:first-child,.comparo td:first-child{padding-left:0}
.comparo th:last-child,.comparo td:last-child{padding-right:0}
.comparo tbody tr:last-child th,.comparo tbody tr:last-child td{border-bottom:0}
.comparo .qte{font-family:var(--mono);font-size:14px}
/* Jauge : des pastilles pleines sur un total de pastilles vides. */
.jauge{display:inline-flex;align-items:center;gap:5px}
.jauge i{width:8px;height:8px;border-radius:50%;border:1px solid var(--faint)}
.jauge i.on{background:var(--ink);border-color:var(--ink)}
.prix{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.03em;white-space:nowrap}
/* Les euros non atteints restent visibles pour donner l'echelle, mais assez
   effaces pour qu'on lise le niveau d'un coup — sinon les quatre lignes se
   ressemblent toutes. */
.prix i{font-style:normal;font-weight:400;color:var(--faint);opacity:.45}
/* Colonnes calees : sans largeurs, le nom de technique avalait tout l'espace
   et les quatre criteres se retrouvaient tasses a droite. Cantonne au grand
   ecran — en fiches, ces largeurs rognaient les traits de separation. */
@media (min-width:761px){
  .comparo th:nth-child(1),.comparo td:nth-child(1){width:29%}
  .comparo th:nth-child(2),.comparo td:nth-child(2),
  .comparo th:nth-child(4),.comparo td:nth-child(4){width:17%}
  .comparo th:nth-child(3),.comparo td:nth-child(3){width:22%}
  .comparo th:nth-child(5),.comparo td:nth-child(5){width:15%;text-align:right}
}
/* Au telephone, cinq colonnes ne tiennent pas : chaque ligne devient une fiche
   et l'intitule de colonne passe en etiquette. */
@media (max-width:760px){
  /* La table passe en colonne pour que la note repasse sous les fiches :
     caption-side ne s'applique plus des que le tableau n'est plus un tableau. */
  .comparo{display:flex;flex-direction:column;border-collapse:separate}
  .comparo tbody{order:1;display:block}
  .comparo caption{order:2;margin-top:6px}
  /* width:auto annule les largeurs de colonnes : sans ca, les traits de
     separation ne faisaient que 17 % de la fiche. */
  .comparo tr,.comparo th,.comparo td{display:block;width:auto}
  .comparo thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .comparo tbody tr{border:1px solid var(--line);border-radius:var(--radius);
    padding:4px 18px 8px;margin-bottom:14px}
  .comparo tbody th{padding:14px 0 12px;border-bottom:1px solid var(--line)}
  .comparo td{display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:13px 0;border-bottom:1px solid var(--line)}
  .comparo tbody tr td:last-child{border-bottom:0}
  .comparo td::before{content:attr(data-col);flex:0 1 auto;font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
  .comparo .qte{white-space:nowrap}
}

/* Mur de references complementaires */
/* Bandeau paysage de la section textile durable */
.bandeau-eco{margin-top:clamp(40px,5vw,64px)}
.bandeau-eco img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover}
/* Galerie de details — macros de broderie */
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:26px}
.detail-grid figure{margin:0}
/* Une video peut occuper une case de la grille au meme titre qu'une photo :
   elle doit adopter le meme cadre carre, sinon elle casse l'alignement. */
.detail-grid video{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);display:block}
.detail-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);transition:transform .6s var(--ease)}
.detail-grid figure:hover img{transform:scale(1.03)}
/* Quand la loupe est branchee, on fige l'image : sinon elle glisse sous le
   curseur pendant qu'on vise le detail a grossir. */
.detail-grid figure.a-loupe:hover img{transform:none}
.detail-grid figure.a-loupe{cursor:zoom-in}
.detail-grid figcaption{margin-top:10px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* LOUPE — revele le detail des gros plans sans quitter la page.
   Le facteur d'agrandissement est plafonne par la definition native : au-dela,
   on ne montrerait que du flou agrandi. */
/* Au-dessus de la vue agrandie (z-index 1000) : sinon la loupe disparaitrait
   derriere le voile des qu'on ouvre une photo en grand. */
.loupe{ position:fixed; z-index:1010; pointer-events:none;
  width:230px; height:230px; border-radius:50%;
  /* Double cerne : le liseré clair porte sur les photos sombres, l'ombre
     portée sur les photos claires. Un seul des deux disparaîtrait selon
     l'image survolée. */
  border:2px solid rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 22px 54px rgba(0,0,0,.45);
  background-color:var(--paper); background-repeat:no-repeat;
  opacity:0; transform:scale(.86);
  transition:opacity .2s var(--ease), transform .2s var(--ease) }
.loupe--visible{ opacity:1; transform:scale(1) }
/* Sans souris, pas de survol : la loupe n'aurait aucun declencheur. */
@media (pointer:coarse){ .loupe{ display:none } }
@media (max-width:820px){.detail-grid{grid-template-columns:repeat(2,1fr)}}
/* Variantes de la galerie de details */
.detail-grid--6{grid-template-columns:repeat(3,1fr)}
.detail-grid--3{grid-template-columns:repeat(3,1fr)}
.detail-grid--2{grid-template-columns:repeat(2,1fr)}
.detail-grid--2 img{aspect-ratio:4/5}
.et-aussi{
  margin:clamp(26px,3.5vw,40px) 0 0;max-width:70ch;
  font-size:1.02rem;line-height:1.7;color:var(--muted);
}
.et-aussi b{color:var(--ink);font-weight:500}
.dark .et-aussi b{color:#f4f2ec}
.dark .detail-grid figcaption{color:rgba(245,243,238,0.72)}
@media (max-width:820px){.detail-grid--6,.detail-grid--3{grid-template-columns:repeat(2,1fr)}}
/* ═══════════════════════════════════════════
   EN PRATIQUE — relevé des conditions reelles
   Un libelle a gauche, la valeur a droite, un
   filet entre chaque ligne. Pas de gros chiffres.
   ═══════════════════════════════════════════ */
.pratique{margin:clamp(38px,5vw,60px) 0 0;border-top:1px solid var(--line)}
.pratique > div{
  display:grid;grid-template-columns:minmax(140px,.22fr) 1fr;
  gap:clamp(16px,4vw,64px);
  padding:clamp(18px,2.4vw,26px) 0;
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.pratique > div:hover{background:rgba(10,10,10,.02)}
:root[data-theme="dark"] .pratique > div:hover{background:rgba(244,242,236,.03)}
.pratique dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);padding-top:4px;
}
.pratique dd{margin:0;font-size:1rem;line-height:1.6;color:var(--muted);max-width:62ch}
.pratique dd b{font-weight:500;color:var(--ink)}
.pratique dd a{color:var(--ink);border-bottom:1px solid var(--line)}
.pratique dd a:hover{border-color:var(--ink)}
@media (max-width:700px){
  .pratique > div{grid-template-columns:1fr;gap:8px}
  .pratique dt{padding-top:0}
}
/* Manifeste : l'italique etant desactive sur tout le site, l'emphase
   passe par la graisse. Sans cela le <b> n'avait aucun effet, le
   paragraphe etant deja en 500. */
.manifeste .stmt b{font-weight:700}

/* Les exposants heritent d'un corps trop grand dans la police display */
.manifeste .stmt sup,
.big sup,
.hero h1 sup,
/* `top` etait sans effet ici : l'element reste en position statique, c'est
   vertical-align qui souleve l'exposant. On l'ecrit explicitement.
   A eviter en fin de titre suivi d'un point : le vide sous l'exposant se voit
   au gros corps, et aucun reglage horizontal ne le rattrape. */
.page-hero-lux h1 sup{font-size:.5em;vertical-align:super}
/* ═══════════════════════════════════════════
   BANDEAU TRIO — respiration visuelle apres le
   manifeste, la ou la page enchainait deux
   sections de texte sans aucune image.
   ═══════════════════════════════════════════ */
.bandeau-trio{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(6px,.8vw,12px);
  padding:0 clamp(6px,.8vw,12px);
}
.bandeau-trio figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius)}
.bandeau-trio img,.bandeau-trio video{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.bandeau-trio figure:hover img,.bandeau-trio figure:hover video{transform:scale(1.04)}
.bandeau-trio figcaption{
  position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(12px,1.4vw,18px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);
}
@media (max-width:760px){
  .bandeau-trio{grid-template-columns:1fr 1fr}
  .bandeau-trio figure:last-child{grid-column:1 / -1}
  .bandeau-trio figure:last-child img{aspect-ratio:16/9}
}
/* ═══════════════════════════════════════════
   BANDE DE MARQUES — juste apres le hero
   Les logos sont des marques blanches sur fond
   transparent : brightness(0) les passe en encre
   sur fond clair, et on les laisse blancs en sombre.
   ═══════════════════════════════════════════ */
.bande-marques{
  padding:clamp(40px,5vw,72px) 0;
  background:var(--paper-2);
  border-block:1px solid var(--line);
}
.bande-marques__titre{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 clamp(20px,2.6vw,30px);
}
.bande-marques__fenetre{
  display:flex;width:100%;overflow:hidden;
  position:relative;
  contain:paint;
}
.bande-marques__fenetre::before,
.bande-marques__fenetre::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,120px);
  z-index:2;pointer-events:none;
}
.bande-marques__fenetre::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.bande-marques__fenetre::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.bande-marques__piste{
  display:flex;align-items:center;flex:0 0 auto;
  list-style:none;margin:0;padding:0 clamp(46px,5.4vw,88px) 0 0;
  gap:clamp(46px,5.4vw,88px);
  animation:mv-defile 78s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.bande-marques__piste li{flex:0 0 auto;display:flex;align-items:center}
  /* 58 px et non 104 : une bande de references se lit d un coup d oeil. A
     l ancienne taille, chaque marque reclamait l attention pour elle-meme
     et la bande occupait 344 px de haut sous le hero. */
.bande-marques__piste img{
  height:clamp(38px,4vw,58px);width:auto;
  max-width:clamp(104px,11vw,168px);
  object-fit:contain;
  filter:brightness(0);
  opacity:.78;
  transition:opacity .4s var(--ease);
}
.bande-marques__piste li:hover img{opacity:1}
:root[data-theme="dark"] .bande-marques__piste img{filter:none;opacity:.82}
@keyframes mv-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media (max-width:700px){
  .bande-marques__piste{animation-duration:46s;gap:52px;padding-right:52px}
}
@media (prefers-reduced-motion:reduce){
  .bande-marques__piste{animation:none}
  .bande-marques__fenetre{overflow-x:auto}
  .bande-marques__fenetre::before,.bande-marques__fenetre::after{display:none}
  .bande-marques__piste + .bande-marques__piste{display:none}
}
/* Defilement des vues au survol : les images sont empilees, on ne joue
   que sur l'opacite. Le zoom existant reste actif sur l'image visible. */
.product-card .ph img{opacity:0}
.product-card .ph img:first-child{opacity:1}

/* ═══════════════════════════════════════════
   VISIONNEUSE PRODUIT
   Vues a gauche, fiche a droite. Le fond isole
   vraiment la page au lieu de la laisser lisible.
   ═══════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:9998;
  display:none;place-items:center;
  padding:clamp(14px,3vw,44px);
  background:rgba(8,8,7,.93);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb.open{display:grid}
.lb-inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(20px,3vw,52px);
  width:100%;max-width:1180px;max-height:92vh;
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(18px,2.6vw,38px);
  overflow-y:auto;
}
.lb-close{
  position:absolute;top:10px;right:14px;z-index:3;
  width:40px;height:40px;font-size:1.5rem;line-height:1;
  color:var(--muted);border-radius:var(--radius);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lb-close:hover{color:var(--ink);background:var(--paper-2)}

.lb-main{position:relative;background:var(--paper-2);border-radius:var(--radius);overflow:hidden}
.lb-main img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;font-size:1.5rem;line-height:1;
  color:var(--ink);background:rgba(255,255,255,.82);border-radius:50%;
  opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease);
}
.lb-main:hover .lb-nav,.lb-nav:focus-visible{opacity:1}
.lb-nav:hover{background:#fff}
.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}

.lb-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.lb-thumbs button{
  width:74px;height:74px;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  opacity:.55;transition:opacity .3s var(--ease),border-color .3s var(--ease);
}
.lb-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumbs button:hover{opacity:.85}
.lb-thumbs button.active{opacity:1;border-color:var(--ink)}

.lb-droite{display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(6px,2vw,26px)}
.lb-marque{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.lb-nom{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;
  letter-spacing:-.02em;margin:0;
}
.lb-prix{font-family:var(--mono);font-size:1.05rem;color:var(--ink);margin:16px 0 0}
.lb-desc{color:var(--muted);font-size:1rem;line-height:1.65;margin:22px 0 0;max-width:44ch}
.lb-opts{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);
  margin:clamp(24px,3vw,34px) 0 0;width:100%;
}
.lb-champ{display:flex;flex-direction:column;gap:11px;min-width:0}
.lb-qte{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius)}
.qte-b{
  width:40px;height:42px;border:0;background:transparent;color:var(--ink);
  font-size:16px;line-height:1;cursor:pointer;
  transition:opacity .25s var(--ease);
}
.qte-b:disabled{opacity:.28;cursor:default}
.qte-val{
  width:52px;height:42px;border:0;border-inline:1px solid var(--line);
  background:transparent;color:var(--ink);text-align:center;
  font-family:var(--mono);font-size:13px;-moz-appearance:textfield;
}
.qte-val::-webkit-outer-spin-button,
.qte-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lb-lab{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.lb-tailles{display:flex;flex-wrap:wrap;gap:8px}
.lb-taille{
  min-width:46px;padding:10px 12px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:var(--radius);cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.lb-taille[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lb-tailles.manque .lb-taille{border-color:var(--accent)}
.lb-unique{
  font-size:.9rem;color:var(--muted);margin:0;max-width:30ch;line-height:1.6;
}
.lb-dispo{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--muted);margin:14px 0 0;line-height:1.7;
}
.lb-dispo a{color:var(--ink);border-bottom:1px solid var(--line)}
.lb-buy{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:auto;width:100%;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:var(--radius);padding:15px 28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.lb-buy:hover{background:transparent;color:var(--ink)}
.lb-buy.off{
  background:transparent;color:var(--muted);border-color:var(--line);cursor:default;
}
.lb-buy.off:hover{background:transparent;color:var(--muted)}
.lb-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--muted);margin:14px 0 0;line-height:1.7;
}

/* Message affiche quand la fonction de paiement ne repond pas et que la
   quantite demandee depasse 1 : le lien de secours ne sait pas la transporter.
   Plus lisible que .lb-note — c est une alerte, pas une mention legale : corps
   du site, contraste plein, et un filet a gauche pour la detacher du bouton. */
.lb-alerte{
  font-family:var(--sans);font-size:.82rem;line-height:1.6;color:var(--ink);
  margin:14px 0 0;padding:10px 0 10px 14px;border-left:2px solid var(--accent);
}
.lb-alerte a{color:var(--ink);border-bottom:1px solid var(--ink)}
.lb-alerte[hidden]{display:none}

@media (max-width:820px){
  .lb-inner{grid-template-columns:1fr;gap:22px}
  .lb-droite{padding-top:0}
  .lb-opts{gap:24px;margin-top:24px}
  .lb-buy{margin-top:26px}
  .lb-nav{opacity:1}
  .lb-thumbs button{width:60px;height:60px}
}
/* ============================================================
   VISIONNEUSE DE GALERIE — clic ou appui pour agrandir
   La loupe ne fonctionne qu'a la souris ; sur telephone il faut
   un agrandissement au doigt. Distincte de .lb, reservee a la
   fiche produit de la boutique.
   ============================================================ */
.gal{ position:fixed; inset:0; z-index:1000; background:rgba(8,8,8,.94);
  display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px) }
.gal.ouvert{ display:flex }
.gal figure{ margin:0; max-width:min(1100px,92vw); display:flex;
  flex-direction:column; align-items:center; gap:18px }
.gal img{ max-width:100%; max-height:76vh; width:auto; height:auto;
  border-radius:var(--radius); background:#111 }
.gal figcaption{ font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75);
  text-align:center }
.gal-fermer,.gal-nav{ position:absolute; border:0; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border-radius:50%; line-height:1;
  transition:background .3s var(--ease) }
.gal-fermer:hover,.gal-nav:hover{ background:rgba(255,255,255,.32) }
.gal-fermer{ top:18px; right:18px; width:44px; height:44px; font-size:24px }
.gal-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:26px }
.gal-nav.prec{ left:14px } .gal-nav.suiv{ right:14px }
/* Le compteur reste en chasse fixe : ce sont des chiffres, ils doivent
   garder la meme largeur d'une vue a l'autre pour ne pas sautiller. */
.gal-compte{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.6) }
.detail-grid figure{ cursor:zoom-in }
.detail-grid figure:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
@media(max-width:640px){
  .gal-nav{ width:40px; height:40px; font-size:22px }
  .gal-nav.prec{ left:6px } .gal-nav.suiv{ right:6px }
}

/* ============================================================
   NOS VIDÉOS — lecteur en façade
   La vignette est hébergée ici et le lecteur YouTube n'est chargé
   qu'au clic : aucune requête vers Google, aucun mouchard déposé
   tant que le visiteur n'a pas choisi de regarder. La page reste
   légère, et le consentement est un acte, pas un défaut.
   ============================================================ */
.videos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(38px,5vw,56px)}
.video-carte{margin:0}
.video-facade{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:#0a0a0a;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
  transition:transform .5s var(--ease)}
/* La facade peut porter une boucle locale au lieu d'une image fixe : meme
   cadre, meme comportement au survol. */
.video-facade video{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-2)}
.video-facade:hover video{opacity:.82}
.split-media .video-facade video{height:100%;object-fit:cover}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease),opacity .4s var(--ease)}
.video-facade:hover img{transform:scale(1.04);opacity:.82}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Le bouton de lecture : disque clair, triangle sombre — la grammaire du site,
   pas le rouge de YouTube. */
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(245,245,242,.94);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:0 0 0 2px rgba(10,10,9,.72), 0 10px 26px rgba(0,0,0,.34);
  transition:transform .4s var(--ease),background .4s var(--ease)}
.video-facade:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:#f5f5f2}
.video-play svg{width:20px;height:20px;margin-left:3px;fill:#0a0a0a}
.video-duree{position:absolute;right:10px;bottom:10px;background:rgba(10,10,10,.82);
  color:#f5f5f2;font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:2px;
  pointer-events:none}
.video-carte figcaption{margin-top:12px;font-size:.98rem;font-weight:500}
.video-carte .video-sous{display:block;margin-top:4px;font-size:.85rem;color:var(--muted);font-weight:400}
.dark .video-carte figcaption{color:#f4f2ec}
.dark .video-carte .video-sous{color:rgba(245,243,238,.7)}
@media(max-width:760px){
  .videos-grid{grid-template-columns:1fr}
  .video-play{width:54px;height:54px}
}

/* Le film « Créer sa marque » occupe la colonne image d'un bloc en deux parties :
   la façade doit s'y comporter comme une photo. */
.split-media .video-facade{aspect-ratio:16/9;border-radius:var(--radius)}
.split-media .video-facade img{height:100%;object-fit:cover}
/* Le bandeau « Voir le film » : discret, en bas a droite de la photo. */
.split-media .video-duree{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---- CARTE DE L'ATELIER ----
   Facade avant chargement : rien n'est demande a Google tant que le visiteur
   n'a pas cliqué. Le quadrillage evoque un plan sans en etre un, pour que le
   bloc ne passe pas pour une image cassee. */
.carte{margin:26px 0 30px}
.carte-facade{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);
  cursor:pointer;overflow:hidden;text-align:left;
  transition:border-color .4s var(--ease)}
.carte-facade:hover{border-color:var(--ink)}
.carte-fond{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;opacity:.55;
  transition:opacity .5s var(--ease)}
.carte-facade:hover .carte-fond{opacity:.8}
.carte-pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease)}
.carte-pin svg{width:24px;height:24px}
.carte-facade:hover .carte-pin{transform:translate(-50%,-50%) scale(1.07)}
.carte-txt{position:absolute;left:0;right:0;bottom:20px;text-align:center;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.carte-txt em{font-style:normal;font-weight:400;font-size:11px;letter-spacing:.08em;
  text-transform:none;color:var(--muted)}
.carte iframe{display:block;width:100%;aspect-ratio:4/3;border:0;
  border-radius:var(--radius);background:var(--paper-2)}

/* ---- GALERIE D'OPERATIONS ----
   Les grilles carrees du site conviennent aux gros plans de matiere, pas a des
   visuels d'orientations melangees : un rendu panoramique force au carre perd
   les deux tiers de sa largeur. Ici chaque photo garde ses proportions, les
   panoramiques tiennent toute la largeur, et la ligne se termine en decalage
   plutot que d'aligner artificiellement des sujets sans rapport. */
.galerie-op{display:grid;grid-template-columns:1fr 1fr;align-items:start;
  gap:clamp(14px,1.7vw,24px);margin-top:clamp(38px,5vw,58px)}
.galerie-op figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radius)}
.galerie-op__large{grid-column:1 / -1}
.galerie-op img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}

/* Voile en pied d'image : la legende doit rester lisible sur un fond clair
   comme sur un fond sombre. */
.galerie-op figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 58%,rgba(10,10,10,.62))}
.galerie-op figcaption{position:absolute;left:clamp(16px,1.6vw,24px);bottom:clamp(14px,1.4vw,20px);
  z-index:2;color:#fff;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){.galerie-op{grid-template-columns:1fr}}

/* Une commande racontee en quatre images, sous les etapes de la methode.
   La legende passe sous l'image et non dessus : ici le sujet occupe tout le
   cadre, un voile en pied mangerait le vetement. */
/* Colonnes generees a la volee : la meme classe sert pour deux, trois ou quatre
   images selon ce que la section a a montrer, sans variante a declarer.
   grid-auto-flow plutot qu'auto-fit, qui fabriquait des dizaines de pistes
   vides avant de les replier. */
.serie{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(34px,4vw,52px)}
.serie figure{margin:0;overflow:hidden;border-radius:var(--radius)}
/* height:auto est indispensable : sans lui, l'attribut height du HTML — presente
   pour reserver la place au chargement — l'emporte sur aspect-ratio et les
   images sortent a leur hauteur native. */
.serie img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}

.serie figcaption{margin-top:10px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.serie{grid-auto-flow:row;grid-template-columns:1fr 1fr}}

/* Le titre entre dans la grille au lieu de flotter au-dessus : premiere cellule,
   pleine largeur, separee des cartes par le meme filet d'un pixel. La section
   cesse ainsi de suivre l'enchainement surtitre / grand titre / grille qui ouvre
   les trois quarts des sections du site. */
.exp-grid--tete{margin-top:0}
.exp-tete{grid-column:1 / -1;background:var(--paper);
  padding:clamp(30px,4vw,52px) clamp(22px,3vw,44px) clamp(26px,3.4vw,44px)}
.exp-tete .eyebrow{display:block;margin-bottom:18px}
.exp-tete .big{margin:0;max-width:22ch}
@media(max-width:900px){.exp-tete{padding:26px 22px}}

/* ---- LE LIEU ----------------------------------------------------------- */
/* Le magasin etait pose dans une vignette a cote du texte : une devanture se
   montre en grand ou pas du tout. Ces blocs sortent du conteneur et touchent
   les deux bords de l'ecran — ils sont donc enfants directs de <section>,
   jamais de .wrap. */

/* La marge gauche reprend celle de .wrap, qui est centre et plafonne a --maxw :
   au-dela de cette largeur son bord gauche n'est plus a zero, il faut y ajouter
   la moitie du debordement. */
.lieu-large{--marge:max(clamp(22px,5vw,64px),
    calc((100vw - var(--maxw)) / 2 + clamp(22px,5vw,64px)));
  display:grid;gap:clamp(28px,4vw,64px);align-items:center;
  grid-template-columns:
    minmax(0, calc(var(--marge) + min(100vw, var(--maxw)) * 0.44))
    minmax(0, 1fr)}
/* La colonne se mesure sur le conteneur et non sur la fenetre : en pourcentage
   de viewport, le texte s'ecrasait a 1920 px et le titre se coupait en plein mot. */
.lieu-large__txt{width:100%;justify-self:end;padding-left:var(--marge)}
.lieu-large__txt .big{margin:16px 0 0}
.lieu-large__txt p{color:var(--muted);margin-top:22px}
.lieu-large__txt .mini-list{margin-top:26px}
.lieu-large__img{overflow:hidden;border-radius:var(--radius) 0 0 var(--radius)}
/* Hauteur libre plutot qu'un recadrage : la devanture porte les quatre metiers
   ecrits sur la facade et le parcours en trois etapes sur la porte. Un panneau
   a hauteur fixe rognait les cotes et coupait « impression numerique ». */
.lieu-large__img img{width:100%;height:auto;display:block;
  transition:transform 1.6s var(--ease)}

@media(max-width:860px){
  .lieu-large{grid-template-columns:1fr;gap:34px}
  .lieu-large__txt{justify-self:stretch;padding:0 clamp(22px,5vw,64px)}
  .lieu-large__img{border-radius:0}
}

/* ============================================================
   TEXTE LONG DES PAGES SEO LOCALES
   Ces dix pages tournaient a 290-330 mots. C'est trop court pour
   les requetes visees (« serigraphie paris », « broderie entreprise
   paris »...), ou les pages qui se classent tiennent le millier de
   mots. Ce bloc porte le contenu de fond : une mesure de lecture
   confortable, pas la pleine largeur du site.
   ============================================================ */
.texte-seo{max-width:860px}
.texte-seo h3{font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:600;letter-spacing:-0.015em;
  margin:clamp(32px,3.6vw,48px) 0 14px;line-height:1.2}
.texte-seo h3:first-child{margin-top:0}
.texte-seo p{color:var(--muted);line-height:1.8;margin-bottom:16px;font-size:1.04rem}
.texte-seo p:last-child{margin-bottom:0}
.texte-seo strong{color:var(--ink);font-weight:600}
.texte-seo ul{list-style:none;margin:0 0 18px;padding:0}
.texte-seo li{color:var(--muted);line-height:1.7;margin-bottom:12px;font-size:1.02rem;
  padding-left:20px;position:relative}
.texte-seo li::before{content:"";position:absolute;left:0;top:.66em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.texte-seo li:last-child{margin-bottom:0}
/* Sur fond sombre le texte secondaire doit s'eclaircir, sinon il tombe
   sous le seuil AA contre le noir profond. */
.dark .texte-seo p, .dark .texte-seo li{color:rgba(245,243,238,0.72)}
.dark .texte-seo strong{color:#fff}

/* ============================================================
   MÉTHODE — SÉQUENCE ACTION PAR ACTION
   Les quatre étapes ne s'allumaient pas : le filet se traçait, les points
   apparaissaient, mais tout le reste était déjà là. On voyait un schéma,
   pas un déroulé.
   Désormais l'avancement suit le scroll dans la section. Chaque étape passe
   de l'estompe à la pleine lumière quand son tour vient, et la photo qui la
   documente s'allume au même instant : le visiteur voit la commande se faire.
   La progression est portée par --avance (0 à 1), écrite en JS.
   ============================================================ */

/* Le filet n'est plus une simple apparition : il avance avec la lecture. */
.steps.sequence::before{ transform:scaleX(var(--avance,0)); transition:transform .45s linear }

/* Chaque étape attend son tour. */
.steps.sequence .step{
  opacity:.32;
  transition:opacity .55s var(--ease);
}
.steps.sequence .step.on{ opacity:1 }

/* Le point reste creux tant que l'étape n'est pas atteinte, puis se remplit. */
.steps.sequence .step::before{
  transform:scale(1); background:var(--paper); border-color:var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
  transition-delay:0s;
}
.steps.sequence .step.on::before{ background:var(--ink); border-color:var(--ink) }
/* L'étape en cours est signalée par un halo discret, qui s'efface ensuite. */
.steps.sequence .step.active::before{ transform:scale(1.55) }

/* Le numéro passe à l'accent le temps de l'étape : c'est lui qui dit « ici ». */
.steps.sequence .step .st-n{ transition:color .45s var(--ease) }
.steps.sequence .step.active .st-n{ color:var(--accent) }

/* La photo correspondante s'allume en même temps que son étape. */
.serie.sequence figure{
  opacity:.3; filter:saturate(.15);
  transition:opacity .6s var(--ease),filter .6s var(--ease);
}
.serie.sequence figure.on{ opacity:1; filter:none }

/* Qui limite les animations voit la section complète, tout de suite et fixe. */
@media (prefers-reduced-motion:reduce){
  .steps.sequence::before{ transform:scaleX(1); transition:none }
  .steps.sequence .step,
  .steps.sequence .step.on{ opacity:1; transition:none }
  .steps.sequence .step::before,
  .steps.sequence .step.on::before{ background:var(--ink); border-color:var(--ink); transform:scale(1); transition:none }
  .serie.sequence figure,
  .serie.sequence figure.on{ opacity:1; filter:none; transition:none }
}

/* Sous 820 px, le filet de la méthode est vertical (scaleY) : la progression
   doit suivre le même axe, sinon la séquence écrase la ligne. Cette règle vient
   après la précédente et gagne à spécificité égale — c'est voulu. */
@media(max-width:820px){
  .steps.sequence::before{ transform:scaleY(var(--avance,0)); transition:transform .45s linear }
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .steps.sequence::before{ transform:scaleY(1); transition:none }
}

/* Bloc « à valider » hors mentions légales : une section dont le contenu
   dépend d'une réponse client et qui ne doit pas partir en ligne inaperçue.
   Même code visuel que les [À REMPLIR] des mentions légales. */
.a-valider{ margin-top:clamp(26px,3vw,38px); max-width:70ch;
  background:rgba(201,168,76,0.12); border-left:2px solid var(--accent);
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px); border-radius:var(--radius) }
.a-valider p{ color:var(--anthracite); margin:0; font-size:1rem; line-height:1.7 }
.a-valider b{ font-family:var(--mono); font-size:.82em; letter-spacing:.06em;
  color:var(--accent); display:block; margin-bottom:8px }
.dark .a-valider{ background:rgba(245,243,238,0.08) }
.dark .a-valider p{ color:rgba(245,243,238,0.78) }

/* Vidéo de collaboration en lecture à la demande.
   La page réalisations aligne cinq films, 26 Mo à elle seule. Sur petit écran,
   en économie de données ou en mouvement réduit, on ne les démarre pas : le
   poster tient la place et un disque de lecture annonce le film. La lecture ne
   part qu'au clic, et preload="none" garantit qu'aucun octet ne transite avant.
   Le disque réutilise .video-play, déjà posé pour les façades YouTube. */
.a-lire{ position:relative; cursor:pointer }
.a-lire:hover .video-play{ transform:translate(-50%,-50%) scale(1.08); background:#f5f5f2 }
.a-lire:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* Quatre métiers, quatre encarts : la grille par défaut en compte trois et
   laissait le quatrième seul sur une deuxième ligne. Les paliers en dessous
   sont ceux de .pillars, repris tels quels pour ne pas diverger. */
.pillars--4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:960px){ .pillars--4{ grid-template-columns:1fr 1fr } }
@media(max-width:600px){ .pillars--4{ grid-template-columns:1fr } }
/* Ces encarts mènent à leur section : ils doivent se comporter en lien sans
   hériter du soulignement des liens de texte. */
a.pillar{ text-decoration:none; color:inherit; display:block }
a.pillar:hover h3{ color:var(--accent) }

/* Cellule dont la valeur n'est pas encore sourcée. Elle doit se lire comme un
   manque assumé, pas comme une note faible : ni jauge, ni symbole, juste le mot.
   La ligne DTF du comparatif est dans ce cas — l'ancien comparatif du site ne
   couvrait pas cette technique. */
.comparo .a-confirmer{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--muted); text-transform:lowercase }

/* Zone de touche du pied : le lien des mentions legales faisait 16 px de haut,
   sous le minimum de 24 px du critere WCAG 2.5.8. Le remplissage vertical la
   porte au-dela sans deplacer la ligne, qui est deja en flex avec un ecart. */
.foot-base a{ display:inline-block; padding:6px 2px; margin:-6px -2px }

/* Serie reduite a une seule photo : on la borne a mi-largeur pour qu elle
   reste a la taille ou sa definition suffit. */
.serie--seule{ grid-template-columns:repeat(2,1fr) }
@media(max-width:760px){ .serie--seule{ grid-template-columns:1fr } }



/* Le renvoi vers le comparatif ferme la section des techniques : il se detache
   des quatre cartes sans ouvrir un nouveau bloc. */
.exp-renvoi{ margin-top:clamp(30px,3.6vw,46px) }

/* Serie en cadre paysage : .serie impose du 4/5 portrait, qui ampute une vue
   large d'atelier. Le 3/2 est le rapport natif de ces prises de vue. */
.serie--paysage img{ aspect-ratio:3/2 }
/* Une colonne sur telephone : a deux colonnes, .serie donne 169 px par photo,
   ce qui suffit a la sequence de la methode mais pas a une vue large. */
@media(max-width:760px){ .serie--paysage{ grid-template-columns:1fr } }

/* ═══ PARCOURS DE DEVIS ═══════════════════════════════════════════════════════
   Les classes commencent toutes par dv- pour ne croiser aucune regle existante.
   Le parcours reprend les jetons du site — pas une couleur, pas une police de
   plus — pour qu'il ne ressemble pas a une piece rapportee. */

.wrap--etroit{ max-width:880px }

/* progression */
.dv-tete{ margin-bottom:clamp(26px,3.4vw,40px) }
.dv-barre{ height:3px; background:var(--line); border-radius:2px; overflow:hidden }
.dv-jauge{ height:100%; background:var(--accent); transition:width .45s var(--ease) }
.dv-rang{ font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:10px 0 0 }

.dv-titre{ font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 6px; outline:none }
.dv-sous{ color:var(--muted); margin:0 0 clamp(20px,2.6vw,30px); max-width:60ch; line-height:1.6 }

/* cartes de choix */
.dv-cartes{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.dv-cartes--serre{ grid-template-columns:repeat(3,1fr) }
@media(max-width:700px){
  .dv-cartes{ grid-template-columns:1fr }
  .dv-cartes--serre{ grid-template-columns:repeat(2,1fr) }
}
/* Les cartes de choix sont posées sur le papier, pas dessinées dedans : fond
   opaque plus clair que la page, ombre douce, et elles se soulèvent sous le
   curseur puis s'enfoncent quand on appuie. L'angle reste vif — le --radius:0
   du site est un parti pris, l'élévation vient de l'ombre seule.
   Les ombres sont écrites en dur : sur fond sombre il faut un noir plus dense,
   pas la même valeur éclaircie. */
.dv-carte{ display:flex; flex-direction:column; gap:5px; text-align:left;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; font:inherit; color:inherit;
  box-shadow:0 1px 2px rgba(10,10,10,.06), 0 9px 22px rgba(10,10,10,.11);
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .25s var(--ease), transform .25s var(--ease) }
.dv-carte:hover{ border-color:var(--ink); transform:translateY(-3px);
  box-shadow:0 3px 6px rgba(10,10,10,.07), 0 20px 40px rgba(10,10,10,.16) }
/* on appuie : la carte redescend sur le papier */
.dv-carte:active{ transform:translateY(0);
  box-shadow:0 1px 2px rgba(10,10,10,.06) }
.dv-carte.on{ border-color:var(--accent); background:var(--surface);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--accent),
             0 3px 7px rgba(10,10,10,.08), 0 22px 44px rgba(10,10,10,.18) }

:root[data-theme="dark"] .dv-carte{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 1px 2px rgba(0,0,0,.5), 0 8px 20px rgba(0,0,0,.5) }
:root[data-theme="dark"] .dv-carte:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 3px 7px rgba(0,0,0,.6), 0 20px 42px rgba(0,0,0,.62) }
:root[data-theme="dark"] .dv-carte:active{ box-shadow:0 1px 3px rgba(0,0,0,.5) }
:root[data-theme="dark"] .dv-carte.on{
  box-shadow:inset 0 0 0 1px var(--accent),
             0 2px 6px rgba(0,0,0,.55), 0 18px 38px rgba(0,0,0,.6) }

/* Un mouvement de trois pixels sous le curseur n'a rien d'agressif, mais la
   consigne du navigateur prime : on garde l'ombre, on retire le déplacement. */
@media (prefers-reduced-motion: reduce){
  .dv-carte, .dv-carte:hover, .dv-carte.on, .dv-carte:active{ transform:none }
}
.dv-carte-t{ font-weight:600; font-size:.98rem }
.dv-carte-d{ color:var(--muted); font-size:.86rem; line-height:1.5 }
.dv-carte--petite{ padding:13px 15px }

/* recherche */
.dv-recherche{ display:flex; align-items:center; gap:9px; border:1px solid var(--line);
  border-radius:var(--radius); padding:0 14px; margin-bottom:14px }
.dv-recherche:focus-within{ border-color:var(--ink) }
.dv-loupe{ color:var(--muted); font-size:1.1rem }
.dv-recherche-champ{ flex:1; border:0; background:transparent; font:inherit; color:inherit;
  padding:13px 0; outline:none }

/* blocs de technique */
.dv-bloc{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin-bottom:14px }
.dv-bloc-tete{ padding:15px 46px 15px 18px; background:var(--paper-2);
  position:relative; cursor:pointer; list-style:none;
  transition:background .25s var(--ease) }
.dv-bloc-tete::-webkit-details-marker{ display:none }
.dv-bloc-tete:hover{ background:var(--line) }
.dv-bloc[open] > .dv-bloc-tete{ border-bottom:1px solid var(--line) }
.dv-bloc-pl{ position:absolute; right:18px; top:15px; font-size:1.2rem;
  line-height:1.2; color:var(--accent);
  transition:transform .3s var(--ease) }
.dv-bloc[open] .dv-bloc-pl{ transform:rotate(45deg) }
.dv-bloc-n{ display:inline-block; margin-left:10px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em; font-weight:400; color:var(--paper);
  background:var(--ink); padding:3px 8px; vertical-align:middle }
.dv-bloc-t{ font-family:var(--serif); font-weight:700; font-size:1.02rem; margin:0 }
.dv-bloc-r{ color:var(--muted); font-size:.87rem; margin:4px 0 0; line-height:1.5 }
.dv-bloc-c{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--accent); margin:8px 0 0; line-height:1.6 }

.dv-ligne{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:11px 18px; border-bottom:1px solid var(--line) }
.dv-ligne:last-child{ border-bottom:0 }
.dv-ligne.on{ background:color-mix(in srgb, var(--accent) 5%, transparent) }
.dv-ligne-n{ font-size:.94rem }

.dv-cpt{ display:flex; align-items:center; gap:2px; border:1px solid var(--line);
  border-radius:999px; padding:3px }
.dv-cpt-b{ width:32px; height:32px; border:0; border-radius:50%; background:transparent;
  font:600 1rem/1 var(--sans); color:var(--ink); cursor:pointer }
.dv-cpt-b{ position:relative }
/* Le rond fait 32 px, ce qui passe le minimum WCAG de 24 mais reste etroit
   pour un bouton qu'on presse cinq fois de suite au pouce. On elargit la zone
   sensible a 44 px sans toucher au dessin : un pseudo-element transparent
   deborde de 6 px tout autour. Deux clics manques dans un vrai navigateur ont
   suffi a montrer que 32 ne suffisait pas. */
.dv-cpt-b::after{ content:""; position:absolute; inset:-6px }
.dv-cpt-b:hover:not(:disabled){ background:var(--paper-2) }
.dv-cpt-b:disabled{ color:var(--faint); cursor:default }
.dv-cpt-v{ min-width:26px; text-align:center; font-family:var(--mono); font-size:.9rem }

/* paliers */
.dv-paliers{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px }
.dv-palier{ min-width:64px; padding:12px 18px; border:1px solid var(--line);
  border-radius:999px; background:transparent; font:600 .95rem var(--mono); color:inherit;
  cursor:pointer; transition:border-color .2s var(--ease) }
.dv-palier:hover{ border-color:var(--ink) }
.dv-palier.on{ border-color:var(--accent); color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent) }
.dv-palier.sous-min{ opacity:.5 }

.dv-exact{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px }
.dv-exact-l{ font-size:.9rem; color:var(--muted) }
.dv-exact-c{ width:130px; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius); font:inherit; color:inherit; background:transparent }
.dv-exact-c:focus{ border-color:var(--ink); outline:none }

/* messages */
.dv-pastille{ display:inline-block; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.06em; background:var(--paper-2); border-radius:999px;
  padding:7px 15px; margin:0 0 18px }
.dv-note{ font-size:.85rem; color:var(--muted); line-height:1.6; margin:14px 0 0 }
.dv-alerte{ border-left:3px solid var(--accent); background:var(--paper-2);
  padding:13px 16px; border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem; line-height:1.65; margin-top:14px }
.dv-alerte-b{ display:inline-block; margin-left:4px; border:0; background:transparent;
  font:600 .9rem var(--sans); color:var(--accent); text-decoration:underline;
  cursor:pointer; padding:0 }

/* recapitulatif */
.dv-recap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.dv-recap-l{ display:flex; gap:18px; padding:12px 18px; border-bottom:1px solid var(--line) }
.dv-recap-l:last-child{ border-bottom:0 }
.dv-recap-k{ flex:0 0 38%; font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding-top:2px }
.dv-recap-v{ flex:1; font-size:.95rem; line-height:1.5 }

.dv-prix{ margin-top:16px; padding:20px; border-radius:var(--radius);
  background:var(--ink); color:var(--paper) }
.dv-prix-t{ font-family:var(--serif); font-weight:700; font-size:1.25rem; margin:0 }
.dv-prix-d{ font-size:.87rem; line-height:1.6; margin:8px 0 0; opacity:.8 }

.dv-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px }
.dv-lien{ border:0; background:transparent; font:inherit; font-size:.88rem;
  color:var(--muted); text-decoration:underline; cursor:pointer; padding:6px }

.dv-avert{ margin-top:20px; font-size:.85rem; line-height:1.65; color:var(--muted) }

/* pied de navigation */
.dv-pied{ display:flex; gap:12px; margin-top:clamp(26px,3.4vw,38px);
  padding-top:20px; border-top:1px solid var(--line) }
.dv-suite{ margin-left:auto }
.dv-suite:disabled{ opacity:.4; cursor:default }

.dv-sortie{ font-size:.9rem; color:var(--muted); line-height:1.65; text-align:center }

/* Le hero de la page devis est volontairement plus court que celui des pages
   editoriales : ici la page est un outil, pas une lecture. Sans cette regle le
   parcours commencait a 733 px sur un ecran de 900 — on ouvrait la page sans
   voir la premiere etape. */
.page-devis .page-hero-lux{ padding-block:clamp(106px,9vw,124px) clamp(18px,2.2vw,28px) }
.page-devis .page-hero-lux h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:10px }
.page-devis .page-hero-lux .lead{ max-width:56ch; font-size:.98rem }
.page-devis #parcours{ padding-top:clamp(26px,3vw,40px) }
.dv-repris{ border-left:3px solid var(--accent); background:var(--paper-2);
  padding:11px 15px; border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem; line-height:1.6; margin:0 0 20px }

/* ── L'invitation vers le parcours de devis, sur la page contact ──────────
   Grise et discrete au depart : personne ne la voyait. En noir, elle tient
   tete au formulaire pose juste en dessous — c'est le but, le parcours est
   la voie principale et le formulaire le repli. */
/* Couleurs figees, pas de jetons : --ink et --paper s'echangent entre les
   themes, le « bloc noir » se retournait donc en bloc creme en theme sombre
   pendant que la description restait creme. Trois lignes invisibles, 1,01:1.
   Les sections .dark du site figent leurs couleurs pour exactement cette
   raison — meme regle ici. */
.dv-invite{ display:block; background:#0a0a0a; color:#f4f2ec;
  border-radius:var(--radius); padding:clamp(24px,3vw,32px);
  margin:0 0 clamp(24px,3vw,38px); text-decoration:none;
  max-width:calc(57.5% - 0.575 * clamp(36px,5vw,72px));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease) }
.dv-invite:hover{ transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(10,10,10,.22) }
:root[data-theme="dark"] .dv-invite:hover{ box-shadow:0 14px 34px rgba(0,0,0,.5) }
.dv-invite-e{ display:block; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:#6E9CEA; margin-bottom:14px }
.dv-invite-t{ display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.28rem,2.4vw,1.66rem); line-height:1.16; letter-spacing:-.02em }
.dv-invite-d{ display:block; font-size:.92rem; line-height:1.62;
  color:rgba(245,243,238,0.72); margin-top:12px }
.dv-invite-b{ display:inline-block; margin-top:22px; background:#f4f2ec;
  color:#0a0a0a; font-weight:500; font-size:.92rem; padding:12px 22px;
  border-radius:4px; transition:transform .25s var(--ease) }
.dv-invite:hover .dv-invite-b{ transform:translateX(3px) }
@media (max-width:820px){ .dv-invite{ max-width:none } }
}

/* Le parcours est court a l'etape 1 : le rythme normal de .pad laissait
   422 px de vide entre le bouton « Continuer » et le pied de page, et la
   page se lisait comme inachevee. On resserre uniquement ici. */
.page-devis #parcours{ padding-bottom:clamp(22px,2.6vw,40px) }
.page-devis #parcours + .pad{ padding-bottom:clamp(44px,5vw,72px) }

/* ── L'appel au parcours de devis, sur l'accueil ─────────────────────────── */
.devis-appel-in{ display:grid; grid-template-columns:1fr auto; gap:clamp(28px,4vw,72px);
  align-items:end }
.devis-appel .lead{ max-width:52ch; margin-top:18px; color:rgba(245,243,238,0.72) }
.devis-appel-act{ display:flex; flex-direction:column; align-items:flex-start;
  gap:16px; padding-bottom:4px }
.devis-appel-act .btn{ white-space:nowrap }
@media (max-width:820px){
  .devis-appel-in{ grid-template-columns:1fr; align-items:start }
  .devis-appel-act{ margin-top:8px }
}

/* Le recit de la maison, sur /a-propos. Meme mesure que .a-valider qu'il
   remplace, mais sans encadre : ce n'est plus une note de chantier. */
.recit{ margin-top:clamp(26px,3vw,38px); max-width:62ch }
.recit p{ font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.75;
  color:var(--anthracite); margin:0 0 18px }
.recit p:last-child{ margin-bottom:0 }
.dark .recit p{ color:rgba(245,243,238,0.78) }

/* Credit photographe. Discret mais lisible : c'est une condition d'usage des
   images, pas une note de bas de page decorative. */
.credit-photo{ margin:14px 0 0; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.08em; color:var(--muted) }
.dark .credit-photo{ color:rgba(245,243,238,0.6) }