/* La Cuadra — feuille de style commune à toutes les pages.
   Jetons et composants repris de la planche d'identité (design/identite/planche.html). */

/* ============ Jetons ============ */
:root{
  --noir:#0B0B0C;
  --graphite:#141415;
  --graphite-2:#1B1B1D;
  --filet:#2A2826;
  --ivoire:#ECE7DF;
  --pierre:#A39E96;
  --cendre:#847F77;
  --accent:#C8B28A;
  --accent-rgb:200,178,138;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Jost',system-ui,sans-serif;
  --lent:cubic-bezier(.2,.7,.2,1);
  --gouttiere:clamp(20px,5vw,64px);
  --largeur:1240px;
  --en-tete:84px;
  --etalonnage:saturate(.42) contrast(1.12) brightness(.74);
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
/* chiffres alignés partout (« 911 » et non « 9ıı ») — le raccourci font: des classes les remettrait à zéro */
*{font-variant-numeric:lining-nums !important}
[hidden]{display:none !important}
h1,h2,h3,.manifeste-texte{text-wrap:balance}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--pierre);font:300 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.fige{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(var(--accent-rgb),.3);color:var(--ivoire)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}

/* grain très discret, fixe — la matière d'une pellicule, sans scintillement */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ============ Typographie ============ */
.surtitre{margin:0;font:400 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.titre-section{margin:18px 0 0;font:300 clamp(34px,4.6vw,56px)/1.1 var(--serif);letter-spacing:-.005em;color:var(--ivoire)}
.titre-section em,.page-titre em,.hero-titre em{font-style:italic;color:var(--accent)}
.intro{margin:24px 0 0;max-width:58ch;font-size:clamp(15px,1.3vw,17px)}
.titre-carte{margin:6px 0 0;font:400 clamp(24px,2.3vw,30px)/1.15 var(--serif);color:var(--ivoire)}
.legende{margin:0;font:400 12px/1.6 var(--sans);letter-spacing:.08em;color:var(--cendre)}

/* ============ Boutons & liens ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:17px 32px;border:1px solid rgba(var(--accent-rgb),.6);color:var(--ivoire);font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:transparent;transition:background .6s var(--lent),color .6s var(--lent),border-color .6s var(--lent)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--noir)}
.btn-plein{background:var(--ivoire);border-color:var(--ivoire);color:var(--noir)}
.btn-petit{padding:12px 20px;font-size:10px}
.lien{position:relative;display:inline-block;padding-bottom:8px;font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ivoire);white-space:nowrap;background:none;border:0;cursor:pointer}
.lien::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:1px;background:var(--accent);transition:width .8s var(--lent)}
.lien:hover::after,a:hover .lien::after{width:100%}

/* ============ Statuts & étiquettes ============ */
.statut{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ivoire);background:rgba(11,11,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(236,231,223,.14)}
.statut::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pierre)}
.statut-disponible::before{background:var(--accent)}
.statut-arrivage::before{background:var(--accent);animation:pouls 2.6s ease-in-out infinite}
.statut-reserve::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ivoire)}
.statut-vendu{color:var(--accent)}
.statut-vendu::before{background:var(--accent)}
@keyframes pouls{0%,100%{opacity:1}50%{opacity:.25}}
/* contenu d'exemple : disparaît dès que l'entrée est remplacée par une vraie */
.exemple{position:absolute;top:18px;right:18px;z-index:4;padding:6px 10px;border:1px dashed rgba(236,231,223,.4);background:rgba(11,11,12,.6);font:400 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pierre);pointer-events:none}
.exemple-en-ligne{display:inline-block;margin:10px 0 0;padding:5px 9px;border:1px dashed rgba(236,231,223,.35);font:400 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cendre)}

/* ============ En-tête & navigation ============ */
.en-tete{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background .6s var(--lent),border-color .6s var(--lent)}
.en-tete.solide,.menu-ouvert .en-tete{background:rgba(11,11,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--filet)}
.en-tete-barre{display:flex;align-items:center;gap:clamp(24px,3vw,44px);height:var(--en-tete);max-width:1440px;margin:0 auto;padding:0 var(--gouttiere)}
.marque{display:flex;align-items:center;gap:16px;margin-right:auto}
.marque img{height:42px;width:auto}
.marque-nom{font:400 12px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ivoire);white-space:nowrap}
.nav{display:flex;gap:clamp(20px,2.6vw,38px)}
.nav a{position:relative;padding:8px 0;font:400 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pierre);white-space:nowrap;transition:color .5s var(--lent)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--lent)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ivoire)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-bouton{display:none;align-items:center;gap:12px;padding:10px 0;background:none;border:0;cursor:pointer;font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ivoire)}
/* Bouton du menu : deux traits qui se croisent en ✕, et « Menu » qui cède la place à « Fermer ».
   Les deux mots sont superposés dans la même case : le bouton garde sa largeur, rien ne saute. */
.menu-bouton-traits{position:relative;width:20px;height:9px}
.menu-bouton-traits i{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .6s var(--lent),right .6s var(--lent)}
.menu-bouton-traits i:first-child{top:0}
.menu-bouton-traits i:last-child{bottom:0;right:7px}
.menu-bouton[aria-expanded="true"] .menu-bouton-traits i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] .menu-bouton-traits i:last-child{right:0;transform:translateY(-4px) rotate(-45deg)}
.menu-bouton-texte{display:inline-grid;height:1.1em;overflow:hidden;line-height:1.1}
.menu-bouton-texte span{grid-area:1/1;transition:transform .6s var(--lent),opacity .6s var(--lent)}
.menu-bouton-texte span+span{transform:translateY(110%);opacity:0}
.menu-bouton[aria-expanded="true"] .menu-bouton-texte span:first-child{transform:translateY(-110%);opacity:0}
.menu-bouton[aria-expanded="true"] .menu-bouton-texte span+span{transform:none;opacity:1}

/* Menu plein écran : il descend comme un rideau, puis les liens arrivent un à un (--i : leur rang)
   et leur filet se trace de gauche à droite. À la fermeture, les liens s'effacent d'abord, vite,
   puis le rideau remonte ; main.js masque le menu une fois le rideau remonté. */
.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--en-tete) + 24px) var(--gouttiere) 40px;overflow:hidden;background:var(--noir);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.3,1) .12s}
.menu.menu--ouvert{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.menu::before{content:"";position:absolute;right:-22%;bottom:-8%;width:min(86vw,520px);aspect-ratio:485/506;background:url("../images/marque/cheval-monogramme.png") center/contain no-repeat;opacity:0;transform:scale(1.08);transition:opacity .4s,transform .4s;pointer-events:none}
.menu--ouvert::before{opacity:.045;transform:none;transition:opacity 1.6s var(--lent) .3s,transform 2.2s var(--lent) .3s}
.menu-liens,.menu-pied{position:relative}
.menu-liens a{position:relative;display:block;padding:10px 0;font:300 clamp(34px,8.5vw,54px)/1.25 var(--serif);color:var(--ivoire)}
.menu-liens a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filet);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.menu-liens a[aria-current="page"]{font-style:italic;color:var(--accent)}
.menu-pied{display:flex;flex-wrap:wrap;align-items:center;gap:22px 32px;margin-top:44px}
.menu-liens a,.menu-pied{opacity:0;transform:translateY(26px);filter:blur(5px);transition:opacity .3s,transform .3s,filter .3s}
.menu--ouvert .menu-liens a,.menu--ouvert .menu-pied{opacity:1;transform:none;filter:blur(0);
  transition:opacity 1s var(--lent),transform 1.1s var(--lent),filter 1s var(--lent);transition-delay:calc(.32s + var(--i,0) * .08s)}
.menu--ouvert .menu-liens a::after{transform:scaleX(1);transition:transform 1.2s var(--lent) calc(.45s + var(--i,0) * .08s)}

/* ============ Accueil : vidéo en boucle, accélérée par le défilement ============ */
/* La page défile dès le premier geste : la vidéo glisse un peu moins vite qu'elle (profondeur), le titre
   s'efface et le voile s'éclaircit — transformations posées par le script. */
.hero-video{position:relative;height:100svh;overflow:hidden}
.hero-scene{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--noir)}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:var(--noir);will-change:transform}
/* voile sombre au repos, pour le titre ; il s'éclaircit pendant le défilement (--voile, posé par le script) */
.hero-voile{position:absolute;inset:0;pointer-events:none;opacity:var(--voile,1);background:radial-gradient(ellipse 75% 65% at 50% 45%,rgba(11,11,12,.5),rgba(11,11,12,.82) 100%)}
.hero-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;pointer-events:none;background:linear-gradient(transparent,var(--noir))}
.hero-contenu{position:relative;z-index:2;margin:auto;padding:var(--en-tete) var(--gouttiere) 24px;text-align:center;text-shadow:0 1px 28px rgba(11,11,12,.75);will-change:opacity,transform}
.hero-contenu .hero-titre,.hero-contenu .hero-texte{margin-left:auto;margin-right:auto}
/* dans le flux, sous les boutons : ne peut plus les chevaucher, quelle que soit la hauteur d'écran */
.hero-indice{position:relative;z-index:2;flex:none;margin:0 auto 22px;display:flex;flex-direction:column;align-items:center;gap:12px;font:400 9px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--pierre)}
.hero-indice::after{content:"";width:1px;height:34px;background:linear-gradient(var(--pierre),transparent);animation:indice 2.6s ease-in-out infinite}
@media (max-height:700px){.hero-indice{display:none}}
@keyframes indice{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}}
.hero-titre{margin:22px 0 0;max-width:780px;font:300 clamp(40px,min(6.8vw,10vh),98px)/1.01 var(--serif);letter-spacing:-.015em;color:var(--ivoire)}
.hero-texte{margin:28px 0 0;max-width:44ch;font-size:clamp(15px,1.4vw,17px)}
.hero-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px 36px;margin-top:42px}
.bandeau{position:relative;z-index:2;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(236,231,223,.1);background:rgba(11,11,12,.55)}
.bandeau-piste{display:inline-flex;padding:14px 0;animation:defile 80s linear infinite;font:400 10px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--cendre)}
.bandeau-piste span{padding:0 28px}
.bandeau-piste i{font-style:normal;color:var(--accent)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ En-tête des pages intérieures ============ */
.page-tete{position:relative;overflow:hidden;padding:calc(var(--en-tete) + clamp(72px,13vh,140px)) 0 clamp(64px,10vh,110px);border-bottom:1px solid var(--filet)}
.page-tete::before{content:"";position:absolute;right:-4%;top:50%;width:min(46vw,540px);aspect-ratio:485/506;transform:translateY(-42%);background:url("../images/marque/cheval-monogramme.png") center/contain no-repeat;opacity:.045;pointer-events:none}
.page-titre{margin:22px 0 0;font:300 clamp(46px,7vw,96px)/1.02 var(--serif);letter-spacing:-.015em;color:var(--ivoire)}

/* ============ Sections ============ */
.section{position:relative;padding:clamp(88px,13vh,150px) 0}
.page-tete + .section{padding-top:clamp(56px,8vh,88px)}
.filet-haut{border-top:1px solid var(--filet)}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;margin-bottom:clamp(44px,7vh,72px)}

/* Manifeste */
.manifeste{overflow:hidden;text-align:center}
.manifeste-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:var(--etalonnage)}
.manifeste::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 70% at 50% 50%,rgba(11,11,12,.5),var(--noir) 85%)}
.manifeste .conteneur{position:relative;z-index:2}
.manifeste-texte{margin:30px auto 0;max-width:22ch;font:300 clamp(30px,4.4vw,58px)/1.25 var(--serif);color:var(--ivoire)}
.manifeste .intro{margin:34px auto 0;max-width:52ch}

/* Expérience */
.experience{position:relative;min-height:84svh;display:flex;align-items:flex-end;overflow:hidden}
.experience-image{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:center 40%;filter:saturate(.5) contrast(1.1) brightness(.62)}
.experience-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92) 10%,rgba(11,11,12,.25) 65%),linear-gradient(180deg,var(--noir) 0%,transparent 30%,transparent 55%,rgba(11,11,12,.94) 100%)}
.experience-contenu{position:relative;z-index:2;width:100%;padding-top:clamp(140px,22vh,220px);padding-bottom:clamp(72px,12vh,130px)}
.experience .titre-section{max-width:17ch}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);max-width:1040px;margin:52px 0 0;padding:0;list-style:none}
.etape{padding-top:22px;border-top:1px solid rgba(236,231,223,.18)}
.etape-num{font:italic 300 24px/1 var(--serif);color:var(--accent)}
.etape h3{margin:16px 0 10px;font:400 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire)}
.etape p{margin:0;font-size:15px}

/* ============ Cartes « Annonce » ============ */
.grille-annonces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px)}
.carte-annonce{position:relative;display:flex;flex-direction:column}
.carte-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--graphite)}
.carte-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.8s var(--lent);filter:var(--etalonnage)}
.carte-annonce:hover .carte-media img{transform:scale(1.045)}
.carte-media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 80% at 50% 55%,transparent 45%,rgba(11,11,12,.7) 100%),linear-gradient(180deg,rgba(11,11,12,.35),transparent 30%,transparent 65%,rgba(11,11,12,.55))}
.carte-media .statut{position:absolute;top:16px;left:16px;z-index:3}
.carte-corps{flex:1;display:flex;flex-direction:column;padding:22px 2px 0}
.specs{display:flex;flex-wrap:wrap;gap:6px 0;margin:12px 0 20px;padding:0;list-style:none;font:400 12px/1.6 var(--sans);letter-spacing:.1em;color:var(--pierre)}
.specs li+li::before{content:"·";margin:0 12px;color:var(--cendre)}
.carte-pied{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--filet)}
.prix{font:300 24px/1 var(--serif);color:var(--ivoire)}
.prix--discret{font-style:italic;font-size:19px}
.vide{grid-column:1 / -1;padding:56px 0;text-align:center;border:1px solid var(--filet)}
/* « Prochainement » : tient la place des annonces tant qu'aucune voiture n'est en vente.
   Monogramme en filigrane, point qui pulse comme un arrivage, filet doré qui parcourt le bas du cadre. */
.bientot{position:relative;grid-column:1 / -1;overflow:hidden;padding:clamp(56px,9vw,112px) var(--gouttiere);border:1px solid var(--filet);background:var(--graphite);text-align:center}
.bientot::before{content:"";position:absolute;left:50%;top:50%;width:min(72vw,460px);aspect-ratio:485/506;transform:translate(-50%,-50%);background:url("../images/marque/cheval-monogramme.png") center/contain no-repeat;opacity:.04;pointer-events:none}
.bientot::after{content:"";position:absolute;left:0;bottom:-1px;width:32%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:bientot-filet 5s var(--lent) infinite}
@keyframes bientot-filet{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
.bientot > *{position:relative}
.bientot-surtitre{display:inline-flex;align-items:center;gap:12px}
.bientot-surtitre::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pouls 2.6s ease-in-out infinite}
.bientot-titre{margin:22px auto 0;max-width:20ch;font:300 clamp(34px,5vw,60px)/1.08 var(--serif);letter-spacing:-.01em;color:var(--ivoire)}
.bientot-titre em{font-style:italic;color:var(--accent)}
.bientot-texte{margin:26px auto 0;max-width:46ch;font-size:clamp(15px,1.3vw,17px)}
.bientot-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px 36px;margin-top:40px}

/* ============ Cartes « Collection » (vendus) ============ */
.grille-collection{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,28px)}
.grille-collection > *{grid-column:span 2}
/* rythme éditorial : grande, petite / petite, grande… */
.grille-collection:not(.filtree) > :nth-child(4n+1),
.grille-collection:not(.filtree) > :nth-child(4n+4){grid-column:span 4}
.grille-collection:not(.filtree) > :nth-child(4n+2),
.grille-collection:not(.filtree) > :nth-child(4n+3){grid-column:span 2}
.grille-collection:not(.filtree) > :nth-child(4n+1):last-child,
.grille-collection:not(.filtree) > :nth-child(4n+3):last-child{grid-column:1 / -1}
.collection-apercu{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(16px,2vw,28px)}
.collection-apercu:has(> :nth-child(2):last-child){grid-template-columns:2fr 1fr}
.collection-apercu > :only-child{grid-column:1 / -1}
.carte-collection{position:relative;display:block;overflow:hidden;min-height:clamp(380px,40vw,560px);background:var(--graphite)}
.carte-collection > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.8s var(--lent);filter:var(--etalonnage)}
.carte-collection:hover > img{transform:scale(1.045)}
.carte-collection .voile{position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 50% 50%,transparent 40%,rgba(11,11,12,.65) 100%),linear-gradient(180deg,rgba(11,11,12,.45),transparent 28%,transparent 45%,rgba(11,11,12,.94))}
.carte-collection .legende-carte{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.4vw,32px)}
.carte-collection .titre-carte{margin-top:16px}
/* Le mur : toutes les autres voitures livrées, en rangées qui défilent en sens alternés.
   Chaque photo porte sa marge à droite (pas de gap) : les deux moitiés de la piste sont exactement
   égales, et la boucle à -50 % ne saute pas. Durée de la boucle : calculée par main.js. */
.mur-tete{margin-top:clamp(88px,13vh,150px)}
.mur{--mur-h:clamp(170px,20vw,280px);display:grid;gap:12px;margin-top:clamp(40px,6vh,64px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mur-rangee{overflow:hidden}
.mur-piste{display:flex;width:max-content;animation:defile var(--duree,120s) linear infinite}
.mur-rangee--inverse .mur-piste{animation-direction:reverse}
.mur-rangee:hover .mur-piste,.mur-rangee:focus-within .mur-piste,.mur--arrete .mur-piste{animation-play-state:paused}
.mur-photo{flex:none;height:var(--mur-h);margin:0 12px 0 0;padding:0;border:0;overflow:hidden;background:var(--graphite);cursor:zoom-in}
.mur-photo:focus-visible{outline-offset:-3px}
.mur-photo img{width:auto;max-width:none;height:100%;opacity:0;filter:var(--etalonnage);transition:opacity .9s var(--lent),filter 1.2s var(--lent),transform 1.8s var(--lent)}
.mur-photo img.chargee{opacity:1}
.mur-photo:hover img,.mur-photo:focus-visible img{filter:none;transform:scale(1.04)}
/* mouvement réduit : une grille fixe, sans défilement */
.mur--fixe{-webkit-mask-image:none;mask-image:none;padding:0 var(--gouttiere)}
.mur--fixe .mur-piste{flex-wrap:wrap;justify-content:center;gap:12px;width:auto;animation:none}
.mur--fixe .mur-photo{margin:0}
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.filtres-bloc{margin-bottom:clamp(32px,5vh,48px)}
/* plus aucun filtre à proposer (une seule valeur, ou aucune annonce) : le bloc disparaît avec eux */
.filtres-bloc:not(:has(.filtres:not([hidden]))){display:none}
.filtres-titre{min-width:84px;margin-right:6px;font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cendre)}
.filtres button{padding:10px 16px;background:none;border:1px solid var(--filet);cursor:pointer;font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--pierre);transition:border-color .5s var(--lent),color .5s var(--lent)}
.filtres button:hover{color:var(--ivoire)}
.filtres button[aria-pressed="true"]{border-color:rgba(var(--accent-rgb),.7);color:var(--ivoire)}

/* ============ Page d'une annonce ============ */
.annonce-page{padding-top:calc(var(--en-tete) + clamp(28px,5vh,56px))}
.fil{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,3vh,32px);font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cendre)}
.fil a{color:var(--pierre);transition:color .5s var(--lent)}
.fil a:hover{color:var(--ivoire)}
.annonce{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.galerie-principale{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;overflow:hidden;background:var(--graphite);border:0;cursor:zoom-in}
.galerie-principale img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--lent)}
.galerie-principale img.charge{opacity:0}
.galerie-principale .statut{position:absolute;top:18px;left:18px;z-index:3}
.galerie-agrandir{position:absolute;right:18px;bottom:18px;z-index:3;padding:8px 12px;background:rgba(11,11,12,.62);font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire)}
.galerie-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.galerie-vignettes button{position:relative;aspect-ratio:4/3;padding:0;overflow:hidden;background:var(--graphite);border:0;cursor:pointer;opacity:.55;transition:opacity .5s var(--lent)}
.galerie-vignettes button:hover,.galerie-vignettes button[aria-current="true"]{opacity:1}
.galerie-vignettes button[aria-current="true"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--accent)}
.galerie-vignettes img{width:100%;height:100%;object-fit:cover}
.annonce-panneau{position:sticky;top:calc(var(--en-tete) + 24px)}
.annonce-titre{margin:14px 0 0;font:300 clamp(40px,4.4vw,60px)/1.02 var(--serif);letter-spacing:-.01em;color:var(--ivoire)}
.annonce-version{margin:12px 0 0;font-size:15px}
.annonce-prix{margin:28px 0 0;font:300 clamp(32px,3vw,42px)/1 var(--serif);color:var(--ivoire)}
.annonce-prix--discret{font-style:italic;font-size:clamp(24px,2.2vw,30px)}
.annonce-cles{display:grid;grid-template-columns:1fr 1fr;margin:28px 0 0;border-top:1px solid var(--filet)}
.annonce-cles div{padding:16px 0;border-bottom:1px solid var(--filet)}
.annonce-cles div:nth-child(odd){padding-right:16px}
.annonce-cles dt{font:400 10px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cendre)}
.annonce-cles dd{margin:6px 0 0;font-size:15px;color:var(--ivoire)}
.annonce-actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.annonce-actions .btn{width:100%}
.annonce-garage{margin-top:28px;padding-top:22px;border-top:1px solid var(--filet)}
.annonce-garage p{margin:6px 0 12px;color:var(--ivoire)}
.annonce-garage .legende{margin:0;color:var(--cendre)}
.annonce-ref{margin-top:18px}
.annonce-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(40px,6vw,96px)}
.annonce-details .surtitre{margin-bottom:22px}
.fiche{margin:0;border-top:1px solid var(--filet)}
.fiche div{display:grid;grid-template-columns:minmax(120px,1fr) 1.4fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--filet)}
.fiche dt{font:400 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cendre)}
.fiche dd{margin:0;font-size:15px;color:var(--ivoire)}
.annonce-description{margin:0 0 clamp(40px,6vh,64px);font-size:clamp(16px,1.4vw,18px);line-height:1.85}
.equipements{columns:2;column-gap:32px;margin:0;padding:0;list-style:none}
.equipements li{break-inside:avoid;padding:9px 0 9px 22px;position:relative;font-size:15px}
.equipements li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:1px;background:var(--accent)}
/* texte d'une annonce rédigée dans Consigno : rubriques, sous-rubriques, paragraphes */
.texte-bloc + .texte-bloc,.annonce-description + .texte-bloc{margin-top:clamp(40px,6vh,64px)}
.texte-sous-rubrique{margin:26px 0 4px;font:500 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire)}
.surtitre + .texte-sous-rubrique{margin-top:0}
.annonce-details .annonce-description:has(+ .annonce-description){margin-bottom:18px}
.texte-para{margin:14px 0 0;font-size:15px;line-height:1.75}
.texte-bloc .equipements + .texte-para,.texte-bloc .fiche + .texte-para{margin-top:18px}
.introuvable{padding:calc(var(--en-tete) + 140px) 0 140px;text-align:center}
.introuvable .btn{margin-top:36px}

/* ============ Confiance : chiffres & avis ============ */
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 clamp(64px,9vh,96px);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chiffre{padding:clamp(30px,4.5vh,48px) 16px;text-align:center}
.chiffre+.chiffre{border-left:1px solid var(--filet)}
.chiffre-valeur{font:300 clamp(42px,5vw,64px)/1 var(--serif);color:var(--ivoire)}
.chiffre-valeur em{font-style:normal;color:var(--accent)}
.chiffre-libelle{margin-top:14px;font:400 10px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cendre)}
.grille-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.avis{position:relative;display:flex;flex-direction:column;margin:0;padding:clamp(32px,3.4vw,46px);border:1px solid var(--filet);background:var(--graphite)}
.avis::before{content:"\201C";display:block;height:34px;font:300 92px/.62 var(--serif);color:var(--accent);opacity:.45}
.avis blockquote{margin:18px 0 0;font:italic 300 clamp(21px,1.9vw,25px)/1.4 var(--serif);color:var(--ivoire)}
.avis figcaption{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:30px}
.avis .exemple{top:20px;right:20px}
.temoin{font:400 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ivoire)}
.grille-avis--page{grid-template-columns:repeat(2,1fr)}
.grille-avis--page > :first-child{grid-column:1 / -1;padding:clamp(40px,6vw,80px)}
.grille-avis--page > :first-child blockquote{max-width:30ch;font-size:clamp(28px,3.4vw,44px);line-height:1.3}
.note-avis{margin-top:28px}

/* ============ Le garage ============ */
.garage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.garage-bloc{padding:26px 0;border-top:1px solid var(--filet)}
.garage-bloc:first-child{padding-top:0;border-top:0}
.garage-bloc .surtitre{margin-bottom:16px}
.garage-adresse{margin:0;font:300 clamp(28px,2.8vw,36px)/1.25 var(--serif);color:var(--ivoire)}
.garage-adresse + .lien{margin-top:18px}
.horaires{margin:0}
.horaires div{display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px solid var(--filet)}
.horaires dt{color:var(--pierre)}
.horaires dd{margin:0;color:var(--ivoire)}
.garage-note{margin:14px 0 0;font:italic 300 19px/1.5 var(--serif);color:var(--ivoire)}
.garage-contacts{margin:0;padding:0;list-style:none}
.garage-contacts li{display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px solid var(--filet)}
.garage-contacts a{color:var(--ivoire);transition:color .5s var(--lent)}
.garage-contacts a:hover{color:var(--accent)}
.garage-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.garage-actions .btn{flex:1 1 auto}
/* Page Le garage : la photo en fond, sur la droite, fondue dans le noir vers le texte et en haut et en bas */
.garage-section{position:relative;overflow:hidden}
.garage-fond{position:absolute;top:-6%;right:0;width:58%;height:112%;object-fit:cover;object-position:50% 58%;filter:saturate(.5) contrast(1.08) brightness(.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 58%),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 58%),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.garage-section .conteneur{position:relative;z-index:2}
/* ============ Mentions légales ============ */
.legal{max-width:860px}
.legal-bloc{padding:clamp(32px,5vh,48px) 0;border-top:1px solid var(--filet)}
.legal-bloc:first-child{padding-top:0;border-top:0}
.legal-titre{margin:0 0 22px;font:300 clamp(26px,2.6vw,34px)/1.2 var(--serif);color:var(--ivoire)}
.legal p{max-width:68ch;margin:0 0 14px}
.legal p:last-child{margin-bottom:0}
.legal a:not(.lien){color:var(--ivoire);border-bottom:1px solid rgba(var(--accent-rgb),.5);transition:color .5s var(--lent),border-color .5s var(--lent)}
.legal a:not(.lien):hover{color:var(--accent);border-color:var(--accent)}
.legal-telecharger{margin-top:30px}
.legal-sommaire{padding-bottom:clamp(32px,5vh,48px)}
.legal-sommaire ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:article;columns:2;column-gap:40px}
.legal-sommaire li{counter-increment:article;break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--filet)}
.legal-sommaire li::before{content:counter(article) ".";display:inline-block;min-width:30px;font:italic 300 17px/1 var(--serif);color:var(--accent)}
.legal .legal-sommaire a{border:0;color:var(--pierre)}
.legal .legal-sommaire a:hover{color:var(--ivoire)}
.legal-num{display:block;margin-bottom:8px;font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.legal strong{font-weight:400;color:var(--ivoire)}
.legal-bloc[id]{scroll-margin-top:calc(var(--en-tete) + 24px)}
.legal-encart{padding:18px 22px;border-left:1px solid var(--accent);background:var(--graphite);color:var(--ivoire)}
.pied-bas a{transition:color .5s var(--lent)}
.pied-bas a:hover{color:var(--ivoire)}
.garage-accueil{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end}

/* ============ Bandes d'appel ============ */
.bande{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px 48px;padding:clamp(36px,5vw,64px);border:1px solid var(--filet);background:var(--graphite)}
.bande .titre-section{margin-top:14px;font-size:clamp(28px,3.4vw,42px)}
.bande .intro{margin-top:14px}
.bande-espace{margin-top:clamp(72px,11vh,120px)}

/* Rejoindre le cercle */
.cercle{overflow:hidden;text-align:center}
.cercle-filigrane{position:absolute;top:50%;left:50%;width:min(56vw,600px);transform:translate(-50%,-50%);opacity:.035;pointer-events:none}
.cercle .conteneur{position:relative}
.cercle .titre-section{font-size:clamp(40px,6vw,76px)}
.cercle .intro{margin-left:auto;margin-right:auto}
.reseaux{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:48px auto 0;text-align:left}
.reseau{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;border:1px solid var(--filet);transition:border-color .6s var(--lent),background .6s var(--lent)}
.reseau:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
.reseau--priorite{border-color:rgba(var(--accent-rgb),.55)}
.reseau-nom{display:flex;align-items:center;gap:14px;font:400 13px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ivoire)}
.reseau-detail{font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--cendre)}
.pastille{padding:5px 9px;border:1px solid rgba(var(--accent-rgb),.6);font:400 9px/1 var(--sans);letter-spacing:.22em;color:var(--accent)}

/* ============ Pied de page ============ */
.pied{padding:clamp(64px,10vh,110px) 0 36px;border-top:1px solid var(--filet)}
.pied-haut{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:40px;align-items:start}
.pied-logo{height:72px;width:auto}
.pied-titre{margin:0 0 16px;font:400 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--cendre)}
.pied-liste{margin:0;padding:0;list-style:none}
.pied-liste a{display:inline-block;padding:5px 0;font-size:15px;color:var(--pierre);transition:color .5s var(--lent)}
.pied-liste a:hover{color:var(--ivoire)}
.pied-garage{margin:0;font-size:15px;line-height:1.7;color:var(--pierre)}
.pied-garage a{transition:color .5s var(--lent)}
.pied-garage a:hover{color:var(--ivoire)}
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:clamp(56px,8vh,88px);padding-top:24px;border-top:1px solid var(--filet);font:400 11px/1.6 var(--sans);letter-spacing:.08em;color:var(--cendre)}

/* ============ Visionneuse de photos ============ */
.visionneuse{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:76px clamp(16px,7vw,110px) 40px;background:#080809}
.visionneuse-figure{display:flex;flex-direction:column;align-items:center;max-width:100%;margin:0}
.visionneuse img{max-width:100%;max-height:calc(100svh - 190px);object-fit:contain;transition:opacity .5s var(--lent)}
.visionneuse img.charge{opacity:0}
.visionneuse figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;width:100%;margin-top:18px}
.visionneuse-titre{font:400 22px/1.2 var(--serif);color:var(--ivoire)}
.visionneuse-fermer{position:absolute;top:30px;right:clamp(16px,4vw,48px)}
.visionneuse-nav{position:absolute;top:50%;width:52px;height:52px;transform:translateY(-50%);border:1px solid rgba(236,231,223,.25);border-radius:50%;background:rgba(11,11,12,.5);cursor:pointer;font:300 28px/1 var(--serif);color:var(--ivoire);transition:border-color .5s var(--lent)}
.visionneuse-nav:hover{border-color:var(--accent)}
.visionneuse-prec{left:clamp(8px,2vw,32px)}
.visionneuse-suiv{right:clamp(8px,2vw,32px)}

/* ============ Nos services : carnet à feuilleter ============
   Sans JavaScript, .carnet-sources s'affiche en simple liste. Avec, main.js construit le carnet :
   double page au-delà de 760 px (photo à gauche, texte à droite), page simple en dessous.
   Chaque feuille pivote autour de la reliure (rotateY) ; .tournee = feuille passée à gauche. */
.carnet-consigne{display:inline-flex;align-items:center;gap:12px;margin:0;font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--cendre)}
.carnet-consigne::after{content:"→";font-size:14px;letter-spacing:0;color:var(--accent);animation:carnet-indice 2.4s var(--lent) infinite}
@keyframes carnet-indice{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.carnet{position:relative;max-width:1080px;margin:0 auto}
.carnet-sources{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0;padding:0;list-style:none}
.carnet-sources > li{padding:28px;border:1px solid var(--filet);background:var(--graphite)}
.carnet-sources h3{margin:0 0 10px;font:300 28px/1.2 var(--serif);color:var(--ivoire)}
.carnet-sources ul{margin:14px 0 0;padding-left:18px}
.js .carnet-sources{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.carnet-scene{perspective:2600px;perspective-origin:50% 45%}
.carnet-livre{position:relative;width:100%;aspect-ratio:8/5;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer;box-shadow:0 34px 70px rgba(0,0,0,.55)}
.carnet-page{position:absolute;top:0;width:50%;height:100%;overflow:hidden;background:#141416}
.carnet-fond-gauche{left:0}
.carnet-fond-droite{left:50%}
.feuille{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.45,.05,.2,1)}
.feuille.tournee{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;overflow:hidden;background:#141416;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face-arriere{transform:rotateY(180deg)}
/* ombre de la reliure : à gauche des pages de droite, à droite des pages de gauche */
.face::before,.carnet-page::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 9%)}
.face-arriere::before,.carnet-fond-gauche::before{background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0) 9%)}
/* la page s'assombrit pendant qu'elle tourne */
.face::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.1));opacity:0;transition:opacity .6s ease}
.feuille.en-mouvement .face::after{opacity:1}
@media (hover:hover){
  .carnet--double .feuille:not(.tournee):not(.en-mouvement):hover{transform:rotateY(-8deg)}
  .carnet--double .feuille.tournee:not(.en-mouvement):hover{transform:rotateY(-172deg)}
}

/* contenu des pages */
.page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3.4vw,50px)}
.page-entete{margin:0;font:400 9px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--cendre)}
.page-folio{margin:0;text-align:center;font:italic 300 15px/1 var(--serif);color:var(--cendre)}
.page-num{margin:0;font:italic 300 clamp(26px,2.6vw,36px)/1 var(--serif);color:var(--accent)}
.page-titre-service{margin:12px 0 0;font:300 clamp(28px,3.2vw,46px)/1.08 var(--serif);color:var(--ivoire)}
.page-texte{margin:16px 0 0;max-width:40ch;font-size:clamp(14px,1.15vw,16px);line-height:1.7}
.page-points{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--filet)}
.page-points li{padding:9px 0;border-bottom:1px solid var(--filet);font:400 10px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ivoire)}
.page-photo{padding:0}
.page-photo img,.page-service-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--etalonnage)}
.page-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 55%,rgba(11,11,12,.85))}
.page-legende{position:absolute;left:clamp(22px,3vw,40px);bottom:clamp(20px,2.6vw,34px);z-index:2;margin:0;font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ivoire)}
.page-legende em{margin-right:10px;font:italic 300 18px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--accent)}
.page-centre{align-items:center;justify-content:center;text-align:center}
.page-monogramme{width:clamp(64px,8vw,110px);height:auto;margin:0 0 22px;opacity:.85}
.page-garde .page-monogramme{width:clamp(110px,14vw,190px);opacity:.45}
.page-titre-carnet{margin:14px 0 0;font:300 clamp(30px,3.4vw,50px)/1.08 var(--serif);color:var(--ivoire)}
.page-titre-carnet em{font-style:italic;color:var(--accent)}
.page-titre-carnet,.page-titre-service{text-wrap:balance}
.page-centre .page-texte{margin-left:auto;margin-right:auto;max-width:32ch}
.page-tourner{display:inline-flex;align-items:center;gap:12px;margin:30px 0 0;font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ivoire)}
.page-tourner::after{content:"→";font-size:14px;letter-spacing:0;color:var(--accent);animation:carnet-indice 2.4s var(--lent) infinite}
.page-centre .btn{margin-top:28px}
.page-garde-nom{margin:0;font:400 12px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ivoire)}
.page-garde-sous{margin:12px 0 0;font:400 9px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--cendre)}
.page-dos .lien{margin-top:6px}

/* navigation sous le carnet */
.carnet-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:clamp(28px,4vh,44px)}
.carnet-fleche{width:48px;height:48px;padding:0;border:1px solid rgba(236,231,223,.25);border-radius:50%;background:none;cursor:pointer;font:300 26px/1 var(--serif);color:var(--ivoire);transition:border-color .5s var(--lent),opacity .5s var(--lent)}
.carnet-fleche:hover:not(:disabled){border-color:var(--accent)}
.carnet-fleche:disabled{opacity:.25;cursor:default}
.carnet-compte{min-width:210px;margin:0;text-align:center;font:400 10px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--cendre)}
.carnet-compte span{display:block;margin-bottom:4px;font:italic 300 21px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--ivoire)}

/* téléphone : une page à la fois, qui part vers la gauche en tournant */
.carnet--simple .carnet-scene{overflow:hidden;margin:0 calc(var(--gouttiere) * -1);padding:0 var(--gouttiere)}
.carnet--simple .carnet-livre{aspect-ratio:auto;height:min(152vw,660px)}
.carnet--simple .feuille{left:0;width:100%;transition:transform 1s cubic-bezier(.45,.05,.2,1),opacity .3s ease}
.carnet--simple .feuille.tournee{opacity:0;transition:transform 1s cubic-bezier(.45,.05,.2,1),opacity .35s ease .5s}
.page-service--simple{padding:0;justify-content:flex-start}
.page-service-photo{position:relative;flex:none;height:42%;overflow:hidden}
.page-service-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 50%,rgba(20,20,22,1))}
.page-service-corps{display:flex;flex-direction:column;flex:1;padding:4px 26px 26px}
.page-service--simple .page-folio{margin-top:auto}

/* ============ Apparitions ============ */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.4s var(--lent),transform 1.4s var(--lent)}
.js [data-reveal].visible{opacity:1;transform:none}
.apparition{animation:apparition 2.4s var(--lent) both}
/* fondu et légère montée — sans toucher à l'interlettrage, qui ferait changer le titre de ligne en cours d'animation */
@keyframes apparition{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ============ Écrans moyens & mobiles ============ */
@media (max-width:1100px){
  .nav{gap:20px}
  .nav a{letter-spacing:.18em}
}
@media (max-width:1024px){
  .grille-annonces,.grille-avis{grid-template-columns:repeat(2,1fr)}
  .grille-avis:not(.grille-avis--page) > :nth-child(3){display:none}
  .pied-haut{grid-template-columns:1fr 1fr}
  .pied-haut > :first-child{grid-column:1 / -1}
  .annonce{grid-template-columns:1fr}
  .annonce-panneau{position:static}
}
@media (max-width:960px){
  :root{--en-tete:72px}
  .nav,.en-tete-cta{display:none}
  .menu-bouton{display:inline-flex}
  .marque img{height:36px}
}
@media (max-width:860px){
  .etapes,.collection-apercu,.collection-apercu:has(> :nth-child(2):last-child),.chiffres,.annonce-details,.garage,.garage-accueil{grid-template-columns:1fr}
  .chiffre+.chiffre{border-left:0;border-top:1px solid var(--filet)}
  .grille-collection{grid-template-columns:1fr}
  .grille-collection > *{grid-column:1 / -1 !important}
  .carte-collection{min-height:440px}
  .page-tete::before{width:70vw;right:-22%;opacity:.035}
  .garage-fond{top:0;width:100%;height:64%;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
}
@media (max-width:600px){
  .legal-sommaire ol{columns:1}
  .grille-annonces,.grille-avis,.grille-avis--page{grid-template-columns:1fr}
  .grille-avis:not(.grille-avis--page) > :nth-child(3){display:flex}
  .equipements{columns:1}
  .fiche div{grid-template-columns:1fr 1fr}
  .reseau{padding:20px}
  .reseau-detail{display:none}
  .filtres-titre{width:100%;margin-bottom:4px}
  .visionneuse-nav{top:auto;bottom:22px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js [data-reveal]{opacity:1;transform:none}
}