/* ==========================================================================
   FILIGRANE — feuille de style unique
   Sombre, cinématique, sobre. Polices système, aucun CDN.
   Aucun tracé décoratif : la douceur vient des angles arrondis, pas d'arcs
   dessinés par-dessus le contenu.
   Nommage en français, comme le reste du projet.
   ========================================================================== */

:root{
  /* — couleurs — */
  --noir:#080d12;          /* fond général                          */
  --noir2:#0e1a24;         /* section alternée — 14 points d'écart,  */
                           /* sinon l'alternance ne se voit pas      */
  --nuit:#13202a;          /* bleu nuit — charte                     */
  --carbone:#15212c;       /* surface posée SUR --noir               */
  --carbone-haut:#1c2936;  /* surface posée SUR --noir2              */
  --laiton:#a9803c;        /* or — charte                          */
  --or:#c69d55;
  --or-pale:#e8ddc8;
  --blanc:#f4efe6;
  --gris:#9c968c;          /* 6,6:1 sur --noir, 5,0:1 sur --carbone-haut → AA partout */
  --texte:#cfc9c0;
  --ligne:rgba(244,239,230,.14);
  --ligne-forte:rgba(244,239,230,.26);
  --ligne-or:rgba(198,157,85,.22);
  --ligne-or-forte:rgba(198,157,85,.50);
  --or-voile:rgba(198,157,85,.10);

  /* — typographie : pile système, aucun téléchargement — */
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Roboto,Arial,sans-serif;

  /* — rythme et courbes — */
  --largeur:1200px;
  --marge:clamp(1.15rem,5vw,4.5rem);
  --rayon:22px;            /* les angles sont larges : c'est la signature */
  --rayon-grand:32px;
  --rayon-petit:14px;
}

/* ============================ base ============================ */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:5.5rem;
}
/* Pas d'`overflow-x:hidden` ici, volontairement : il empêche le navigateur de
   défiler jusqu'aux ancres et masquerait un vrai débordement au lieu de le
   corriger. Chaque bloc qui pourrait dépasser est confiné chez lui. */
body{
  background:var(--noir);color:var(--blanc);font-family:var(--sans);
  line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--laiton);color:var(--noir)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:6px}

.visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.evitement{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--or);color:var(--noir);padding:.9rem 1.4rem;font-weight:700;border-radius:0 0 12px 0;
}
.evitement:focus{left:0}

/* petits utilitaires de rythme, pour ne pas semer de style= dans le HTML */
.boutons{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.apres{margin-top:1.7rem}
.apres-court{margin-top:.7rem}
.btn-carte{margin-top:1.1rem;width:100%}
.accent{color:var(--or-pale)}
.nom-pied{color:var(--blanc)}
.pied-note{display:block;padding:.28rem 0}
.titre-simple{font-weight:700;font-size:clamp(1.45rem,3.4vw,2.1rem);letter-spacing:-.022em;margin-bottom:1.1rem}

/* ============================ décor ============================ */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:granule 9s steps(6) infinite;
}
@keyframes granule{
  0%{transform:translate(0,0)}17%{transform:translate(-2%,1%)}34%{transform:translate(1%,-2%)}
  51%{transform:translate(-1%,2%)}68%{transform:translate(2%,1%)}85%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}
.orbe{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.5;z-index:0}
.orbe-a{
  width:54vw;height:54vw;top:-20vw;right:-16vw;
  background:radial-gradient(circle,rgba(169,128,60,.20),transparent 65%);
  animation:derive 26s ease-in-out infinite alternate;
}
.orbe-b{
  width:46vw;height:46vw;bottom:-18vw;left:-14vw;
  background:radial-gradient(circle,rgba(19,32,42,.9),transparent 65%);
  animation:derive 32s ease-in-out infinite alternate-reverse;
}
@keyframes derive{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,4vw) scale(1.12)}}

/* ============================ barre haute ============================ */
header.tete{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--marge);transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
header.tete.pose{background:rgba(8,13,18,.72);backdrop-filter:blur(16px) saturate(120%);border-bottom-color:var(--ligne)}
.progression{position:absolute;left:0;bottom:-1px;height:2px;background:var(--or);width:0;transition:width .1s linear}
.marque{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0}
.marque b{font-family:var(--serif);font-weight:400;letter-spacing:.34em;font-size:.92rem;color:var(--blanc)}

.menu{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.7rem)}
.menu a{
  text-decoration:none;font-size:.87rem;color:var(--gris);transition:color .25s;
  white-space:nowrap;padding:.35rem 0;border-bottom:1px solid transparent;
}
.menu a:hover{color:var(--or-pale)}
.menu a[aria-current="page"]{color:var(--or-pale);border-bottom-color:var(--or)}
.menu .tel{
  color:var(--noir);background:var(--or);padding:.6rem 1.15rem;border-radius:999px;
  font-weight:700;font-size:.86rem;border:0;transition:background .25s;
}
.menu .tel:hover{background:var(--or-pale);color:var(--noir)}

.bouton-menu{
  display:none;background:none;border:1px solid var(--ligne-forte);border-radius:999px;
  color:var(--blanc);font:inherit;font-size:.85rem;font-weight:600;
  padding:.6rem 1rem;cursor:pointer;align-items:center;gap:.55rem;
}
.bouton-menu:hover{border-color:var(--or)}
.bouton-menu .barres{display:grid;gap:3px}
.bouton-menu .barres i{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .25s,opacity .25s}
.bouton-menu[aria-expanded="true"] .barres i:first-child{transform:translateY(4.5px) rotate(45deg)}
.bouton-menu[aria-expanded="true"] .barres i:nth-child(2){opacity:0}
.bouton-menu[aria-expanded="true"] .barres i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Sous 1080 px le menu se plie. C'est le CSS qui décide de l'ouverture, à
   partir du seul attribut data-menu posé sur l'en-tête : le script n'a donc
   aucune largeur à connaître, et les deux ne peuvent pas se contredire. */
@media(max-width:1080px){
  .bouton-menu{display:flex}
  .menu{
    display:none;
    position:fixed;inset:3.9rem 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,13,18,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--ligne);padding:.5rem var(--marge) 1.4rem;
    max-height:calc(100svh - 3.9rem);overflow-y:auto;
  }
  .tete[data-menu="ouvert"] .menu{display:flex}
  .menu a{padding:.95rem 0;border-bottom:1px solid var(--ligne);font-size:1rem}
  .menu .tel{margin-top:1rem;text-align:center;border-bottom:0}
}

/* ============================ héros ============================ */
/* Le héros et la barre de réassurance partagent un écran : la barre est donc
   lisible sans défiler, à 320 px comme à 1920 px. */
.ecran-un{min-height:100svh;display:flex;flex-direction:column}
.heros{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:7rem var(--marge) 3rem;overflow:hidden;background:var(--noir);
}
@media(max-width:560px){.heros{padding:5.6rem var(--marge) 2rem}}

/* semis de petits « F » en tuile SVG — aucune image externe */
.heros .semis,.heros .semis-lueur{
  position:absolute;inset:0;z-index:0;pointer-events:none;background-size:78px 78px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cg transform='translate(31,27) scale(0.3)' fill='none' stroke='%23c69d55' stroke-width='3'%3E%3Cpath d='M0,0 H52 V14 H14 V32 H42 V46 H14 V76 H0 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.heros .semis{display:none}
.heros .semis-lueur{display:none}
@media (hover:hover) and (pointer:fine){
  .heros .semis-lueur{
    display:none;opacity:0;transition:opacity .5s ease;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e8ddc8'/%3E%3Cstop offset='1' stop-color='%23a9803c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(31,27) scale(0.3)' fill='url(%23g)' stroke='%23e8ddc8' stroke-width='1'%3E%3Cpath d='M0,0 H52 V14 H14 V32 H42 V46 H14 V76 H0 Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image:radial-gradient(circle 200px at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.95) 0%,rgba(0,0,0,.4) 45%,transparent 72%);
    mask-image:radial-gradient(circle 200px at var(--mx,-999px) var(--my,-999px),rgba(0,0,0,.95) 0%,rgba(0,0,0,.4) 45%,transparent 72%);
  }
  .heros.allume .semis-lueur{opacity:1}
}
.heros .dedans{position:relative;z-index:4;width:100%;max-width:var(--largeur);margin:0 auto}

/* Le sur-titre est encadré par deux filets dorés identiques, un avant et un
   après : c'est la marque d'ouverture de chaque section. */
.sur-titre{
  font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;color:var(--or);
  margin-bottom:1.7rem;display:flex;align-items:center;gap:.9rem;
}
.sur-titre::before,
.sur-titre::after{content:"";width:42px;height:1px;background:var(--or);flex-shrink:0}
/* Sur écran étroit on RACCOURCIT les deux filets, on n'en supprime aucun :
   le client regarde son site au téléphone, c'est là qu'il doit voir la paire. */
@media(max-width:620px){.sur-titre::before,.sur-titre::after{width:26px}}
@media(max-width:560px){
  .sur-titre{letter-spacing:.18em;font-size:.71rem;margin-bottom:1.3rem;gap:.6rem}
  .sur-titre::before,.sur-titre::after{width:22px}
}

.heros h1{
  font-weight:700;letter-spacing:-.028em;line-height:1.03;color:var(--blanc);
  font-size:clamp(2.15rem,6.8vw,5.1rem);max-width:19ch;
}
.dore{
  background:linear-gradient(96deg,#e8ddc8 0%,#c69d55 52%,#a9803c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.heros .accroche{margin-top:1.8rem;color:var(--texte);font-size:clamp(1.02rem,2.1vw,1.22rem);max-width:54ch}
.heros .boutons{margin-top:2.3rem;gap:.8rem}
.heros .sous-boutons{margin-top:1.1rem;color:var(--gris);font-size:.87rem}

/* ============================ boutons ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  text-decoration:none;font-weight:700;font-size:1rem;line-height:1.25;
  padding:1rem 1.7rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .25s,border-color .25s,color .25s,transform .2s,box-shadow .25s;
}
.btn-or{background:var(--or);color:var(--noir);box-shadow:0 12px 28px -16px rgba(198,157,85,.85)}
.btn-or:hover{background:var(--or-pale);transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(198,157,85,1)}
.btn-bord{border-color:rgba(198,157,85,.38);color:var(--or-pale);background:rgba(198,157,85,.05)}
.btn-bord:hover{border-color:var(--or);background:rgba(198,157,85,.10);color:var(--blanc);transform:translateY(-2px)}
.btn-plein{width:100%}
.btn .prix-btn{font-weight:800;white-space:nowrap}
.btn .prix-btn::before{content:"·";margin:0 .5em;opacity:.5;font-weight:400}
/* posé par le script quand un lien Stripe existe : signale l'ouverture d'un onglet */
.vers-paiement::after{content:"↗";font-size:.82em;margin-left:.1em;opacity:.75}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ============================ charpente ============================ */
main{position:relative;z-index:1}
section{position:relative;padding:clamp(4rem,9vw,7.5rem) var(--marge)}
section.alt{background:var(--noir2);border-top:1px solid rgba(244,239,230,.06);
  border-bottom:1px solid rgba(244,239,230,.06)}
.cadre{max-width:var(--largeur);margin:0 auto;position:relative}
.cadre-etroit{max-width:900px;margin:0 auto;position:relative}

/* Un seul système d'étiquette de section : le sur-titre doré, au-dessus du
   titre. L'ancien .indice gris poussé à droite faisait cohabiter deux
   dispositifs pour la même fonction — c'est ce qui donnait l'air inachevé. */
.en-tete-sec{
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  padding-bottom:1.35rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem);position:relative;
}
.en-tete-sec .sur-titre{margin-bottom:0}
/* le trait sous le titre de section est légèrement courbe, lui aussi */
.en-tete-sec::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  /* neutre : l'or marque l'étiquette, pas la séparation */
  background:linear-gradient(90deg,var(--ligne-forte),var(--ligne) 45%,transparent);
}
.en-tete-sec h2{font-weight:700;letter-spacing:-.026em;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.12;max-width:24ch}
.en-tete-sec .indice{color:var(--gris);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.chapo{color:var(--texte);font-size:clamp(1rem,2vw,1.14rem);max-width:64ch;margin-bottom:2rem}
.chapo strong{color:var(--or-pale);font-weight:600}
h3{font-weight:600;letter-spacing:-.018em}

.appar{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.appar.vu{opacity:1;transform:none}

/* ============================ 2 · réassurance ============================ */
.reassurance{
  background:linear-gradient(100deg,#a9803c 0%,#c69d55 50%,#a9803c 100%);
  color:#150e04;padding:.9rem var(--marge);position:relative;z-index:5;
}
.reassurance ul{
  max-width:var(--largeur);margin:0 auto;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem 0;
}
.reassurance li{font-weight:700;font-size:clamp(.71rem,1.75vw,.85rem);letter-spacing:.01em}
.reassurance li:not(:last-child)::after{content:"·";font-weight:400;opacity:.55;margin:0 .7rem}

/* ============================ 3 · par où commencer ============================ */
.grille-portes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.6vw,1.1rem)}
@media(max-width:900px){.grille-portes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grille-portes{grid-template-columns:1fr}}
.porte{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-width:0;
  text-decoration:none;border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:1.5rem;background:linear-gradient(165deg,rgba(19,32,42,.6),rgba(8,13,18,.3));
  transition:border-color .3s,background .3s,transform .3s;position:relative;overflow:hidden;
}
.porte:hover{border-color:rgba(198,157,85,.55);background:rgba(198,157,85,.07);transform:translateY(-4px)}
.porte b{font-weight:600;font-size:1.03rem;line-height:1.35;color:var(--blanc);position:relative}
.porte span{color:var(--or);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.4rem;position:relative}
@media (prefers-reduced-motion:reduce){.porte:hover{transform:none}}

/* ============================ cartes ============================ */
/* Règle absolue : une carte est toujours un cran AU-DESSUS de son fond.
   L'ancien dégradé semi-transparent se composait plus sombre que la section :
   la carte s'enfonçait dans la page, et s'éteignait juste là où se trouve le
   bouton. C'était la cause du « trop sombre et pas du tout beau ». */
.carte{
  border:1px solid var(--ligne-or);border-radius:var(--rayon-grand);
  padding:clamp(1.6rem,3vw,2.3rem);min-width:0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(244,239,230,.045),transparent 38%),var(--carbone);
  box-shadow:inset 0 1px 0 rgba(244,239,230,.06),0 18px 40px -28px rgba(0,0,0,.92);
  display:flex;flex-direction:column;
}
section.alt .carte{background:linear-gradient(180deg,rgba(244,239,230,.05),transparent 38%),var(--carbone-haut)}
/* L'ancienne ombre (retrait 50 px pour un flou de 70) ne sortait quasiment
   pas, et une ombre dorée sur du quasi-noir ne porte pas. Ombre neutre. */
.carte.mise-en-avant{
  border-color:var(--ligne-or-forte);
  background:linear-gradient(180deg,rgba(198,157,85,.11),rgba(198,157,85,.02) 42%),var(--carbone-haut);
  box-shadow:0 0 0 1px rgba(198,157,85,.16),0 30px 60px -34px rgba(0,0,0,.95);
}
/* arc de lumière en haut de la carte mise en avant */
.carte.mise-en-avant::before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,221,200,.75),transparent);
}
.carte h3{font-size:clamp(1.15rem,2.4vw,1.4rem);margin-bottom:.4rem}
.carte p{color:var(--texte);font-size:.95rem}
.carte .pousse{margin-top:auto}
.prix{
  font-weight:700;color:var(--or);letter-spacing:-.028em;line-height:1.05;
  font-size:clamp(1.7rem,4.4vw,2.45rem);display:block;margin:.7rem 0 .2rem;
}
.prix .unite{font-size:.34em;color:var(--gris);font-weight:600;letter-spacing:.02em}
/* Un seul filet interne par carte, ancré au prix : il sépare « ce que ça coûte »
   de « ce que c'est ». Ancré à .prix et non à une liste de classes, pour qu'une
   carte sans prix n'en hérite pas. */
.carte .prix+*:not(.lancement),.carte .lancement+*{
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid rgba(198,157,85,.18);
}
.prix s{color:var(--gris);font-size:.48em;margin-right:.4em;font-weight:600}
.lancement{
  display:inline-block;background:var(--laiton);color:#150e04;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .8rem;margin-top:.45rem;
}
.ailleurs{color:var(--gris);font-size:.9rem;font-style:normal;margin-top:1rem;
  padding-left:.85rem;border-left:1px solid rgba(198,157,85,.3)}
.liste-points{list-style:none;margin:1.05rem 0}
.liste-points li{color:var(--texte);font-size:.95rem;line-height:1.6;padding-left:1.55rem;position:relative;margin-bottom:.6rem}
.liste-points li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--or)}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.15rem,2.5vw,1.9rem);align-items:stretch}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.15rem,2.5vw,1.9rem);align-items:stretch}
@media(max-width:900px){.grille-3{grid-template-columns:1fr}}
@media(max-width:760px){.grille-2{grid-template-columns:1fr}}
/* Cartes de même hauteur tant que tout est replié : les boutons s'alignent, ça
   se compare d'un coup d'œil. Dès qu'un détail s'ouvre, on rend leur hauteur
   naturelle aux cartes — sinon les voisines s'étirent sur des centaines de
   pixels de vide. Les navigateurs sans :has() gardent simplement l'alignement. */
.grille-2:has(.detail-offre[open]),
.grille-3:has(.detail-offre[open]){align-items:start}

.encadre{
  border:1px solid rgba(198,157,85,.35);border-left-width:3px;border-radius:var(--rayon);
  padding:1.4rem 1.6rem;background:var(--or-voile);
}
.encadre b,.encadre strong{color:var(--or-pale)}
.encadre p{color:var(--texte);font-size:.95rem}
.encadre p+p{margin-top:.8rem}
.encadre .titre-enc{
  display:block;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:.6rem;font-weight:700;
}
.encadre.doux{background:none;border-color:var(--ligne)}

/* Réponse au « des fois on sait presque pas ce qu'on vend » : deux lignes en
   tête de chaque carte, avant toute liste. Pour qui, et ce qu'on reçoit. */
.pour-qui,.livrable{color:var(--texte);font-size:.94rem;margin-top:.6rem;max-width:52ch}
.pour-qui b,.livrable b{color:var(--or-pale);font-weight:600}

/* sur l'accueil, le détail n'est pas déplié sur place : il renvoie à sa page */
.lien-detail{
  display:inline-block;margin-top:.9rem;color:var(--or);font-weight:600;font-size:.88rem;
  text-decoration:none;border-bottom:1px solid rgba(198,157,85,.3);padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.lien-detail:hover{color:var(--or-pale);border-bottom-color:var(--or)}

/* ——— ce qui se passe après le paiement ——— */
.apres-paiement{
  margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--ligne-forte);
  color:var(--texte);font-size:.9rem;line-height:1.55;
}
.apres-paiement b{color:var(--or-pale);font-weight:600}

/* ==========================================================================
   VITRINE DES DÉMOS — « ce qu'on peut faire », en haut de l'accueil
   Les vignettes sont CLAIRES sur le fond sombre : elles disent d'un coup d'œil
   que le site du studio et les sites livrés n'ont pas le même travail à faire.
   Aucune photo : les maquettes miniatures sont dessinées en CSS.
   ========================================================================== */
.vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.6vw,1.1rem)}
@media(max-width:1000px){.vitrine{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vitrine{grid-template-columns:1fr}}

.vitrine-carte{
  display:block;text-decoration:none;min-width:0;border-radius:var(--rayon);
  border:1px solid var(--ligne);background:var(--carbone);overflow:hidden;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.vitrine-carte:hover{
  border-color:rgba(198,157,85,.55);transform:translateY(-6px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
@media (prefers-reduced-motion:reduce){.vitrine-carte:hover{transform:none}}

/* La vignette montre une capture du site de démonstration. Léger agrandissement
   au survol : l'effet discret voulu par la charte, sans suivi du curseur. */
.vitrine-image{
  display:block;position:relative;overflow:hidden;background:var(--nuit);
  aspect-ratio:16/10;border-bottom:1px solid var(--ligne);
}
.vitrine-image img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.vitrine-carte:hover .vitrine-image img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.vitrine-carte:hover .vitrine-image img{transform:none}}

.vitrine-txt{display:block;padding:1rem 1.1rem}
.vitrine-txt b{display:block;color:var(--blanc);font-weight:600;font-size:.98rem;margin-bottom:.15rem}
.vitrine-txt span{display:block;color:var(--gris);font-size:.83rem}
.vitrine-txt .voir{display:block;color:var(--or);font-size:.83rem;font-weight:600;margin-top:.7rem}

/* ==========================================================================
   DÉTAIL DÉPLIABLE D'UNE OFFRE — « tout ce que comprend cette offre »
   ========================================================================== */
.detail-offre{
  margin-top:1rem;border-top:1px solid var(--ligne);
}
.detail-offre>summary{
  cursor:pointer;list-style:none;padding:.95rem 2.2rem .2rem 0;position:relative;
  font-weight:600;font-size:.92rem;color:var(--or);
}
.detail-offre>summary::-webkit-details-marker{display:none}
.detail-offre>summary::after{
  content:"";position:absolute;right:.35rem;top:1.25rem;width:8px;height:8px;
  border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);
  transform:rotate(45deg);transition:transform .3s;
}
.detail-offre[open]>summary::after{transform:rotate(-135deg);top:1.5rem}
.detail-offre>summary:hover{color:var(--or-pale)}
.detail-corps{padding:.7rem 0 .2rem}
.detail-corps h4{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-pale);
  font-weight:700;margin:1.1rem 0 .5rem;
}
.detail-corps h4:first-child{margin-top:.3rem}
.detail-corps p{color:var(--texte);font-size:.9rem;margin-bottom:.5rem}
.detail-corps .liste-points li{font-size:.89rem}
.detail-corps .liste-points{margin:.2rem 0 .4rem}
/* ce qui n'est pas compris : même liste, marque différente */
.detail-corps .liste-hors li::before{
  background:none;width:9px;height:9px;top:.42em;border-radius:50%;
  border:1px solid rgba(143,154,166,.7);
}
.detail-corps .liste-hors li{color:var(--gris)}

/* ==========================================================================
   RECOMMANDÉ AVEC — la proposition complémentaire, à la manière d'AppleCare
   Toujours avec la raison, jamais seulement le prix.
   ========================================================================== */
.recommande{
  margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--ligne-forte);
}
.recommande .etiquette{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);font-weight:700;margin-bottom:.55rem;
}
.reco-lien{
  display:flex;align-items:flex-start;gap:.75rem;text-decoration:none;
  border:1px solid var(--ligne);border-radius:var(--rayon-petit);
  padding:.8rem .9rem;background:rgba(8,13,18,.45);
  transition:border-color .3s,background .3s;
}
.reco-lien:hover{border-color:rgba(198,157,85,.5);background:rgba(198,157,85,.07)}
.reco-lien::before{ /* un signe « + » discret, pas une icône criarde */
  content:"";flex-shrink:0;width:16px;height:16px;margin-top:.15em;border-radius:50%;
  border:1px solid rgba(198,157,85,.55);
  background:
    linear-gradient(var(--or),var(--or)) center/8px 1px no-repeat,
    linear-gradient(var(--or),var(--or)) center/1px 8px no-repeat;
}
.reco-lien .reco-txt{display:block;min-width:0}
.reco-lien b{display:block;color:var(--blanc);font-weight:600;font-size:.9rem;margin-bottom:.15rem}
.reco-lien span{display:block;color:var(--gris);font-size:.83rem;line-height:1.5}

/* ============================ chiffres sourcés ============================ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.3rem)}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{
  border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.5rem;
  background:var(--carbone);min-width:0;
}
section.alt .stat{background:var(--carbone-haut)}
.stat .chiffre{display:block;font-size:clamp(2rem,5vw,2.7rem);font-weight:700;color:var(--or);line-height:1;letter-spacing:-.03em}
.stat p{color:var(--texte);font-size:.93rem;margin-top:.6rem}
.stat cite{
  display:block;color:var(--gris);font-size:.77rem;font-style:normal;margin-top:.85rem;
  padding-top:.75rem;border-top:1px solid var(--ligne);
}

/* ============================ tableau comparatif ============================ */
/* Sur mobile, la décision se prend sur les cartes ; le tableau complet est
   replié dans un <details> qu'on ouvre si on veut tout comparer. Le script
   l'ouvre d'office sur grand écran. */
/* Le repli est un simple lien de texte, pas un bandeau : il ne doit pas peser
   plus lourd que les cartes qu'il complète. */
.replie-tableau{border:0;background:none}
.replie-tableau>summary{
  cursor:pointer;list-style:none;padding:.55rem 1.5rem .55rem 0;position:relative;
  display:inline-block;font-weight:600;color:var(--gris);font-size:.87rem;
  transition:color .25s;
}
.replie-tableau>summary::-webkit-details-marker{display:none}
.replie-tableau>summary::after{
  content:"";position:absolute;right:.25rem;top:50%;width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.replie-tableau[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.replie-tableau>summary:hover{color:var(--or)}
.tableau-enveloppe{
  overflow-x:auto;                 /* le débordement reste DANS le cadre */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  border:1px solid var(--ligne);border-radius:var(--rayon);
  background:var(--carbone);margin-top:.9rem;
}
.indice-glisse{display:none;color:var(--gris);font-size:.8rem;padding:.8rem 1.3rem 0}
@media(max-width:820px){.indice-glisse{display:block}}
table.comparatif{border-collapse:collapse;width:100%;min-width:660px;font-size:.9rem}
table.comparatif th,table.comparatif td{
  padding:.8rem .95rem;text-align:left;border-bottom:1px solid var(--ligne);color:var(--texte);
  vertical-align:top;scroll-snap-align:start;
}
table.comparatif thead th{
  color:var(--blanc);font-weight:700;font-size:.96rem;letter-spacing:-.015em;
  background:rgba(19,32,42,.96);border-bottom:1px solid var(--ligne-forte);
}
table.comparatif thead th small{display:block;font-weight:400;color:var(--gris);font-size:.75rem;margin-top:.2rem}
table.comparatif tbody th{
  color:var(--gris);font-weight:600;font-size:.85rem;
  position:sticky;left:0;background:var(--carbone-haut);z-index:1;min-width:172px;
}
table.comparatif .col-phare{background:rgba(169,128,60,.09)}
table.comparatif thead .col-phare{background:rgba(169,128,60,.22);color:var(--or-pale)}
table.comparatif td b{color:var(--blanc);font-weight:700}
table.comparatif .oui{color:var(--or);font-weight:700}
table.comparatif .non{color:var(--gris)}
table.comparatif tr:last-child th,table.comparatif tr:last-child td{border-bottom:0}

/* ============================ méthode ============================ */
.etape{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.6rem);align-items:start;
  padding:clamp(1.3rem,3vw,2rem) 0;border-bottom:1px solid var(--ligne);
}
.etape:last-child{border-bottom:0}
.etape .no{
  font-weight:300;font-size:clamp(1.9rem,5vw,3.1rem);line-height:1;color:var(--or);
  min-width:3.6rem;font-variant-numeric:tabular-nums;
}
.etape h3{font-size:clamp(1.05rem,2.4vw,1.42rem);margin-bottom:.4rem}
.etape p{color:var(--texte);max-width:62ch;font-size:.96rem}

/* ============================ garanties ============================ */
.garanties{list-style:none;counter-reset:g;display:grid;gap:.85rem}
.garanties li{
  counter-increment:g;position:relative;padding:1.2rem 1.4rem 1.2rem 3.9rem;min-width:0;
  border:1px solid var(--ligne-or);border-radius:var(--rayon);background:var(--carbone);
  color:var(--texte);font-size:.96rem;
}
section.alt .garanties li{background:var(--carbone-haut)}
.garanties li::before{
  content:counter(g);position:absolute;left:1.2rem;top:1.05rem;
  width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(198,157,85,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--or);font-weight:700;font-size:.9rem;
}
.garanties li b{color:var(--blanc);display:block;margin-bottom:.25rem;font-weight:600}

/* ============================ ce qu'on ne fait pas ============================ */
.negatif{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(max-width:760px){.negatif{grid-template-columns:1fr}}
.negatif li{
  display:flex;gap:.85rem;align-items:flex-start;min-width:0;
  border:1px solid var(--ligne);border-radius:var(--rayon-petit);padding:1rem 1.2rem;
  color:var(--texte);font-size:.94rem;background:var(--carbone);
}
section.alt .negatif li{background:var(--carbone-haut)}
.negatif li::before{
  content:"";flex-shrink:0;width:17px;height:17px;margin-top:.24em;border-radius:50%;
  border:1px solid rgba(198,157,85,.45);
  background:
    linear-gradient(45deg,transparent 45%,var(--or) 45%,var(--or) 55%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,var(--or) 45%,var(--or) 55%,transparent 55%);
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;
}

/* ============================ exemples (sans photo) ============================ */
.grille-demos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.2rem)}
@media(max-width:900px){.grille-demos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grille-demos{grid-template-columns:1fr}}
.demo-lien{
  display:block;text-decoration:none;border:1px solid var(--ligne);border-radius:var(--rayon);
  overflow:hidden;background:var(--carbone);transition:border-color .3s,transform .3s;min-width:0;
}
.demo-lien:hover{border-color:rgba(198,157,85,.55);transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.demo-lien:hover{transform:none}}
.demo-lien .chrome{
  display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;background:#070b0f;
  border-bottom:1px solid var(--ligne);
}
.demo-lien .chrome i{width:8px;height:8px;border-radius:50%;background:#2c3944;display:block;flex-shrink:0}
.demo-lien .chrome i:first-child{background:#c0564f}
.demo-lien .chrome i:nth-child(2){background:#c9a13b}
.demo-lien .chrome i:nth-child(3){background:#57a367}
.demo-lien .chrome span{margin-left:.3rem;font-size:.68rem;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.demo-lien .dedans{display:block;padding:1.15rem}
.demo-lien .dedans b{display:block;color:var(--blanc);font-weight:600;font-size:1rem;margin-bottom:.2rem}
.demo-lien .dedans span{display:block;color:var(--gris);font-size:.85rem}
.demo-lien .dedans .voir{color:var(--or);font-size:.85rem;font-weight:600;margin-top:.85rem}

/* ============================ FAQ ============================ */
.faq{display:grid;gap:.65rem}
.faq details{border:1px solid var(--ligne-or);border-radius:var(--rayon);background:var(--carbone);overflow:hidden}
section.alt .faq details{background:var(--carbone-haut)}
.faq details[open]{border-color:rgba(198,157,85,.4)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 3.2rem 1.1rem 1.35rem;position:relative;
  font-weight:600;font-size:1rem;color:var(--blanc);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.4rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--or);border-bottom:1.5px solid var(--or);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--or-pale)}
.faq .reponse{padding:0 1.35rem 1.35rem;color:var(--texte);font-size:.95rem;max-width:74ch}
.faq .reponse p+p{margin-top:.7rem}

/* ============================ formulaires ============================ */
.formulaire{
  border:1px solid var(--ligne);border-radius:var(--rayon-grand);padding:clamp(1.4rem,3vw,2.2rem);
  background:linear-gradient(180deg,rgba(244,239,230,.05),transparent 38%),var(--carbone-haut);
  border-color:var(--ligne-or);
}
.champ{display:grid;gap:.4rem;margin-bottom:1.15rem;min-width:0}
.champ label{font-size:.88rem;font-weight:600;color:var(--or-pale)}
.champ .aide{font-size:.8rem;color:var(--gris)}
.champ input,.champ textarea,.champ select{
  width:100%;max-width:100%;font:inherit;font-size:1rem;color:var(--blanc);
  background:rgba(8,13,18,.75);border:1px solid var(--ligne-forte);border-radius:var(--rayon-petit);
  padding:.85rem 1rem;transition:border-color .25s;
}
.champ input::placeholder,.champ textarea::placeholder{color:#6c7883}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--or);outline:none}
.mention-form{color:var(--gris);font-size:.82rem;margin-top:1rem;max-width:70ch}
.mention-form a{color:var(--or)}
.repli-contact{
  margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--ligne);
  color:var(--gris);font-size:.88rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
}
.repli-contact a{color:var(--or-pale);text-decoration:none;font-weight:600}
.repli-contact a:hover{text-decoration:underline}

/* ============================ pavé texte simple ============================ */
.pave-simple{max-width:62ch;color:var(--texte);font-size:clamp(1.03rem,2.2vw,1.2rem);line-height:1.72}
.pave-simple strong{color:var(--or-pale);font-weight:600}
.pave-simple p+p{margin-top:1rem}

/* ============================ rappel ============================ */
.rappel{
  text-align:center;border:1px solid rgba(198,157,85,.3);border-radius:var(--rayon-grand);
  padding:clamp(1.8rem,4vw,3rem);background:var(--or-voile);position:relative;overflow:hidden;
}
.rappel>*{position:relative}
.rappel h2{font-weight:700;font-size:clamp(1.55rem,4vw,2.5rem);letter-spacing:-.026em;margin-bottom:.75rem}
.rappel p{color:var(--texte);max-width:54ch;margin:0 auto 1.7rem}
.rappel .boutons{justify-content:center}

/* ============================ barre d'action mobile ============================ */
/* Le téléphone est l'écran principal du public visé : on garde les deux
   actions utiles à portée de pouce, sans jamais masquer le contenu. */
.barre-pouce{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:.5rem;
  padding:.6rem var(--marge) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(8,13,18,.94);backdrop-filter:blur(14px);border-top:1px solid var(--ligne);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.19,1,.22,1);
}
.barre-pouce.montree{transform:none}
.barre-pouce a{
  flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:700;font-size:.92rem;padding:.85rem .6rem;border-radius:999px;
}
.barre-pouce .principal{background:var(--or);color:var(--noir)}
.barre-pouce .second{border:1px solid var(--ligne-forte);color:var(--blanc)}
@media(max-width:760px){
  .barre-pouce{display:flex}
  body{padding-bottom:4.6rem}
}

/* ============================ pied de page ============================ */
footer.pied{
  border-top:1px solid var(--ligne);padding:3rem var(--marge) 3rem;
  font-size:.82rem;color:var(--gris);background:var(--noir);position:relative;z-index:1;
}
footer.pied .cadre{display:grid;gap:1.5rem}
footer.pied .colonnes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.7rem}
@media(max-width:820px){footer.pied .colonnes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){footer.pied .colonnes{grid-template-columns:1fr}}
footer.pied .colonnes b{
  display:block;color:var(--or-pale);font-size:.73rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.75rem;font-weight:700;
}
footer.pied .colonnes a{display:block;color:var(--gris);text-decoration:none;padding:.29rem 0;transition:color .25s}
footer.pied .colonnes a:hover{color:var(--or-pale)}
footer.pied .legal{border-top:1px solid var(--ligne);padding-top:1.5rem;line-height:1.75;max-width:112ch}
footer.pied .legal a{color:var(--gris)}
footer.pied .mention-ia{color:var(--gris);border-left:2px solid rgba(198,157,85,.45);padding-left:.95rem;margin-top:.95rem}

/* ============================ en-tête des pages intérieures ============================ */
/* ============================ en-tête des pages intérieures ================
   Une composition sobre mais tenue : un filet doré qui court en haut, une
   lueur d'or au loin, un semis de « F » très discret, et le titre posé sur
   une colonne étroite. Pas de 3D ici — le contenu commande. */
.tete-page{
  position:relative;overflow:hidden;
  padding:9.5rem var(--marge) clamp(4rem,8vw,6.5rem);
  border-bottom:1px solid var(--ligne);
}
@media(max-width:560px){.tete-page{padding:7.4rem var(--marge) 3.4rem}}
/* le filet doré du haut, éteint aux extrémités */
.tete-page::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(198,157,85,.55) 22%,rgba(232,221,200,.75) 50%,rgba(198,157,85,.55) 78%,transparent);
}
/* le semis de F, en très discret, seulement sur écran large */
.tete-page::after{
  content:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cg transform='translate(30,26) scale(0.3)' fill='none' stroke='%23c69d55' stroke-width='3'%3E%3Cpath d='M0,0 H52 V14 H14 V32 H42 V46 H14 V76 H0 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
}
@media(max-width:760px){.tete-page::after{display:none}}
.tete-page .cadre{position:relative;z-index:2;max-width:var(--largeur)}
.tete-page .sur-titre{margin-bottom:1.5rem}
.tete-page h1{
  font-weight:700;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.1rem,5.8vw,4rem);max-width:19ch;
}
.tete-page .chapo{margin:1.7rem 0 0;font-size:clamp(1.02rem,2.1vw,1.18rem);max-width:60ch}
.tete-page .boutons{margin-top:2.2rem}

/* ============================ pages légales ============================ */
.page-legale main{max-width:900px;margin:0 auto;padding:7.2rem var(--marge) 4rem}
.page-legale h1{font-weight:700;font-size:clamp(1.95rem,5vw,3rem);letter-spacing:-.03em;line-height:1.1}
.page-legale .maj{color:var(--gris);font-size:.85rem;margin-top:.9rem;padding-bottom:2rem;border-bottom:1px solid var(--ligne)}
.page-legale h2{font-weight:600;font-size:1.16rem;letter-spacing:-.018em;margin:2.7rem 0 .8rem;color:var(--or-pale)}
.page-legale h2 .n{font-weight:300;color:var(--or);margin-right:.55rem;font-variant-numeric:tabular-nums}
.page-legale h3{font-size:.99rem;margin:1.6rem 0 .45rem;color:var(--blanc)}
.page-legale p{color:var(--texte);font-size:.95rem;margin-bottom:.85rem;max-width:78ch}
.page-legale ul,.page-legale ol{list-style:none;margin:.4rem 0 1.1rem;max-width:78ch}
.page-legale li{color:var(--texte);font-size:.95rem;padding-left:1.35rem;position:relative;margin-bottom:.45rem}
.page-legale li::before{content:"";position:absolute;left:0;top:.64em;width:7px;height:1px;background:var(--or)}
.page-legale ol{counter-reset:o}
.page-legale ol li{counter-increment:o;padding-left:1.85rem}
.page-legale ol li::before{content:counter(o) ".";width:auto;height:auto;background:none;color:var(--or);font-weight:700;top:0;font-size:.9rem}
.page-legale strong,.page-legale b{color:var(--blanc);font-weight:600}
.page-legale a{color:var(--or)}
.page-legale table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.9rem;display:block;overflow-x:auto}
.page-legale table th,.page-legale table td{text-align:left;padding:.68rem .8rem;border-bottom:1px solid var(--ligne);color:var(--texte)}
.page-legale table th{color:var(--or-pale);font-weight:600;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}

/* ============================ page centrée (merci, 404) ============================ */
.page-centre{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6.5rem var(--marge) 4rem;position:relative;overflow:hidden;
}
.page-centre .dedans{max-width:640px;position:relative;z-index:2}
.page-centre .grand{font-weight:700;letter-spacing:-.032em;line-height:1.04;font-size:clamp(2.3rem,7vw,4.2rem);margin-bottom:1.2rem}
.page-centre p{color:var(--texte);font-size:1.02rem;margin-bottom:1rem}
.page-centre .boutons{justify-content:center;margin-top:1.9rem}
.page-centre .liens-utiles{
  margin-top:2.5rem;padding-top:1.7rem;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;justify-content:center;font-size:.88rem;
}
.page-centre .liens-utiles a{color:var(--gris);text-decoration:none}
.page-centre .liens-utiles a:hover{color:var(--or-pale)}

/* ============================ mouvement réduit ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .appar{opacity:1;transform:none}
  .grain,.orbe{animation:none}
  .barre-pouce{transform:none}
}

/* ============================ décor 3D en fond ============================
   Une toile fixe, derrière tout (z-index 0, le contenu est à 1). Les
   sections .alt gardent leur fond plein : elles servent de respiration,
   le décor vit entre elles. La toile n'existe que si le module 3D a pu
   se lancer ; sans lui, rien ne change — le héros redevient var(--noir)
   par le fond du <body>. */
canvas.fond-3d{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .55s ease}
body.avec-3d .heros{background:transparent}

/* ============================ pages intérieures — décor simple =============
   Sans 3D, un héros sobre : une lueur d'or en haut à droite, une ombre
   froide en bas à gauche, un fond plat. Rien d'autre — le contenu d'abord. */
body:not(.avec-3d) .tete-page,
body:not(.avec-3d) .heros{
  position:relative;
  background:
    radial-gradient(900px 440px at 86% -12%, rgba(198,157,85,.16), transparent 70%),
    radial-gradient(760px 400px at -4% 112%, rgba(19,32,42,.95), transparent 70%),
    #0a1118;
}
/* ============================ accueil — la présentation ======================
   L'accueil seul (body[data-scene3d]) passe en présentation « keynote » :
   typographie système serrée, tout centré, pilules, cartes de verre sur la
   scène 3D. Les couleurs de la maison ne bougent pas : nuit, or, laiton. */
body[data-scene3d]{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,Segoe UI,sans-serif;letter-spacing:-0.011em;background:radial-gradient(2.5px 2.5px at 18% 30%, rgba(232,221,200,.55), transparent 60%),
  radial-gradient(2px 2px at 38% 68%, rgba(198,157,85,.45), transparent 60%),
  radial-gradient(2.5px 2.5px at 57% 24%, rgba(198,157,85,.4), transparent 60%),
  radial-gradient(2px 2px at 74% 56%, rgba(232,221,200,.35), transparent 60%),
  radial-gradient(2.5px 2.5px at 88% 34%, rgba(198,157,85,.45), transparent 60%),
  radial-gradient(2px 2px at 27% 84%, rgba(198,157,85,.35), transparent 60%),
  radial-gradient(1200px 600px at 68% 118%, rgba(198,157,85,.2), transparent 70%),
  radial-gradient(900px 460px at 8% -20%, rgba(57,80,106,.22), transparent 66%),
  #080d12;}
/* — l'en-tête : barre translucide flottante — */
.tete{
  background:rgba(8,13,18,.6);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(198,157,85,.14);
}
/* — le héros : centré, immense, très aéré — */
body[data-scene3d] .heros .dedans{max-width:860px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
body[data-scene3d] .heros .sur-titre{
  letter-spacing:.14em;font-size:.78rem;opacity:.85;
}
body[data-scene3d] .heros .sur-titre::before,
body[data-scene3d] .heros .sur-titre::after{display:none}
body[data-scene3d] .heros h1{
  font-size:clamp(2.9rem, 7.2vw, 5.4rem);
  line-height:1.04;letter-spacing:-0.021em;font-weight:700;
  text-wrap:balance;
}
body[data-scene3d] .heros .accroche{font-size:clamp(1.1rem, 1.9vw, 1.4rem);line-height:1.5;max-width:34em;margin-inline:auto;color:rgba(232,221,200,.86);}
body[data-scene3d] .boutons{justify-content:center}
body[data-scene3d] .sous-boutons{text-align:center}
/* — pilules — */
.btn{
  border-radius:980px;font-weight:600;letter-spacing:0;
  padding:.9em 1.7em;transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-or{background:#c69d55;border-color:transparent;color:#080d12}
.btn-or:hover{background:#d9b26a;transform:scale(1.03)}
.btn-bord{border-color:rgba(232,221,200,.35);color:#e8ddc8;background:transparent}
.btn-bord:hover{border-color:#c69d55;color:#c69d55;background:transparent;transform:scale(1.03)}
/* — sections : têtes centrées, souffle — */
body[data-scene3d] main section{padding-block:clamp(4.5rem, 9vh, 7.5rem)}
body[data-scene3d] .en-tete-sec{text-align:center;margin-inline:auto;max-width:820px;display:block;border:0;}
body[data-scene3d] .en-tete-sec .sur-titre{
  justify-content:center;letter-spacing:.14em;font-size:.76rem;
}
body[data-scene3d] .en-tete-sec .sur-titre::before,
body[data-scene3d] .en-tete-sec .sur-titre::after{display:none}

body[data-scene3d] .en-tete-sec::before,
body[data-scene3d] .en-tete-sec::after{display:none}
body[data-scene3d] .cadre > hr, body[data-scene3d] .en-tete-sec + hr{display:none}
body[data-scene3d] .en-tete-sec h2{
  font-size:clamp(1.9rem, 4.6vw, 3.3rem);
  line-height:1.08;letter-spacing:-0.018em;font-weight:700;
  text-wrap:balance;margin-inline:auto;
}
body[data-scene3d] .cadre > .chapo{
  text-align:center;max-width:38em;margin-inline:auto;
  font-size:1.12rem;line-height:1.55;color:rgba(232,221,200,.8);
}
/* — cartes : verre de nuit, capsule, survol qui respire — */
.carte{
  border-radius:26px;
  background:rgba(16,24,33,.62);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(198,157,85,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
.carte:hover{transform:translateY(-6px);border-color:rgba(198,157,85,.4)}
.carte.mise-en-avant{
  border-color:rgba(198,157,85,.5);
  background:rgba(22,30,39,.7);
}
.prix{letter-spacing:-0.02em;font-weight:700}
.lien-detail{color:#c69d55}
/* — les quatre portes : pilules de verre — */
.porte{
  border-radius:20px;border:1px solid rgba(198,157,85,.16);
  background:rgba(16,24,33,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s ease, border-color .3s ease;
}
.porte:hover{transform:translateY(-4px);border-color:rgba(198,157,85,.45)}
@media(prefers-reduced-motion: reduce){
  .btn, .carte, .porte{transition:none}
}

/* accueil — héros centré : le texte au milieu, la Terre derrière */

body[data-scene3d] .heros .boutons{justify-content:center}
body[data-scene3d] .heros .sous-boutons{text-align:center}

/* finitions accueil : états de focus et liens soignés */
.btn:focus-visible{outline:2px solid #c69d55;outline-offset:3px}
.lien-detail:hover{text-decoration:underline;text-underline-offset:3px}
.porte:focus-visible{outline:2px solid #c69d55;outline-offset:3px}
::selection{background:rgba(198,157,85,.35);color:#e8ddc8}

/* accueil : un ciel immédiat sous la toile 3D — la page est belle à 0 ms,
   la scène animée vient se fondre par-dessus quand elle est prête. */

/* rendu propre des pages intérieures : plus d'air, hiérarchie nette */
body:not([data-scene3d]) .tete-page{padding-block:clamp(4rem, 10vh, 7rem) clamp(2.5rem, 6vh, 4.5rem)}
body:not([data-scene3d]) .tete-page h1{letter-spacing:-0.018em;text-wrap:balance}
body:not([data-scene3d]) .tete-page .chapo{max-width:36em;line-height:1.55;color:rgba(232,221,200,.82)}
body:not([data-scene3d]) main section{padding-block:clamp(3.5rem, 7vh, 5.5rem)}

/* ============================ identité par page =============================
   Même langage — nuit, or, laiton — mais un motif propre à chaque page :
   rayons de vitrine, ping, veilleuses, duo, ondes, étal, sobriété. */
body[data-page="sites"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  linear-gradient(105deg, transparent 30%, rgba(232,221,200,.045) 38%, transparent 46%),
  linear-gradient(105deg, transparent 52%, rgba(198,157,85,.05) 60%, transparent 68%),
  radial-gradient(2px 2px at 76% 30%, rgba(232,221,200,.45), transparent 60%),
  radial-gradient(1100px 540px at 84% 112%, rgba(198,157,85,.24), transparent 70%),
  radial-gradient(900px 420px at 6% -20%, rgba(57,80,106,.2), transparent 66%),
  #0a1118}
body[data-page="google"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(circle at 88% 18%, transparent 88px, rgba(198,157,85,.22) 89.5px, transparent 92px),
  radial-gradient(circle at 88% 18%, transparent 54px, rgba(198,157,85,.3) 55.5px, transparent 58px),
  radial-gradient(3px 3px at 88% 18%, rgba(244,226,190,.85), transparent 60%),
  radial-gradient(1000px 500px at 70% 115%, rgba(198,157,85,.2), transparent 70%),
  radial-gradient(1000px 480px at 12% -24%, rgba(57,80,106,.3), transparent 64%),
  #0a1118}
body[data-page="entretien"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(2.5px 2.5px at 88% 16%, rgba(198,157,85,.7), transparent 60%),
  radial-gradient(2.5px 2.5px at 91% 16%, rgba(232,221,200,.5), transparent 60%),
  linear-gradient(to top, rgba(169,128,60,.12), transparent 140px),
  radial-gradient(1300px 600px at 50% 118%, rgba(198,157,85,.16), transparent 72%),
  radial-gradient(900px 420px at 8% -20%, rgba(57,80,106,.2), transparent 66%),
  #0a1118}
body[data-page="agences"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(800px 420px at 18% 108%, rgba(169,128,60,.2), transparent 68%),
  radial-gradient(800px 420px at 82% 108%, rgba(198,157,85,.24), transparent 68%),
  radial-gradient(2px 2px at 50% 34%, rgba(232,221,200,.4), transparent 60%),
  radial-gradient(900px 420px at 50% -24%, rgba(57,80,106,.22), transparent 66%),
  #0a1118}
body[data-page="repondeur"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(circle at 90% 80%, transparent 60px, rgba(198,157,85,.2) 61.5px, transparent 64px),
  radial-gradient(circle at 90% 80%, transparent 110px, rgba(198,157,85,.14) 111.5px, transparent 114px),
  radial-gradient(circle at 90% 80%, transparent 165px, rgba(198,157,85,.09) 166.5px, transparent 169px),
  radial-gradient(2.5px 2.5px at 90% 80%, rgba(244,226,190,.8), transparent 60%),
  radial-gradient(1000px 480px at 30% 115%, rgba(198,157,85,.18), transparent 70%),
  radial-gradient(900px 420px at 10% -22%, rgba(57,80,106,.24), transparent 66%),
  #0a1118}
body[data-page="boutique"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(2px 2px at 24% 36%, rgba(198,157,85,.45), transparent 60%),
  radial-gradient(2px 2px at 44% 24%, rgba(232,221,200,.4), transparent 60%),
  radial-gradient(2px 2px at 64% 40%, rgba(198,157,85,.4), transparent 60%),
  radial-gradient(2px 2px at 80% 28%, rgba(232,221,200,.35), transparent 60%),
  radial-gradient(1200px 560px at 50% 112%, rgba(198,157,85,.28), transparent 68%),
  radial-gradient(900px 420px at 8% -20%, rgba(57,80,106,.2), transparent 66%),
  #0a1118}
body[data-page="audit"] .tete-page{background:
  linear-gradient(to bottom, rgba(8,13,18,0) 70%, rgba(8,13,18,.6) 88%, #080d12 100%),
  radial-gradient(2px 2px at 78% 30%, rgba(232,221,200,.35), transparent 60%),
  radial-gradient(1400px 640px at 50% 130%, rgba(169,128,60,.12), transparent 74%),
  radial-gradient(1000px 460px at 50% -26%, rgba(57,80,106,.24), transparent 66%),
  #0a1118}

/* finitions pages intérieures : typo posée, liens nets */
body:not([data-scene3d]) .tete-page .sur-titre{letter-spacing:.14em;color:#c69d55}
body:not([data-scene3d]) h2{letter-spacing:-0.014em;text-wrap:balance}
a{color:#c69d55}
a:hover{color:#d9b26a}

/* ==========================================================================
   ACCUEIL — « ce que je fais, et pour qui »
   Des LIGNES séparées par un filet, pas des cartes : un bloc qui dit tout ne
   doit pas peser comme un catalogue. La situation vient en premier et en
   grand, le nom du produit ensuite, le prix de départ en regard.
   ========================================================================== */
.familles{list-style:none;counter-reset:fam;margin:0;border-top:1px solid var(--ligne)}
.familles>li{
  counter-increment:fam;display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.35rem 1.5rem;padding:1.8rem 0;border-bottom:1px solid var(--ligne);position:relative;
}
.familles .situation{
  grid-column:1;color:var(--blanc);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(1.08rem,2.3vw,1.3rem);line-height:1.35;max-width:38ch;margin:0;
}
.familles .prix-ligne{
  grid-column:2;justify-self:end;color:var(--or);font-weight:700;font-size:.95rem;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.familles .nom{
  grid-column:1/-1;color:var(--or-pale);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;margin-top:.3rem;
}
.familles .nom::before{content:"0" counter(fam) " · ";color:var(--or);font-weight:600}
.familles .quoi{grid-column:1/-1;color:var(--texte);font-size:.96rem;line-height:1.62;max-width:72ch;margin:.45rem 0 0}
.familles .lien-detail{grid-column:1/-1;justify-self:start;margin-top:.6rem}
@media(max-width:640px){
  .familles>li{grid-template-columns:1fr}
  .familles .prix-ligne{grid-column:1;justify-self:start;margin-top:.35rem}
}
.note-familles{
  margin-top:1.6rem;padding:1rem 1.2rem;border:1px dashed var(--ligne-forte);border-radius:var(--rayon-petit);
  color:var(--gris);font-size:.92rem;line-height:1.6;
}
.note-familles a{color:var(--or);font-weight:600;text-decoration:none}
.note-familles a:hover{color:var(--or-pale)}

/* six vignettes en 3 × 2 sur l'accueil */
.vitrine.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.vitrine.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vitrine.six{grid-template-columns:1fr}}

/* ==========================================================================
   ACCUEIL AVEC DÉCOR 3D — lisibilité d'abord
   La nappe de particules passe derrière les textes. Quand la toile est
   réellement là (body.avec-3d, posé par fond3d.js), chaque bloc de texte des
   sections transparentes reçoit un voile sombre : le décor reste visible
   autour, jamais sous les mots. Sans 3D, rien ne change.
   ========================================================================== */
body.avec-3d main section:not(.alt):not(#ce-que-je-fais) > .cadre-etroit,
body.avec-3d main section:not(.alt):not(#ce-que-je-fais) > .cadre{
  background:rgba(8,13,18,.66);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border:1px solid rgba(244,239,230,.08);
  border-radius:var(--rayon-grand);
  padding:clamp(1.4rem,3.2vw,2.8rem);
}
/* l'en-tête de section n'a plus besoin de sa propre marge haute dans le voile */
body.avec-3d main section:not(.alt):not(#ce-que-je-fais) > .cadre-etroit > .en-tete-sec:first-child,
body.avec-3d main section:not(.alt):not(#ce-que-je-fais) > .cadre > .en-tete-sec:first-child{margin-top:0}


/* ==========================================================================
   ACCUEIL — LA GRILLE DE TUILES (« ce que je fais »)
   Une idée par tuile, en grand. Surfaces sombres et translucides, angles
   très arrondis, beaucoup d'air : une page qui dit tout sans se lire
   comme un catalogue.
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.4vw,1.1rem);margin-top:2.2rem}
.tuile{
  grid-column:span 2;min-width:0;display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.6vw,2.2rem);border-radius:28px;
  background:rgba(17,25,34,.78);border:1px solid rgba(244,239,230,.08);
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(244,239,230,.05),0 24px 50px -36px rgba(0,0,0,.9);
  transition:transform .35s cubic-bezier(.19,1,.22,1),border-color .35s;
}
.tuile:hover{transform:translateY(-4px);border-color:rgba(198,157,85,.38)}
@media (prefers-reduced-motion:reduce){.tuile:hover{transform:none}}
.tuile.large{grid-column:span 4}
.tuile.phare{
  background:linear-gradient(160deg,rgba(198,157,85,.14),rgba(17,25,34,.82) 55%);
  border-color:rgba(198,157,85,.28);
}
.tuile-sur{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--or);margin:0 0 .9rem}
.tuile-titre{
  font-weight:700;letter-spacing:-.022em;line-height:1.12;color:var(--blanc);
  font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 .8rem;max-width:18ch;
}
.tuile.large .tuile-titre{font-size:clamp(1.6rem,3vw,2.4rem);max-width:20ch}
.tuile-texte{color:var(--texte);font-size:.95rem;line-height:1.6;margin:0;max-width:46ch}
.tuile-pied{margin:auto 0 0;padding-top:1.4rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap}
.tuile-prix{
  font-weight:700;color:var(--or);letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.35rem,2.4vw,1.9rem);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tuile .lien-detail{margin-top:0}
.tuile.bande{
  grid-column:span 6;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem 2rem;
  background:none;border:1px dashed var(--ligne-forte);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;padding:1.1rem 1.5rem;border-radius:18px;
}
.tuile.bande:hover{transform:none;border-color:var(--ligne-forte)}
.tuile.bande p{margin:0;color:var(--gris);font-size:.92rem;line-height:1.55;max-width:70ch}
.tuile.bande b{color:var(--texte);font-weight:600}
.tuile.bande .lien-detail{white-space:nowrap}
.chapo.centre{text-align:center;margin-inline:auto}
@media(max-width:960px){
  .tuile,.tuile.large{grid-column:span 3}
  .tuile.bande{grid-column:span 6;flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){.tuile,.tuile.large{grid-column:span 6}}


/* ==========================================================================
   PAGES INTÉRIEURES — respiration et lisibilité
   Le premier bloc après l'en-tête remonte légèrement sur lui : la page
   s'ouvre au lieu d'empiler des bandes. Les sections alternées gagnent un
   filet doré en tête pour marquer le changement de sujet.
   ========================================================================== */
body:not([data-scene3d]) .tete-page + section{padding-top:clamp(3.2rem,6vw,5rem)}
body:not([data-scene3d]) section.alt{position:relative}
body:not([data-scene3d]) section.alt::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,157,85,.30) 30%,rgba(198,157,85,.30) 70%,transparent);
}
/* l'en-tête de section : le sur-titre doré prend de l'air */
body:not([data-scene3d]) .en-tete-sec{gap:.7rem}
body:not([data-scene3d]) .en-tete-sec h2{font-size:clamp(1.55rem,3.6vw,2.5rem)}
/* les pages légales méritent le même soin en tête */
.page-legale main{position:relative}
.page-legale h1{max-width:22ch}

/* ==========================================================================
   ACCUEIL AVEC 3D — le texte du héros reste net sur la Terre
   La planète est centrée et large ; sans voile, les particules d'or passent
   derrière les lettres et le titre perd son contraste. Un dégradé radial
   très doux assombrit juste la zone du texte, sans masquer le décor autour.
   ========================================================================== */
body.avec-3d .heros .dedans::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1320px,146%);height:min(860px,158%);
  background:radial-gradient(closest-side,rgba(8,13,18,.90),rgba(8,13,18,.70) 52%,rgba(8,13,18,.30) 70%,transparent 82%);
  pointer-events:none;
}