/* =====================================================================
   Faire-Part Interactif — V13 « Collection Portes »
   Identité : portes en arche, sceau doré, papier ivoire, émeraude, or, velours rose.
   Feuille commune : accueil, pages d'occasion, pages légales, 404.
   ===================================================================== */
:root{
  --ivoire:#F7F1E7; --papier:#FBF7F0; --blanc:#FFFDF9;
  --emeraude:#22423A; --emeraude-2:#2F5A4F; --emeraude-3:#16302A;
  --or:#B48A4C; --or-clair:#D9BE8C; --or-texte:#7E5F33;
  --velours:#A7566F; --encre:#2A2724; --gris:#5F584F;
  --ligne:rgba(180,138,76,.30); --ombre:rgba(34,66,58,.30);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Jost,system-ui,-apple-system,sans-serif;
  --rayon:20px; --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--ivoire);color:var(--encre);font:300 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.cache{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ancre{display:block;position:relative;top:-84px;visibility:hidden}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--emeraude);letter-spacing:.005em}
h2{font-size:clamp(34px,4.6vw,52px);line-height:1.08}
h3{font-size:26px;line-height:1.15}
.sur{font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte);font-weight:500}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--gris);max-width:640px}
.centre{text-align:center}.centre .lead{margin-inline:auto}
.sec{padding:clamp(72px,9vw,120px) 0;position:relative}
.sec-tete{max-width:760px}
.sec-tete h2{margin:14px 0 18px}
.centre.sec-tete{margin-inline:auto}
.filet{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--or);margin:16px 0}
.filet::before,.filet::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,currentColor)}
.filet::after{transform:scaleX(-1)}
.losange{width:9px;height:9px;transform:rotate(45deg);border:1px solid currentColor;display:inline-block}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 26px;border-radius:40px;
  font:400 15px/1.2 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .2s,background .25s,color .25s,box-shadow .25s,border-color .25s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-plein{background:var(--emeraude);color:var(--papier);box-shadow:0 14px 30px -16px rgba(34,66,58,.8)}
.btn-plein:hover{background:var(--emeraude-2)}
.btn-ligne{border-color:var(--emeraude);color:var(--emeraude);background:transparent}
.btn-ligne:hover{background:var(--emeraude);color:var(--papier)}
.btn-or{background:linear-gradient(135deg,#D9BE8C,#C29E6B 55%,#B48A4C);color:#22201C;box-shadow:0 12px 26px -14px rgba(140,100,40,.8)}
.btn-or:hover{box-shadow:0 16px 30px -14px rgba(140,100,40,.9)}
.btn-clair{border-color:rgba(247,241,231,.6);color:var(--ivoire)}
.btn-clair:hover{background:var(--ivoire);color:var(--emeraude)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--emeraude);text-decoration:none;font-weight:400;border-bottom:1px solid var(--or);padding-bottom:3px}
.lien-fleche:hover{color:var(--or-texte)}

/* ---------- logo ---------- */
.logo{width:34px;height:40px;color:var(--or);flex:none}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--emeraude)}
.marque b{display:block;font:500 23px/1 var(--serif);letter-spacing:.02em;white-space:nowrap}
.marque b i{color:var(--or-texte);font-weight:500}
.marque small{display:block;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--or-texte);margin-top:5px;font-weight:400}

/* ---------- barre ---------- */
.barre{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.barre.pleine{background:rgba(247,241,231,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--ligne)}
.barre .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.barre nav{display:flex;align-items:center;gap:24px}
.barre nav a{font-size:14.5px;text-decoration:none;color:var(--encre);white-space:nowrap}
.barre nav a:not(.btn):hover{color:var(--or-texte)}
.barre .btn{min-height:44px;padding:11px 20px;font-size:14px}
.barre nav a.btn-plein{color:var(--papier)}
.barre .tel{font:500 18px var(--serif);color:var(--or-texte)!important;letter-spacing:.02em}
.barre .ig{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--or-texte)}
.barre .ig svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.menu-btn{display:none;width:46px;height:46px;border:1px solid var(--ligne);border-radius:50%;background:var(--papier);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:1.4px;background:var(--emeraude);position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.4px;background:var(--emeraude);transition:transform .25s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-ouvert .menu-btn span{background:transparent}
.menu-ouvert .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-ouvert .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.cta-c{display:none}
@media(max-width:1180px){.barre .tel,.barre .ig{display:none}}
@media(max-width:1020px){
  .menu-btn{display:inline-flex}
  .barre nav .lien-nav{display:none}
  .menu-ouvert .barre{background:var(--ivoire)}
  .menu-ouvert .barre nav{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--ivoire);padding:8px 20px 26px;box-shadow:0 30px 40px -30px rgba(0,0,0,.35);border-top:1px solid var(--ligne)}
  .menu-ouvert .barre nav .lien-nav{display:block;padding:15px 4px;border-bottom:1px solid var(--ligne);font:500 22px var(--serif);color:var(--emeraude)}
  .menu-ouvert .barre nav .tel,.menu-ouvert .barre nav .ig{display:none}
  .menu-ouvert .barre nav .btn{margin-top:18px}
}
@media(max-width:520px){.marque small{display:none}.marque b{font-size:20px}.cta-l{display:none}.cta-c{display:inline}.barre .btn{padding:10px 16px}}

/* =====================================================================
   PORTES — composant partagé (héros, collection, pages d'occasion)
   ===================================================================== */
.c-emeraude{--p1:#2F5A4F;--p2:#22423A;--p3:#173029;--pm:#D9BE8C;--pc:rgba(217,190,140,.55);--pt:#E5CF9F}
.c-ivoire{--p1:#F1E6CF;--p2:#DFCAA4;--p3:#CBAE80;--pm:#7A5A2B;--pc:rgba(107,79,36,.42);--pt:#5A4220}
.c-saphir{--p1:#2E4E7B;--p2:#213E64;--p3:#172C4A;--pm:#D9BE8C;--pc:rgba(217,190,140,.55);--pt:#E5CF9F}
.c-rose{--p1:#BE7389;--p2:#A7566F;--p3:#8A3F58;--pm:#F6DCC0;--pc:rgba(255,232,214,.55);--pt:#FFF1F4}
.c-henne{--p1:#B5583A;--p2:#99442D;--p3:#7A3221;--pm:#E8C796;--pc:rgba(232,199,150,.55);--pt:#FBE6CF}
.c-poudre{--p1:#D3E0EC;--p2:#B6CADD;--p3:#99B2CA;--pm:#FFFFFF;--pc:rgba(59,86,116,.38);--pt:#2C445D}
.c-nuit{--p1:#2C3349;--p2:#1F2535;--p3:#141826;--pm:#D9BE8C;--pc:rgba(217,190,140,.55);--pt:#E5CF9F}
.m-khatam{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M0 32H12M52 32H64M32 0V12M32 52V64'/%3E%3C/svg%3E")}
.m-losange{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z'/%3E%3Cpath d='M28 17 39 28 28 39 17 28Z'/%3E%3Ccircle cx='28' cy='28' r='1.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='56' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='56' r='2.4'/%3E%3Ccircle cx='56' cy='56' r='2.4'/%3E%3C/svg%3E")}

.portes{position:relative;aspect-ratio:3/4;border-radius:999px 999px 10px 10px;overflow:hidden;perspective:1400px;isolation:isolate;
  background:radial-gradient(70% 55% at 50% 42%,#FFF8E8,#F6EAD2 55%,#EAD9B8);box-shadow:0 50px 90px -50px rgba(34,30,20,.65),0 0 0 1px rgba(180,138,76,.25)}
.portes::after{content:"";position:absolute;inset:9px 9px 0;border:1px solid rgba(180,138,76,.55);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none;z-index:4}
.vantail{position:absolute;top:0;bottom:0;width:50%;z-index:2;overflow:hidden;
  background:radial-gradient(120% 70% at 22% 16%,rgba(255,255,255,.18),rgba(255,255,255,0) 55%),radial-gradient(90% 65% at 82% 88%,rgba(0,0,0,.22),rgba(0,0,0,0) 60%),linear-gradient(165deg,var(--p1) 0%,var(--p2) 52%,var(--p3) 100%);
  transition:transform 1.5s cubic-bezier(.7,0,.2,1),opacity 1.5s ease;backface-visibility:hidden}
.vantail::before{content:"";position:absolute;inset:0;background:var(--pm);-webkit-mask:var(--motif) 0 0/var(--tuile,40px) var(--tuile,40px) repeat;mask:var(--motif) 0 0/var(--tuile,40px) var(--tuile,40px) repeat;opacity:.3}
.vantail::after{content:"";position:absolute;inset:7% 13% 0;border:1px solid var(--pc);border-bottom:0;border-radius:999px 999px 0 0}
.vantail.g{left:0;transform-origin:left center;box-shadow:inset -1px 0 0 var(--pc)}
.vantail.d{right:0;transform-origin:right center;box-shadow:inset 1px 0 0 var(--pc)}
.ouvert>.vantail.g{transform:rotateY(-104deg);opacity:0}
.ouvert>.vantail.d{transform:rotateY(104deg);opacity:0}
.sceau{position:absolute;z-index:3;left:50%;top:50%;width:var(--sceau,88px);height:var(--sceau,88px);transform:translate(-50%,-50%);border-radius:50%;border:0;
  background:radial-gradient(circle at 35% 30%,#E0C38C,#B48A4C 58%,#8A6531);color:#FFF8EA;font:500 calc(var(--sceau,88px)*.3)/1 var(--serif);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.14),inset 0 0 0 6px rgba(0,0,0,.08);transition:transform .8s ease,opacity .8s ease}
.sceau .ini{display:block;white-space:nowrap;letter-spacing:.02em}
.sceau i{font-style:italic;font-size:.72em;margin:0 1px;opacity:.88}
.sceau small{font:400 9px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;margin-top:6px;opacity:.9}
.ouvert>.sceau{transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}
.dedans{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16% 12% 10%}
.dedans .s{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte);font-weight:500}
.dedans .n{font:500 clamp(30px,3.6vw,46px)/1 var(--serif);color:var(--emeraude);margin:12px 0 8px}
.dedans .n i{display:block;font-style:italic;font-size:.62em;color:var(--or);margin:4px 0}
.dedans .d{font:400 17px/1.3 var(--serif);color:var(--encre)}
.dedans .v{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte);margin-top:6px;font-weight:500}

/* ---------- héros ---------- */
.heros{padding:140px 0 70px;position:relative;overflow:hidden;
  background:radial-gradient(60% 60% at 82% 30%,rgba(217,190,140,.22),rgba(217,190,140,0) 70%),radial-gradient(50% 50% at 0% 100%,rgba(167,86,111,.10),rgba(167,86,111,0) 70%),var(--ivoire)}
.heros .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,80px);align-items:center}
.heros h1{font-size:clamp(44px,6.2vw,84px);line-height:1;margin:18px 0 24px;letter-spacing:-.005em}
.heros h1 em{font-style:italic;color:var(--or-texte);font-weight:500;display:block}
.heros .lead{font-size:clamp(17px,1.7vw,20px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.preuves{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;list-style:none;font-size:14.5px;color:var(--gris)}
.preuves li{display:flex;align-items:center;gap:10px}
.preuves li::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--or)}
.scene{position:relative;width:min(420px,100%);margin-inline:auto}
.scene .portes{--sceau:96px;--tuile:46px}
.scene .aide{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:3;font:italic 400 18px var(--serif);color:var(--pt);white-space:nowrap;transition:opacity .5s;pointer-events:none}
.scene .ouvert .aide{opacity:0}
.sceau.pulse{animation:pouls 2.6s ease-in-out infinite}
@keyframes pouls{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 0 rgba(217,190,140,.5)}50%{box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 16px rgba(217,190,140,0)}}
.rejouer{position:absolute;z-index:5;right:6%;bottom:4%;opacity:0;pointer-events:none;border:1px solid var(--ligne);background:var(--papier);border-radius:30px;padding:8px 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity .5s .8s;color:var(--emeraude)}
.ouvert>.rejouer{opacity:1;pointer-events:auto}
.nuancier{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.nuancier button{width:30px;height:30px;border-radius:50%;border:2px solid var(--ivoire);box-shadow:0 0 0 1px var(--ligne);cursor:pointer;
  background:linear-gradient(165deg,var(--p1),var(--p3));transition:transform .2s,box-shadow .2s}
.nuancier button[aria-checked="true"]{box-shadow:0 0 0 2px var(--or);transform:scale(1.12)}
.nuancier-legende{text-align:center;font-size:13.5px;color:var(--gris);margin-top:12px;min-height:24px}
.nuancier-legende a{color:var(--emeraude);text-decoration:none;border-bottom:1px solid var(--or)}

/* ---------- défilé ---------- */
.defile{background:var(--emeraude);color:var(--or-clair);overflow:hidden;padding:15px 0;white-space:nowrap}
.defile-in{display:inline-flex;gap:0;animation:defile 46s linear infinite;font:italic 400 21px var(--serif);letter-spacing:.02em}
.defile-in span{padding:0 18px}
.defile-in b{color:var(--or);font-weight:400;font-style:normal;font-size:13px}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- collection ---------- */
.filtres{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.filtres button{border:1px solid var(--ligne);background:var(--papier);border-radius:30px;padding:10px 18px;font-size:14px;cursor:pointer;min-height:44px}
.filtres button[aria-pressed="true"]{background:var(--emeraude);border-color:var(--emeraude);color:var(--papier)}
.galerie{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 22px;margin-top:44px}
.modele{display:flex;flex-direction:column;text-decoration:none;color:inherit;width:calc((100% - 66px)/4)}
.modele .portes{--sceau:58px;--tuile:30px;border-radius:999px 999px 8px 8px}
.modele .sceau{pointer-events:none}
.modele:hover .portes>.vantail.g,.modele:focus-visible .portes>.vantail.g{transform:rotateY(-58deg)}
.modele:hover .portes>.vantail.d,.modele:focus-visible .portes>.vantail.d{transform:rotateY(58deg)}
.modele:hover .portes>.sceau,.modele:focus-visible .portes>.sceau{opacity:0;transform:translate(-50%,-50%) scale(.7)}
.modele .vantail{transition-duration:1s}
.modele .dedans .n{font-size:26px;margin:8px 0 4px}
.modele .dedans .d{font-size:14px}
.modele-txt{padding:18px 4px 0}
.modele-txt .o{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte);font-weight:500}
.modele-txt h3{font-size:25px;margin:6px 0 4px}
.modele-txt p{font-size:14.5px;color:var(--gris);line-height:1.55}
.modele-txt .coloris{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.06em;color:var(--gris);margin:2px 0 8px}
.modele-txt .coloris i{width:12px;height:12px;border-radius:50%;background:linear-gradient(165deg,var(--p1),var(--p3));box-shadow:0 0 0 1px var(--ligne)}
.modele-txt .ouvrir{margin-top:12px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--emeraude);display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--or);padding-bottom:2px}
.modele[hidden]{display:none}
.sur-mesure{margin-top:56px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px 30px}
.sur-mesure .pastilles{display:flex}
.sur-mesure .pastilles i{width:26px;height:26px;border-radius:50%;border:2px solid var(--papier);margin-left:-8px;background:linear-gradient(165deg,var(--p1),var(--p3))}
.sur-mesure b{display:block;font:500 24px/1.2 var(--serif);color:var(--emeraude)}
.sur-mesure p{font-size:15px;color:var(--gris)}

/* ---------- traditions ---------- */
.traditions{background:var(--papier)}
.trad-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.trad{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:28px 24px 24px;display:flex;flex-direction:column}
.trad .pastille{width:42px;height:56px;border-radius:999px 999px 4px 4px;background:linear-gradient(165deg,var(--p1),var(--p3));position:relative;margin-bottom:18px;box-shadow:0 12px 20px -12px rgba(0,0,0,.5)}
.trad .pastille::after{content:"";position:absolute;left:50%;top:56%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#E0C38C,#B48A4C 60%,#8A6531)}
.trad h3{font-size:25px}
.trad p{font-size:15px;color:var(--gris);margin:8px 0 18px;line-height:1.6}
.trad a{margin-top:auto;align-self:flex-start}
.deux-familles{margin-top:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:var(--emeraude);color:var(--ivoire);border-radius:var(--rayon);padding:clamp(28px,4vw,46px);overflow:hidden;position:relative}
.deux-familles h3{color:var(--ivoire);font-size:clamp(28px,3.2vw,38px)}
.deux-familles p{color:rgba(247,241,231,.82);margin-top:12px;font-size:16px}
.deux-familles .sur{color:var(--or-clair)}
.deux-familles .duo{display:flex;justify-content:center;gap:16px}
.deux-familles .duo .portes{width:132px;--sceau:44px;--tuile:26px;box-shadow:0 30px 50px -30px #000}
.deux-familles .duo .portes .sceau{font-size:14px}
.deux-familles .lien-commun{display:block;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);margin-top:16px}
.note-texte{margin-top:26px;font-size:14.5px;color:var(--gris);text-align:center}

/* ---------- occasions ---------- */
.occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.occasion{display:flex;gap:18px;align-items:flex-start;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:24px;text-decoration:none;transition:transform .25s,box-shadow .25s}
.occasion:hover{transform:translateY(-3px);box-shadow:0 26px 40px -30px var(--ombre)}
.occasion .pastille{flex:none;width:34px;height:46px;border-radius:999px 999px 3px 3px;background:linear-gradient(165deg,var(--p1),var(--p3))}
.occasion h3{font-size:24px}
.occasion p{font-size:14.5px;color:var(--gris);line-height:1.55;margin-top:4px}
.occasion span{display:inline-block;margin-top:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--emeraude)}

/* ---------- invités : 4 temps ---------- */
.invites{background:linear-gradient(var(--ivoire),var(--papier))}
.temps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;counter-reset:t}
.temps li{list-style:none;position:relative;padding:30px 24px 26px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon)}
.temps li::before{counter-increment:t;content:counter(t);position:absolute;top:-19px;left:24px;width:38px;height:38px;border-radius:50%;background:var(--emeraude);color:var(--or-clair);display:grid;place-items:center;font:500 19px var(--serif)}
.temps .ico{width:46px;height:46px;color:var(--or);margin:6px 0 14px}
.temps .ico svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.temps h3{font-size:24px}
.temps p{font-size:15px;color:var(--gris);margin-top:6px;line-height:1.6}
.temps .opt{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-texte);border:1px solid var(--ligne);border-radius:20px;padding:4px 10px}

/* ---------- espace famille (tableau de bord) ---------- */
.espace .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.coches{list-style:none;display:grid;gap:12px;margin:26px 0 24px;font-size:16px}
.coches li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.coches li::before{content:"";width:8px;height:8px;transform:rotate(45deg);background:var(--or);margin-top:10px}
.coches b{font-weight:500;color:var(--emeraude)}
.petit{font-size:14px;color:var(--gris)}
.tdb{background:var(--blanc);border:1px solid var(--ligne);border-radius:24px;box-shadow:0 50px 80px -50px var(--ombre);overflow:hidden}
.tdb-tete{background:var(--emeraude);color:var(--ivoire);padding:20px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.tdb-tete small{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--or-clair)}
.tdb-tete b{font:500 26px/1.1 var(--serif)}
.tdb-tete span{font-size:12px;color:rgba(247,241,231,.75)}
.tdb-chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ligne)}
.tdb-chiffres div{padding:16px 10px;text-align:center}
.tdb-chiffres div+div{border-left:1px solid var(--ligne)}
.tdb-chiffres b{display:block;font:500 30px/1 var(--serif);color:var(--emeraude)}
.tdb-chiffres small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.tdb-ligne{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:13px 22px;border-top:1px solid rgba(180,138,76,.16);font-size:14px}
.tdb-ligne b{font:500 19px var(--serif);color:var(--encre)}
.tdb-ligne em{display:block;font-style:normal;font-size:12px;color:var(--gris)}
.tdb-ligne .pp{font-size:11px;letter-spacing:.08em;border-radius:20px;padding:4px 10px;white-space:nowrap}
.pp.oui{background:#E2EFE7;color:#1E5A3C}.pp.non{background:#F6E3E3;color:#8A2E2E}
.tdb-pied{padding:12px 22px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);text-align:center;border-top:1px solid var(--ligne);background:var(--papier)}

/* ---------- photos des invités ---------- */
.photos{background:var(--emeraude);color:var(--ivoire);overflow:hidden}
.photos .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,70px);align-items:center}
.photos h2{color:var(--ivoire)}
.photos .sur{color:var(--or-clair)}
.photos .lead{color:rgba(247,241,231,.82)}
.photos .coches li::before{background:var(--or-clair)}
.photos .coches{color:rgba(247,241,231,.9)}
.photos .prix-opt{display:inline-flex;align-items:center;gap:12px;margin-top:6px;font:500 24px var(--serif);color:var(--or-clair)}
.photos .prix-opt small{font:300 14px var(--sans);color:rgba(247,241,231,.7)}
.mur{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotate(-3deg)}
.mur i{aspect-ratio:3/4;border-radius:12px;display:block;box-shadow:0 20px 30px -20px #000}
.mur i:nth-child(1){background:linear-gradient(160deg,#E9D2B4,#B58B5C)}
.mur i:nth-child(2){background:linear-gradient(160deg,#C9D7E0,#7E98AE);transform:translateY(24px)}
.mur i:nth-child(3){background:linear-gradient(160deg,#E6C3CC,#A7566F)}
.mur i:nth-child(4){background:linear-gradient(160deg,#C7D3C2,#5E7D6B)}
.mur i:nth-child(5){background:linear-gradient(160deg,#F1E4C8,#C9A267);transform:translateY(24px)}
.mur i:nth-child(6){background:linear-gradient(160deg,#D8CCE0,#7C6A92)}
.telephone{position:relative}
.telephone .ecran{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(2deg);width:min(250px,62%);background:var(--papier);color:var(--encre);border-radius:28px;padding:22px 18px;text-align:center;box-shadow:0 40px 60px -30px #000;border:6px solid #11251F}
.ecran .ico{width:44px;height:44px;margin:0 auto 8px;color:var(--or)}
.ecran .ico svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ecran b{display:block;font:500 24px/1.15 var(--serif);color:var(--emeraude)}
.ecran p{font-size:12.5px;color:var(--gris);margin:6px 0 12px;line-height:1.5}
.ecran span{display:block;background:var(--emeraude);color:var(--papier);border-radius:30px;padding:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ecran em{display:block;font-style:normal;font-size:10.5px;color:var(--gris);margin-top:10px}

/* ---------- comparatif ---------- */
.comparatif{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.colonne{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px}
.colonne h3{font-size:24px;margin-bottom:12px}
.colonne ul{list-style:none;display:grid;gap:9px;font-size:15px;color:var(--gris)}
.colonne li{display:grid;grid-template-columns:22px 1fr;gap:6px}
.colonne li::before{content:"✕";color:#A65B5B;font-size:13px;margin-top:2px}
.colonne.nous{background:var(--emeraude);border-color:var(--emeraude);color:var(--ivoire);box-shadow:0 40px 70px -40px rgba(34,66,58,.8)}
.colonne.nous h3{color:var(--ivoire)}
.colonne.nous ul{color:rgba(247,241,231,.88)}
.colonne.nous li::before{content:"✓";color:var(--or-clair)}

/* ---------- formules ---------- */
.formules{background:linear-gradient(var(--papier),var(--ivoire))}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:stretch}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:34px 28px;display:flex;flex-direction:column;position:relative}
.carte h3{font-size:31px}
.carte .pour{font-size:14.5px;color:var(--gris);margin-top:4px;min-height:46px}
.carte .prix{font:500 56px/1 var(--serif);color:var(--emeraude);margin:20px 0 4px}
.carte .prix small{font:300 15px var(--sans);color:var(--gris);display:block;margin-top:6px}
.carte .prix-devis{font-size:40px}
.carte ul{list-style:none;display:grid;gap:10px;margin:22px 0 28px;font-size:14.8px}
.carte li{display:grid;grid-template-columns:18px 1fr;gap:10px;line-height:1.55}
.carte li::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--or);margin-top:9px}
.carte li.plus{font-weight:400;color:var(--emeraude)}
.carte .btn{margin-top:auto}
.carte.phare{background:var(--emeraude);color:var(--ivoire);border-color:var(--emeraude);transform:translateY(-14px);box-shadow:0 44px 74px -38px rgba(22,48,42,.9)}
.carte.phare h3,.carte.phare .prix,.carte.phare li.plus{color:var(--ivoire)}
.carte.phare .pour,.carte.phare .prix small{color:rgba(247,241,231,.75)}
.carte.phare li::before{background:var(--or-clair)}
.ruban{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--or-clair);color:#2A2724;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:6px 14px;border-radius:20px;white-space:nowrap;font-weight:500}
.role{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte);font-weight:500;margin-bottom:10px}
.carte.phare .role{color:var(--or-clair)}
.commun{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:center;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 22px;font-size:14.5px;color:var(--gris)}
.commun b{font:500 20px var(--serif);color:var(--emeraude);margin-right:6px}
.commun span{display:inline-flex;align-items:center;gap:8px}
.commun span::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--or)}
.hc-detail{margin-top:22px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);background:var(--emeraude);color:var(--ivoire);border-radius:var(--rayon);padding:clamp(26px,4vw,46px)}
.hc-detail h3{color:var(--ivoire);font-size:clamp(28px,3vw,36px);margin:10px 0 6px}
.hc-detail .sur{color:var(--or-clair)}
.hc-detail .coches{color:rgba(247,241,231,.9);font-size:15.5px}
.hc-detail .coches b{color:var(--ivoire)}
.hc-detail .coches li::before{background:var(--or-clair)}
.hc-detail .petit{color:rgba(247,241,231,.75)}
.envoi{background:rgba(247,241,231,.06);border:1px solid rgba(217,190,140,.35);border-radius:16px;padding:24px}
.envoi ol{list-style:none;counter-reset:n;display:grid;gap:14px;margin:16px 0 14px}
.envoi li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:12px;font-size:15px;color:rgba(247,241,231,.88);line-height:1.55}
.envoi li::before{content:counter(n);width:30px;height:30px;border-radius:50%;border:1px solid var(--or-clair);color:var(--or-clair);display:grid;place-items:center;font:500 16px var(--serif)}
.envoi b{color:var(--ivoire);font-weight:500}
.tableau-wrap{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rayon);border:1px solid var(--ligne);background:var(--blanc)}
.tableau{width:100%;min-width:660px;border-collapse:collapse;font-size:14.8px}
.tableau caption{text-align:left;padding:18px 20px 6px;font:500 24px var(--serif);color:var(--emeraude)}
.tableau th,.tableau td{padding:13px 16px;border-top:1px solid var(--ligne);text-align:center;vertical-align:middle}
.tableau thead th{font:500 20px var(--serif);color:var(--emeraude);border-top:0}
.tableau tbody th{text-align:left;font-weight:400;color:var(--encre)}
.tableau td{color:var(--gris)}
.tableau .t-phare{background:rgba(34,66,58,.06);color:var(--emeraude);font-weight:400}
.mention{font-size:14px;color:var(--gris);text-align:center;margin-top:22px}

/* ---------- étapes de réalisation ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px;counter-reset:e}
.etapes div{position:relative;padding-top:60px}
.etapes div::before{counter-increment:e;content:counter(e);position:absolute;top:0;left:0;width:46px;height:46px;border-radius:999px 999px 6px 6px;border:1px solid var(--or);display:grid;place-items:center;font:500 22px var(--serif);color:var(--or-texte)}
.etapes h3{font-size:24px;margin-bottom:6px}
.etapes p{font-size:15px;color:var(--gris)}

/* ---------- texte de référencement ---------- */
.seo{background:var(--papier)}
.seo .wrap{max-width:880px}
.seo h2{font-size:clamp(28px,3.4vw,38px);margin-bottom:18px}
.seo p{color:var(--gris);font-size:16px;margin-top:12px}
.seo strong{font-weight:400;color:var(--encre)}
.seo a{color:var(--emeraude)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--ligne);padding:20px 4px}
.faq summary{cursor:pointer;list-style:none;font:500 22px/1.3 var(--serif);color:var(--emeraude);display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font:300 26px/1 var(--sans);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:10px;font-size:16px;color:var(--gris)}

/* ---------- demande de devis ---------- */
.demande{background:radial-gradient(110% 100% at 20% 0%,var(--emeraude-2),var(--emeraude) 50%,var(--emeraude-3));color:var(--ivoire)}
.demande h2{color:var(--ivoire)}
.demande .sur{color:var(--or-clair)}
.demande .lead{color:rgba(247,241,231,.8)}
.demande .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-direct{display:grid;gap:12px;margin-top:30px}
.contact-direct a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivoire);border:1px solid rgba(217,190,140,.35);border-radius:16px;padding:14px 18px;max-width:360px}
.contact-direct svg{width:22px;height:22px;color:var(--or-clair);fill:none;stroke:currentColor;stroke-width:1.5}
.contact-direct small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair)}
.contact-direct b{font:500 22px var(--serif)}
.form{background:var(--papier);color:var(--encre);border-radius:24px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px;box-shadow:0 40px 80px -40px #000}
.form label{display:grid;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);align-content:start}
.form label em{font-style:normal;text-transform:none;letter-spacing:0}
.form .large{grid-column:1/-1}
.form input,.form select,.form textarea{font:300 16px var(--sans);color:var(--encre);background:var(--blanc);border:1px solid #D9CDBB;border-radius:12px;padding:13px 14px;width:100%;min-height:50px}
.form textarea{min-height:110px;resize:vertical}
.form .btn{grid-column:1/-1;margin-top:6px}
.form .petit{grid-column:1/-1;text-align:center;font-size:13px}
.form .petit a{color:var(--emeraude)}

/* ---------- pied de page ---------- */
.pied{background:var(--emeraude-3);color:rgba(247,241,231,.8);padding:56px 0 calc(40px + env(safe-area-inset-bottom));font-size:14.5px}
.pied .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
.pied .marque{color:var(--ivoire)}
.pied .marque b i,.pied .marque small{color:var(--or-clair)}
.pied p{margin-top:14px;max-width:320px}
.pied h3{font:500 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--or-clair);margin-bottom:12px}
.pied ul{list-style:none;display:grid;gap:8px}
.pied a{text-decoration:none;color:rgba(247,241,231,.85)}
.pied a:hover{color:var(--or-clair)}
.pied .bas{grid-column:1/-1;border-top:1px solid rgba(217,190,140,.2);padding-top:22px;margin-top:10px;font-size:13px;color:rgba(247,241,231,.6);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}

/* ---------- barre flottante (mobile) ---------- */
.flottant{position:fixed;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:none;gap:8px;transform:translateY(140%);transition:transform .35s}
.flottant.vu{transform:none}
.flottant .btn{flex:1;font-size:15.5px;box-shadow:0 18px 30px -12px rgba(0,0,0,.45)}
.flottant .flot-tel{flex:none;width:54px;padding:0}
@media(max-width:760px){.flottant{display:flex}}

/* ---------- apparitions ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.vu{opacity:1;transform:none}

/* =====================================================================
   PAGES D'OCCASION
   ===================================================================== */
.page-tete{padding:130px 0 60px}
.page-tete .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.page-tete h1{font-size:clamp(42px,5.4vw,70px);line-height:1.02;margin:16px 0 20px}
.page-tete h1 em{font-style:italic;color:var(--or-texte)}
.fil{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte);font-weight:500}
.fil a{text-decoration:none}
.page-tete .portes{width:min(340px,100%);margin-inline:auto;--sceau:76px;--tuile:38px}
.blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bloc{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);padding:28px}
.bloc h2{font-size:27px;margin-bottom:8px;line-height:1.15}
.bloc p{font-size:15.5px;color:var(--gris)}
.demos-lies{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));gap:24px;justify-content:center;margin-top:40px}
.bandeau-cta{background:var(--emeraude);color:var(--ivoire);text-align:center;padding:70px 20px}
.bandeau-cta h2{color:var(--ivoire)}
.bandeau-cta p{color:rgba(247,241,231,.8);margin:10px auto 26px;max-width:560px}
.bandeau-cta .actions{justify-content:center}
.autres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.autres a{border:1px solid var(--ligne);border-radius:30px;padding:9px 16px;text-decoration:none;font-size:14px;background:var(--papier)}

/* =====================================================================
   PAGES LÉGALES
   ===================================================================== */
.legal{padding:130px 0 80px}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(38px,5vw,56px);margin:10px 0 8px}
.legal h2{font-size:28px;margin:34px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--gris);margin-top:10px}
.legal ul{padding-left:20px}
.legal a{color:var(--emeraude)}
.legal mark{background:#FBEFC9;color:var(--encre);padding:0 3px}
.legal .maj{font-size:14px;color:var(--gris)}
.legal .avert{background:var(--papier);border:1px dashed var(--or-clair);border-radius:14px;padding:14px 18px;font-size:14.5px;margin-top:18px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1020px){
  .modele{width:calc((100% - 44px)/3)}
  .trad-grille{grid-template-columns:repeat(2,1fr)}
  .temps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .occasions{grid-template-columns:repeat(2,1fr)}
  .pied .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .cartes{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .carte.phare{transform:none;margin-top:10px}
  .espace .wrap,.photos .wrap,.demande .wrap,.deux-familles,.hc-detail{grid-template-columns:1fr}
  .comparatif{grid-template-columns:1fr}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .blocs{grid-template-columns:1fr}
}
@media(max-width:860px){
  .heros{padding:112px 0 56px}
  .heros .wrap{grid-template-columns:1fr}
  .heros .scene{order:2;width:min(330px,88%)}
  .heros .texte{order:1}
  .page-tete{padding:108px 0 40px}
  .page-tete .wrap{grid-template-columns:1fr}
  .page-tete .portes{width:min(260px,72%)}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .commun{justify-content:flex-start}
  .sur-mesure{grid-template-columns:1fr;text-align:center;justify-items:center}
  .tdb-chiffres{grid-template-columns:repeat(2,1fr)}
  .tdb-chiffres div:nth-child(3){border-left:0}
  .tdb-chiffres div:nth-child(n+3){border-top:1px solid var(--ligne)}
  .form{grid-template-columns:1fr;padding:22px}
  .pied{padding-bottom:110px}
}
@media(max-width:600px){
  .trad-grille,.temps,.occasions,.etapes{grid-template-columns:1fr}
  .galerie{gap:26px 14px}
  .modele{width:calc((100% - 14px)/2)}
  .modele .portes{--sceau:46px}
  .modele .sceau{font-size:14px}
  .modele-txt h3{font-size:21px}
  .modele-txt p{display:none}
  .pied .wrap{grid-template-columns:1fr}
  .heros h1{font-size:clamp(40px,11vw,54px)}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .defile-in,.sceau.pulse{animation:none}
  .vantail{transition:opacity .4s ease!important}
  .ouvert>.vantail.g,.ouvert>.vantail.d{transform:none!important}
  .modele:hover .portes>.vantail{transform:none!important}
  .js .reveal{opacity:1;transform:none;transition:none}
}