/* ============================================================ MY EVENTS BOX — Gala Art deco : noir velours, or metallique, touche fuchsia. Skin des composants. Tokens (couleurs/polices) : tokens.css. Ne jamais ecrire une couleur ou une police en dur ici. ============================================================ */ /* ---------- 1. VARIABLES DE MISE EN FORME (non couleur) ---------- */ :root{ --maxw:1240px; --topbar-h:0px; /* banniere haut de site retiree (remettre 38px pour la reactiver) */ /* alpha or documentes par la charte (bordures / filets discrets) */ --or-border:rgba(214,179,106,.30); --or-hair:rgba(214,179,106,.16); /* Compat tunnel de devis : anciens tokens -> charte actuelle (or/ivoire/Cinzel/prune) */ --ff-display:var(--font-titre); --ff-mono:var(--font-texte); --ff-anton:var(--font-titre); --halo:var(--ivoire); --lilas:var(--ivoire-dim); --magenta:var(--or-base); --corail:var(--or-fonce); --cyan-ink:var(--or-base); --glass:rgba(255,255,255,.05); --glass-solid:var(--prune); --glass-border:var(--or-border); } /* ---------- 0. BANNIERE HAUT DE SITE (doree, fine, cliquable) ---------- */ .topbar{ position:fixed;top:0;left:0;right:0;z-index:70;height:var(--topbar-h); display:flex;align-items:center;justify-content:center;gap:.6rem;padding:0 1rem; background:var(--grad-or);color:var(--noir); font-family:var(--font-texte);font-weight:600;font-size:clamp(.64rem,1.7vw,.78rem);letter-spacing:.03em; line-height:1;text-align:center;white-space:nowrap;transition:filter .2s ease; } .topbar:hover{filter:brightness(1.06)} .topbar b{font-weight:700} .topbar__txt{overflow:hidden;text-overflow:ellipsis} .topbar::after{content:"";flex:0 0 auto;width:1.05em;height:1.05em;background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s ease; } .topbar:hover::after{transform:translateX(4px)} @media (max-width:520px){.topbar::after{display:none}} /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-texte); background:var(--noir); color:var(--ivoire); line-height:1.7; overflow-x:clip; position:relative; min-height:100vh; cursor:auto; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;border:none;background:none} ul{list-style:none} ::selection{background:var(--or-base);color:var(--noir)} :focus-visible{outline:2px solid var(--or-base);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(214,179,106,.28)} /* ---------- 2bis. OR : texte dore + reflet + filet ---------- */ .gold-text{ background:var(--grad-or);background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .gold-text,.eyebrow,.hero__eyebrow,.presta-card__kicker{color:var(--or-base);-webkit-text-fill-color:currentColor} .galerie .eyebrow,.partners__label{color:var(--or-fonce);-webkit-text-fill-color:currentColor} } .gold-shine{animation:shine 5.5s linear infinite} @keyframes shine{to{background-position:200% center}} .filet{height:2px;border:none;background:var(--grad-filet)} /* Titres en blanc ivoire : l'or reste sur les pre-titres, prix et accents */ .hero__brand,.section-title,.final-cta__title{color:var(--ivoire);-webkit-text-fill-color:var(--ivoire);background:none} /* ---------- 3. FONDS : velours + grain ---------- */ .bg-mesh,.bg-grain{position:fixed;inset:0;z-index:0;pointer-events:none} .bg-mesh{ background-color:var(--noir); background-image: radial-gradient(55% 42% at 82% 0%, rgba(214,179,106,.12) 0%, rgba(214,179,106,0) 60%), radial-gradient(50% 40% at 0% 12%, rgba(214,179,106,.07) 0%, rgba(214,179,106,0) 58%), radial-gradient(60% 55% at 50% 108%, rgba(110,85,39,.16) 0%, rgba(110,85,39,0) 62%); } .bg-grain{ opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 5. NAV ---------- */ /* Barre pleine largeur, fond transparent. Logo centre. */ .nav{ position:fixed;top:var(--topbar-h);left:0;right:0;z-index:50; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:1rem;padding:.9rem max(clamp(1.2rem,4vw,3rem), calc((100% - 1280px) / 2)); background:transparent; } /* Au scroll : voile velours tres subtil, estompe par un masque -> pas de bandeau net. */ .nav::before{ content:"";position:absolute;inset:0 0 -22px 0;z-index:-1;pointer-events:none; opacity:0;transition:opacity .4s ease; background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0) 72%); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(to bottom, #000 52%, transparent); mask-image:linear-gradient(to bottom, #000 52%, transparent); } .nav.scrolled::before{opacity:1} /* logo (placeholder) centre */ .brand{grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;line-height:0} .brand__logo{height:92px;width:auto;transition:height .4s} .nav.scrolled .brand__logo{height:66px} /* Repartition : liens a gauche - logo au centre - (liens + CTA) a droite */ .nav__panel{display:contents} .nav__links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.7rem);list-style:none} .nav__links--left{grid-column:1;grid-row:1;justify-self:start} .nav__right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem)} .nav__links a{display:inline-flex;align-items:center;font-family:var(--font-texte);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--or-base);transition:color .3s} .nav__links a:hover{color:var(--or-eclat)} /* effet "machine a sous" au survol du libelle */ .slot{display:inline-flex;flex-direction:column;overflow:hidden;height:1.5em;line-height:1.5;vertical-align:middle} .slot>span{display:block;flex:0 0 auto;height:1.5em;line-height:1.5;transition:transform .42s cubic-bezier(.76,0,.24,1)} .nav__top:hover .slot>span, .nav__links>.nav__item>a:hover .slot>span, .nav__cta:hover .slot>span, .footer__griffe:hover .slot>span, .btn:hover .slot>span{transform:translateY(-100%)} /* sous-menus deroulants (Prestations / Vos evenements) */ .nav__item{position:relative;display:flex;align-items:center} .nav__top{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-texte);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--or-base);cursor:pointer;transition:color .3s} .nav__top::after{content:"";width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65;transition:transform .3s} .nav__item--sub:hover .nav__top,.nav__top:focus-visible{color:var(--or-eclat)} .nav__item--sub:hover .nav__top::after,.nav__item--sub.open .nav__top::after{transform:rotate(-135deg) translateY(2px)} .nav__sub{ position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px); min-width:214px;margin-top:.5rem;padding:.5rem;list-style:none; background:var(--prune);border:1px solid var(--or-border);border-radius:16px;box-shadow:var(--shadow-noir); display:flex;flex-direction:column;gap:.1rem;z-index:60; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s; } /* Pont de survol. Le margin-top ci-dessus laisse 8 px de vide entre le bouton et le sous-menu : en le traversant, la souris sortait de .nav__item--sub, :hover tombait et le menu se repliait avant qu'on ait pu cliquer un lien. Ce ::before comble l'interstice sans rien changer au rendu (transparent). Etant un descendant de .nav__item--sub, le survoler maintient :hover. Il s'etend sur toute la largeur du sous-menu — plus large que le bouton — ce qui rattrape aussi les trajets en diagonale. */ .nav__sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.75rem} .nav__item--sub:hover .nav__sub,.nav__item--sub:focus-within .nav__sub,.nav__item--sub.open .nav__sub{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .nav__sub a{display:block;padding:.55rem .8rem;border-radius:10px;font-family:var(--font-texte);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--or-base);white-space:nowrap;transition:background .2s,color .2s} .nav__sub a::after{display:none} .nav__sub a:hover{background:rgba(214,179,106,.10);color:var(--or-eclat)} /* Meme traitement que .btn--primary (contour a reflet), au gabarit du header. */ .nav__cta{ display:inline-flex;align-items:center;justify-content:center;position:relative; font-family:var(--font-texte);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; padding:.62rem 1.3rem;border-radius:var(--radius-btn);white-space:nowrap; background:transparent;color:var(--or-base); box-shadow:0 6px 20px rgba(0,0,0,.35); transition:transform .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease; } .nav__cta:hover{ transform:translateY(-2px); background-image:var(--grad-or-btn); color:var(--noir); /* indispensable : texte sombre sur or */ box-shadow:0 12px 28px rgba(214,179,106,.35); } .nav__burger{grid-column:1;justify-self:start;display:none;width:44px;height:44px;border-radius:12px;background:rgba(214,179,106,.06);border:1px solid var(--or-border);position:relative} .nav__burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ivoire);transition:.3s} .nav__burger span:nth-child(1){top:15px}.nav__burger span:nth-child(2){top:21px}.nav__burger span:nth-child(3){top:27px} .nav__burger.open span:nth-child(1){top:21px;transform:rotate(45deg)} .nav__burger.open span:nth-child(2){opacity:0} .nav__burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)} /* ---------- 6. LAYOUT GLOBAL ---------- */ main,footer{position:relative;z-index:2} .section{padding:clamp(5rem,10vw,9rem) clamp(1.2rem,5vw,3rem);position:relative} .wrap{max-width:var(--maxw);margin-inline:auto;position:relative} /* perf : les sections hors ecran ne sont pas peintes -> scroll fluide */ .parts,.about,.plus,.final-cta,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 700px} /* scroll natif : on degage la barre flottante quand on saute a une ancre */ #accueil,#prestations,#bornes,#galerie,#apropos,#contact{scroll-margin-top:92px} .eyebrow{ font-family:var(--font-texte);font-size:.72rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem; /* or metallique (cf. .gold-text) */ background:var(--grad-or);background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .eyebrow::before{content:"";width:28px;height:2px;background:var(--grad-filet)} /* eyebrows centres : filet a gauche ET a droite */ .reviews__head .eyebrow::after,.presta__head .eyebrow::after,.bornes__head .eyebrow::after,.galerie__head .eyebrow::after{content:"";width:28px;height:2px;background:var(--grad-filet)} /* Echelle unique des H2. Ne pas la redefinir par section : c'est ce qui avait produit cinq tailles differentes (46 a 57.6 px) pour un meme composant, et neutralise la regle mobile plus bas (une surcharge `.x .section-title` pese 0,2,0 et bat `.section-title`). */ .section-title{ font-family:var(--font-titre);font-weight:600;line-height:1.1;text-transform:uppercase; font-size:clamp(1.5rem,3.2vw,2.5rem);letter-spacing:.02em;text-wrap:balance; } .section-lead{color:var(--ivoire-dim);max-width:46ch;margin-top:1.2rem;font-size:clamp(1rem,1.4vw,1.15rem)} /* surface prune utilitaire (ex-glass) */ .glass{ background:var(--prune); border:1px solid var(--or-border); } /* ---------- 7. HERO (video plein cadre, contenu centre) ---------- */ .hero{ position:relative;min-height:100svh;overflow:hidden; display:flex;align-items:center;justify-content:center;text-align:center; padding:calc(6rem + var(--topbar-h)) clamp(1.2rem,5vw,2rem) 4rem; /* 92% et non center : les sujets de hero.jpg (famille 805->1215, borne 1210->1335 en px source) forment une bande de 530 px calee a DROITE de l'image 16/9. Plus le viewport est etroit, plus `cover` agrandit l'image pour couvrir la hauteur, et plus la fenetre visible se reduit -- sur un telephone en 100svh il ne reste que ~355 px de large. Centre, on n'affichait alors que [511,865] : du gazon vide. A 92% on affiche [940,1294] : les visages et la borne avec son anneau lumineux. Valeur globale plutot que media query : le declencheur est le RATIO du viewport, pas sa largeur (une tablette en portrait a le meme defaut). Et c'est sans effet ailleurs -- sur un ecran de bureau le debordement horizontal n'est que de ~10 px, sur un ultrawide il est nul. NB : 530 px ne tiennent pas dans 355 px, le recadrage est donc inevitable tant que la source est en 16/9 (cf. hero portrait dans docs/). */ background:var(--noir) url("../img/hero.jpg") 92% center/cover no-repeat; } .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero__scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background: /* leger film noir : lisibilite du texte */ radial-gradient(120% 82% at 50% 42%, rgba(0,0,0,.26), transparent 68%), /* film d'ensemble + fondu vers le velours en bas (transition douce avec la suite) */ linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.30) 38%, rgba(0,0,0,.52) 70%, rgba(0,0,0,.86) 90%, var(--noir) 100%); } .hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%} .hero__text{display:flex;flex-direction:column;align-items:center;max-width:760px;margin-inline:auto} .hero__pill{ display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .95rem;border-radius:999px; font-family:var(--font-texte);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-dim); margin-bottom:1.6rem; } .hero__pill .ping{width:8px;height:8px;border-radius:50%;background:rgba(214,179,106,.3);box-shadow:0 0 10px var(--or-base);animation:ping 2s infinite} @keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}} /* Eyebrow geo (petit surtitre) */ .hero__eyebrow{ font-family:var(--font-texte);font-weight:600;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase; margin-bottom:1.1rem;display:inline-flex;align-items:center;gap:.6rem; /* or metallique (cf. .gold-text) */ background:var(--grad-or);background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .hero__eyebrow::before{content:"";width:28px;height:2px;background:var(--grad-filet)} /* Titre-marque (H1) : grand Cinzel dore */ .hero__brand{ font-family:var(--font-titre);font-weight:600;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(2rem,5.2vw,3.7rem);line-height:1.04;text-wrap:balance;margin:0; } /* apostrophe : or (comme le reste du titre) — le fuchsia est desormais porte par les boutons secondaires */ /* Sous-titre : baseline « Capteur de bonne humeur » en Josefin */ .hero__baseline{ font-family:var(--font-texte);font-weight:500;text-transform:uppercase; letter-spacing:.28em;font-size:clamp(.95rem,1.7vw,1.3rem);line-height:1.4; color:var(--ivoire-dim);margin-top:1rem; } /* .hero__copy retire (demande client) : le hero va desormais baseline -> CTA */ .hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;align-items:center;justify-content:center} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-texte);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase; border-radius:var(--radius-btn);padding:1rem 1.7rem .9rem;transition:transform .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease,background .2s ease;position:relative; } /* ---------- Boutons : contour a reflet qui balaie ---------- Le contour est dessine par ::before (degrade masque en anneau), pas par border, pour pouvoir y animer un reflet. ::after reste la fleche du bouton principal. */ .btn--primary::before,.btn--ghost::before,.nav__cta::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none; background-size:300% 100%;background-position:100% 0; /* anneau : on garde uniquement le liseré (bord - interieur) */ -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:btn-reflet 5s linear infinite; } .btn--primary::before,.nav__cta::before{background-image:var(--grad-reflet-or)} .btn--ghost::before{background-image:var(--grad-reflet-fuchsia)} @keyframes btn-reflet{to{background-position:-200% 0}} /* Bouton principal : contour + texte dores, se remplit d'or au survol */ .btn--primary{background:transparent;color:var(--or-base);box-shadow:0 6px 22px rgba(0,0,0,.35)} .btn--primary:hover{ transform:translateY(-2px); background-image:var(--grad-or-btn); color:var(--noir); /* indispensable : texte sombre sur or */ box-shadow:0 12px 30px rgba(214,179,106,.35); } .btn--primary::after{ content:"";width:1.05em;height:1.05em;flex:0 0 auto;background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .28s cubic-bezier(.76,0,.24,1); } .btn--primary:hover::after{transform:translateX(5px)} /* Bouton secondaire : contour + texte fuchsia, PAS de remplissage au survol */ .btn--ghost{background:transparent;color:var(--fuchsia)} .btn--ghost:hover{ transform:translateY(-2px); background:transparent; /* volontairement sans remplissage */ color:var(--fuchsia-eclat); box-shadow:0 0 26px rgba(240,52,139,.30); } /* Repli : sans mask-composite, on retombe sur une bordure simple (pas de reflet) */ @supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){ .btn--primary::before,.btn--ghost::before,.nav__cta::before{display:none} .btn--primary,.nav__cta{border:1.5px solid var(--or-base)} .btn--ghost{border:1.5px solid var(--fuchsia)} } @media (prefers-reduced-motion:reduce){ .btn--primary::before,.btn--ghost::before,.nav__cta::before{animation:none} } .btn--fuchsia{background:var(--fuchsia);color:#fff} .btn--fuchsia:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(240,52,139,.35)} /* Hero : viewfinder type appareil photo — image + legende, flash a chaque changement de service */ .hero-shot{justify-self:end;width:min(420px,100%)} .hero-shot__frame{ position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden; background:linear-gradient(155deg,var(--prune),var(--noir)); border:1px solid var(--or-border);box-shadow:var(--shadow-noir); } .hero-shot__corner{position:absolute;width:26px;height:26px;border:2px solid var(--or-eclat);opacity:.7;z-index:3} .hero-shot__corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:7px 0 0 0} .hero-shot__corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 7px 0 0} .hero-shot__corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 7px} .hero-shot__corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 7px 0} .hero-shot__rec{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-texte);font-weight:600;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or-eclat)} .hero-shot__rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or-base);box-shadow:0 0 8px var(--or-base);animation:recblink 1.6s steps(1) infinite} @keyframes recblink{0%,60%{opacity:1}61%,100%{opacity:.25}} /* scene : les 3 slides empilees, une seule visible */ .hero-shot__stage{position:absolute;inset:2.7rem 1.7rem 3.4rem;display:grid} .shot{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;text-align:center;opacity:0;transition:opacity .25s ease} .shot.is-on{opacity:1} .shot__img{width:80%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--or-hair)} .shot__photo{width:100%;height:100%;object-fit:cover;display:block} .shot--1,.shot--2,.shot--3{color:var(--or-base)} .shot--1 .shot__img,.shot--2 .shot__img,.shot--3 .shot__img{background:linear-gradient(140deg,rgba(214,179,106,.14),rgba(110,85,39,.10))} .shot__cap{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.12;letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire)} .hero-shot__dots{position:absolute;left:0;right:0;bottom:1.4rem;z-index:3;display:flex;justify-content:center;gap:.45rem} .hero-shot__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,box-shadow .3s} .hero-shot__dots i.on{background:var(--or-base);box-shadow:0 0 8px var(--or-base)} .hero-shot__flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none} .hero-shot__flash.fire{animation:shotflash .5s ease} @keyframes shotflash{0%{opacity:0}10%{opacity:.95}100%{opacity:0}} /* scroll hint */ .scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-family:var(--font-texte);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivoire-dim);display:flex;flex-direction:column;align-items:center;gap:.5rem} .scroll-hint .bar{width:1px;height:38px;background:linear-gradient(var(--or-base),transparent);animation:slide 1.8s infinite} @keyframes slide{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- 7bis. AVIS CLIENTS + PARTENAIRES (marquees) ---------- */ .svg-defs{position:absolute;width:0;height:0;overflow:hidden} .reviews{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)} .reviews__head{text-align:center;max-width:780px;margin-inline:auto;margin-bottom:clamp(2.4rem,4vw,3.4rem);display:flex;flex-direction:column;align-items:center;padding-inline:clamp(1.2rem,5vw,3rem)} .reviews__lead{margin-left:auto;margin-right:auto} /* etoiles or reutilisables */ .stars5{display:block;height:auto;fill:var(--or-base)} /* badge note Google */ .rating-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:999px;background:var(--prune);border:1px solid var(--or-border);margin-bottom:1.4rem;transition:transform .2s ease,border-color .2s ease} a.rating-badge:hover{border-color:var(--or-base);transform:translateY(-1px)} /* vignette du hero : verre translucide (liquid glass), pas de fond plein */ .rating-badge--hero{ margin-bottom:1.2rem; /* plus compacte que celle de la section Avis */ padding:.32rem .74rem;gap:.45rem; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 10px 30px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.32); } .rating-badge .stars5{width:90px} .rating-badge--hero .stars5{width:66px} .rating-badge--hero .rating-badge__txt{font-size:.72rem} .rating-badge__txt{font-family:var(--font-texte);font-size:.82rem;color:var(--ivoire-dim);letter-spacing:.02em;white-space:nowrap} .rating-badge__txt b{color:var(--ivoire);font-weight:600} /* grille de temoignages (masonry statique, facon Limova) */ .reviews__grid{columns:3;column-gap:clamp(1.2rem,2vw,1.6rem);max-width:1180px;margin-inline:auto} .reviews__more{display:flex;justify-content:center;margin-top:clamp(2rem,3vw,2.6rem)} .tcard{width:100%;break-inside:avoid;margin-bottom:clamp(1.2rem,2vw,1.6rem);background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.95rem;position:relative;box-shadow:var(--shadow-noir)} @media (max-width:900px){.reviews__grid{columns:2}} @media (max-width:600px){.reviews__grid{columns:1}} .tcard::before{content:"";position:absolute;top:0;left:9%;right:9%;height:1.5px;background:var(--grad-filet)} .tcard .stars5{width:104px} .tcard__text{color:var(--ivoire);font-size:.96rem;line-height:1.6;flex:1} .tcard__author{display:flex;align-items:center;gap:.7rem;margin-top:.2rem} .tcard__avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grad-or-btn);color:var(--noir);font-family:var(--font-texte);font-weight:700;font-size:.85rem;letter-spacing:.02em;flex:0 0 auto} .tcard__who{display:flex;flex-direction:column;line-height:1.3;text-align:left} .tcard__name{font-weight:600;color:var(--ivoire);font-size:.95rem} .tcard__meta{color:var(--ivoire-dim);font-size:.8rem} /* Avis : carte photo LARGE (paysage) — image plein fond, temoignage a gauche (desktop) / en bas (mobile), change au flash */ .tstage{max-width:980px;margin-inline:auto} .tstage__card{position:relative;aspect-ratio:2.4/1;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--or-border);box-shadow:var(--shadow-noir);background:var(--prune)} .tstage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .tstage__scrim{position:absolute;inset:0;z-index:1;background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.8) 32%, rgba(0,0,0,.32) 60%, transparent 86%), linear-gradient(0deg, rgba(0,0,0,.3), transparent 55%); } .tstage__body{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;max-width:min(58%,540px);padding:clamp(1.6rem,4vw,2.8rem)} .tstage__body .stars5{width:104px;fill:var(--or-eclat);margin-bottom:1rem;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))} .tstage__quote{color:var(--ivoire);font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.5;margin-bottom:1rem;text-shadow:0 1px 10px rgba(0,0,0,.55)} .tstage__name{font-family:var(--font-texte);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-base);text-shadow:0 1px 8px rgba(0,0,0,.5)} .tstage__flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none} .tstage__flash.fire{animation:tflash .62s ease} @keyframes tflash{0%{opacity:0}14%{opacity:.96}34%{opacity:.82}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.tstage__flash.fire{animation:none}} @media (max-width:720px){ .tstage__card{aspect-ratio:4/3.6} .tstage__scrim{background:linear-gradient(180deg, transparent 26%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 82%, var(--noir) 100%)} .tstage__body{left:0;right:0;top:auto;bottom:0;max-width:none;justify-content:flex-end;padding:clamp(1.4rem,5vw,2rem)} } /* partenaires : bande CLAIRE pleine largeur (cassure dans le noir) + bandeau 60% qui defile */ .partners{background:var(--ivoire);padding:clamp(2.4rem,5vw,3.6rem) clamp(1rem,4vw,2rem)} .partners__label{text-align:center;font-family:var(--font-texte);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0 0 1.7rem; /* fond ivoire -> variante sombre pour rester lisible */ background:var(--grad-or-sombre);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .marquee{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); } .marquee__row{display:flex;width:max-content;animation:marquee 20s linear infinite;will-change:transform} .marquee:hover .marquee__row{animation-play-state:paused} .marquee__group{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.6rem);padding-right:clamp(1.6rem,3vw,2.6rem);flex:0 0 auto} @keyframes marquee{to{transform:translateX(calc(-1 * var(--pw,50%)))}} .partners__marquee{width:clamp(300px,72vw,1060px);margin-inline:auto} .partners__item{flex:0 0 auto;display:grid;place-items:center;width:clamp(150px,18vw,208px);height:76px} .partners__item img{height:clamp(40px,4.9vw,56px);width:auto;max-width:100%;object-fit:contain} /* ---------- 7bis-2. NOS PRESTATIONS (2 colonnes chic) ---------- */ .presta{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,3rem)} .presta__head{text-align:center;max-width:840px;margin-inline:auto;margin-bottom:clamp(2.6rem,5vw,3.8rem);display:flex;flex-direction:column;align-items:center} .presta__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.2rem);max-width:1000px;margin-inline:auto} @media (max-width:760px){.presta__cols{grid-template-columns:1fr}} .presta-card{position:relative;display:flex;flex-direction:column;background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-noir)} .presta-card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1.5px;background:var(--grad-filet)} /* libellé Particuliers / Professionnels : meme taille que la baseline du hero, centré */ .presta-card__kicker{align-self:center;text-align:center;font-family:var(--font-texte);font-weight:500;font-size:clamp(.95rem,1.7vw,1.3rem);letter-spacing:.28em;text-transform:uppercase;margin-bottom:1.5rem; background:var(--grad-or);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .presta-list{display:flex;flex-direction:column;gap:.9rem;flex:1} .presta-list li{display:flex;align-items:center;gap:.85rem;color:var(--ivoire);font-size:1.02rem} .presta-list li::before{content:"";flex:0 0 auto;width:9px;height:9px;transform:rotate(45deg);background:var(--grad-or-btn);box-shadow:0 0 10px rgba(214,179,106,.4)} .presta-card__link{margin-top:1.7rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-texte);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsia);transition:filter .25s} .presta-card__link::after{content:"";width:1.05em;height:1.05em;flex:0 0 auto;background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .28s cubic-bezier(.76,0,.24,1)} .presta-card__link:hover{filter:brightness(1.15)} .presta-card__link:hover::after{transform:translateX(5px)} /* ---------- 7bis-3. NOS BORNES PHOTO (borne + description en vis-a-vis) ---------- */ .bornes{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,3rem)} .bornes__head{text-align:center;max-width:860px;margin-inline:auto;margin-bottom:clamp(2.8rem,5vw,4.2rem);display:flex;flex-direction:column;align-items:center} .borne{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:1120px;margin-inline:auto} .borne+.borne{margin-top:clamp(3rem,6vw,5rem)} .borne__body{grid-column:1;grid-row:1} .borne__media{grid-column:2;grid-row:1} .borne--reverse .borne__body{grid-column:2} .borne--reverse .borne__media{grid-column:1} /* panneau visuel : la borne (cutout) posee sur un fond velours + halo or */ .borne__media{position:relative;aspect-ratio:1/1;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--or-border);box-shadow:var(--shadow-noir); background:radial-gradient(80% 70% at 50% 22%, rgba(214,179,106,.16), transparent 62%), linear-gradient(160deg, var(--prune), var(--noir)); display:flex;align-items:flex-end;justify-content:center;padding:clamp(1.4rem,3vw,2.6rem)} .borne__media::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1.5px;background:var(--grad-filet)} .borne__media img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))} .borne__shadow{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);width:52%;height:20px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(6px)} /* texte de la borne */ /* nom de borne : meme typo que "Particuliers"/"Professionnels" (Josefin, or plat) */ .borne__name{font-family:var(--font-texte);font-weight:500;font-size:clamp(.95rem,1.7vw,1.3rem);letter-spacing:.28em;text-transform:uppercase;color:var(--or-base);line-height:1.3;margin-bottom:.9rem} .borne__price{font-family:var(--font-texte);color:var(--ivoire-dim);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:baseline;gap:.4rem} .borne__price b{font-family:var(--font-titre);font-weight:700;font-size:1.9em;letter-spacing:.01em} .borne__desc{color:var(--ivoire-dim);font-size:1.02rem;line-height:1.65;max-width:46ch;margin-bottom:1.5rem} .borne__list{display:flex;flex-direction:column;gap:.78rem;margin-bottom:1.9rem} .borne__list li{display:flex;align-items:center;gap:.85rem;color:var(--ivoire);font-size:1rem} .borne__list li::before{content:"";flex:0 0 auto;width:9px;height:9px;transform:rotate(45deg);background:var(--grad-or-btn);box-shadow:0 0 10px rgba(214,179,106,.4)} @media (max-width:820px){ .borne{grid-template-columns:1fr;gap:1.8rem} .borne__media,.borne--reverse .borne__media{grid-column:1;grid-row:1} .borne__body,.borne--reverse .borne__body{grid-column:1;grid-row:2} .borne__media{aspect-ratio:4/3.4} } /* ---------- 7ter. PARTICULIERS (machines flottantes) ---------- */ .parts{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,3rem)} .parts__head{text-align:center;max-width:820px;margin-inline:auto} .parts__lead{color:var(--ivoire-dim);max-width:60ch;margin:1.1rem auto 0;font-size:clamp(1rem,1.4vw,1.15rem)} .machines{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.6rem,5vw,4.2rem)} .machine{display:flex;flex-direction:column;align-items:center;text-align:center} .machine__media{position:relative;width:100%;height:clamp(250px,34vw,380px);display:flex;justify-content:center;align-items:flex-end} .machine__media img{ max-height:100%;width:auto;object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.5)); } .machine__shadow{ position:absolute;bottom:4px;left:50%;margin-left:-28%;width:56%;height:18px;border-radius:50%; background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%); filter:blur(5px); } .machine__cap{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire);margin-top:1.4rem} .machine__txt{color:var(--ivoire-dim);font-size:.98rem;max-width:36ch;margin:.55rem auto 0} .parts__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:clamp(2.6rem,5vw,3.8rem)} @media (max-width:760px){ .machines{grid-template-columns:1fr;gap:clamp(2.6rem,9vw,3.6rem)} } /* ---------- 7quater. PROFESSIONNELS (carrousel 3D rotatif) ---------- */ .pro-carousel{ --card-w:clamp(200px,25vw,290px); --radius:calc(var(--card-w) * 1.42); position:relative;height:calc(var(--card-w) * .9 + 96px); margin-top:clamp(2.8rem,5vw,4.4rem); perspective:1500px;perspective-origin:50% 42%; } /* galerie : titre centre + carrousel colle dessous */ .galerie__head{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)} .galerie .pro-carousel{margin-top:0} /* galerie : bande IVOIRE penchee (cassure claire, bords en diagonale facon PJ) */ .galerie{ --slant:clamp(28px,4vw,58px); background:var(--ivoire); clip-path:polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); padding:clamp(4.5rem,8vw,7rem) clamp(1.2rem,5vw,3rem); } /* contenu adapte au fond clair */ .galerie .eyebrow{background-image:var(--grad-or-sombre)} .galerie .eyebrow::before,.galerie .eyebrow::after{background:var(--or-fonce)} /* fond ivoire : l'or en texte serait illisible -> bouton sombre + anneau dore, remplissage or au survol */ .galerie .btn--primary{background:var(--noir);color:var(--ivoire);box-shadow:0 6px 22px rgba(0,0,0,.28)} .galerie .btn--primary:hover{background-image:var(--grad-or-btn);color:var(--noir);box-shadow:0 12px 30px rgba(214,179,106,.35)} /* halo dore derriere l'anneau */ .pro-carousel::before{ content:"";position:absolute;left:50%;top:52%;width:78%;height:64%;transform:translate(-50%,-50%); background:radial-gradient(ellipse at center,rgba(214,179,106,.18),rgba(110,85,39,.08) 45%,transparent 72%); filter:blur(26px);pointer-events:none; } .pro-stage{position:absolute;top:50%;left:50%;width:var(--card-w);height:calc(var(--card-w) * .667);transform:translate(-50%,-50%);transform-style:preserve-3d} .pro-ring{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 48s linear infinite} .pro-carousel:hover .pro-ring{animation-play-state:paused} .pro-card{ position:absolute;inset:0;backface-visibility:hidden; transform:rotateY(calc(var(--i) * 40deg)) translateZ(var(--radius)); border-radius:12px;overflow:hidden;background:var(--prune); border:1px solid var(--or-border); box-shadow:0 24px 46px -18px rgba(0,0,0,.6); } .pro-card img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden} @keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}} @media (max-width:600px){ .pro-carousel{--card-w:158px;perspective:1000px} } /* ---------- 7quinquies. A PROPOS (pourquoi nous) ---------- */ .about{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,3rem)} .about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .about__media{position:relative;justify-self:center;width:100%;max-width:280px} .about__media img{position:relative;z-index:1;width:100%;max-width:280px;border-radius:22px;border:6px solid var(--or-base);box-shadow:var(--shadow-noir);transform:rotate(-3deg)} .about__media::after{content:"";position:absolute;z-index:0;inset:auto -7% -9% auto;width:48%;aspect-ratio:1;border-radius:46% 54% 38% 62%/55% 45% 60% 40%;background:radial-gradient(circle,rgba(214,179,106,.24),transparent 70%)} .about__lead{color:var(--ivoire-dim);margin-top:1.2rem;font-size:clamp(1rem,1.4vw,1.15rem);max-width:54ch} .about__list{margin-top:1.7rem;display:grid;gap:.85rem} .about__list li{display:flex;align-items:flex-start;gap:.7rem;color:var(--ivoire);font-weight:500} .about__list li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--grad-or-btn);box-shadow:0 4px 12px rgba(214,179,106,.28); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/64% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/64% no-repeat; } .about__cta{margin-top:clamp(1.8rem,3vw,2.4rem);display:flex;justify-content:center} @media (max-width:860px){ .about__grid{grid-template-columns:1fr;gap:2.4rem} .about__media{order:-1} } /* ---------- 7sexies. LES PETITS PLUS (cartes prestations) ---------- */ .plus{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,3rem)} .plus__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.4rem);margin-top:clamp(2.6rem,5vw,3.8rem)} .plus-card{position:relative;display:flex;flex-direction:column;background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-noir);transition:transform .3s,box-shadow .3s} .plus-card::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1.5px;background:var(--grad-filet);z-index:2} .plus-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-or-soft)} .plus-card__media{aspect-ratio:4/3;overflow:hidden} .plus-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .plus-card:hover .plus-card__media img{transform:scale(1.05)} .plus-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.3rem,2.4vw,1.8rem)} .plus-card__title{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire);margin-bottom:.55rem} .plus-card__txt{color:var(--ivoire-dim);font-size:.97rem;flex:1} .plus-card__btn{align-self:flex-start;margin-top:1.5rem;padding:.75rem 1.4rem;font-size:.8rem} @media (max-width:760px){.plus__grid{grid-template-columns:1fr}} /* ---------- 8. BLOC CTA FINAL (capsule) ---------- */ .final-cta{padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,5vw,3rem) clamp(2.5rem,5vw,4rem)} .final-cta__capsule{ max-width:960px;margin-inline:auto;text-align:center;position:relative;overflow:hidden; padding:clamp(2.4rem,5vw,4.2rem) clamp(1.6rem,5vw,4rem); border-radius:clamp(28px,5vw,56px); background: radial-gradient(80% 130% at 12% 8%, rgba(214,179,106,.16), transparent 58%), radial-gradient(80% 130% at 88% 92%, rgba(110,85,39,.16), transparent 58%), var(--prune); border:1px solid var(--or-border);box-shadow:var(--shadow-noir); } .final-cta__capsule::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--grad-filet)} .final-cta__capsule .eyebrow{color:var(--or-base)} .final-cta__capsule .eyebrow::before{background:var(--grad-filet)} /* Legerement au-dessus de l'echelle des H2 : c'est le point d'arrivee de la page. */ .final-cta__title{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.1;text-transform:uppercase;letter-spacing:.02em;margin-top:.3rem;text-wrap:balance} .final-cta__title em{font-style:normal} .final-cta__txt{color:var(--ivoire-dim);max-width:54ch;margin:1.1rem auto 0;font-size:clamp(1rem,1.4vw,1.15rem)} .final-cta__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem} /* ---------- 9. FOOTER ---------- */ /* footer : meme fond que le site (velours), aucune cassure de couleur */ .site-footer{position:relative;z-index:2;margin-top:clamp(1.5rem,4vw,2.5rem);padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,3rem) 2rem;background:transparent} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(1.8rem,4vw,3rem)} .footer__logo{height:94px;width:auto;margin-bottom:1rem} .footer__tag{color:var(--ivoire-dim);font-size:.92rem;max-width:34ch;margin-bottom:1.2rem;line-height:1.5} .footer__socials{display:flex;gap:.7rem} .footer__social{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(214,179,106,.06);border:1px solid var(--or-border);transition:transform .25s,border-color .25s} .footer__social:hover{transform:translateY(-3px);border-color:var(--or-base)} .footer__social svg{width:19px;height:19px;fill:var(--ivoire)} .footer__h{font-family:var(--font-texte);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-base);margin-bottom:1rem;font-weight:600} .footer__col{display:flex;flex-direction:column;gap:.6rem} .footer__col a{color:var(--ivoire-dim);font-size:.94rem;transition:color .25s;width:fit-content} .footer__col a:hover{color:var(--or-base)} .footer__muted{color:var(--ivoire-dim);font-size:.9rem;line-height:1.5} .footer__news .footer__muted{margin-bottom:.9rem} .footer__form{display:flex;gap:.5rem;background:rgba(214,179,106,.06);border:1px solid var(--or-border);border-radius:999px;padding:.3rem .3rem .3rem 1rem;max-width:300px} .footer__form input{flex:1;border:none;background:none;font:inherit;color:var(--ivoire);min-width:0} .footer__form input::placeholder{color:var(--ivoire-dim)} .footer__form input:focus{outline:none} .footer__form button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--grad-or-btn);color:var(--noir);font-size:1.15rem;line-height:1;display:grid;place-items:center;box-shadow:0 6px 18px rgba(214,179,106,.3);transition:transform .2s} .footer__form button:hover{transform:scale(1.06)} .footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--or-hair)} /* Signature « Réalisé par ClickMySite », centree entre copyright et liens legaux (le space-between du footer__bottom place l'element median au milieu). Au survol : meme roll « machine a sous » que les liens du header — le slot est injecte par main.js dans le (le nom roule, pas le libelle). */ .footer__griffe{font-size:.78rem;color:var(--ivoire-dim);text-decoration:none} .footer__griffe b{font-weight:600;color:var(--or-clair)} .footer__bottom p{color:var(--ivoire-dim);font-family:var(--font-texte);font-size:.74rem;letter-spacing:.06em} .footer__bottom b{color:var(--or-base);font-weight:600} .footer__legal{display:flex;flex-wrap:wrap;gap:1.3rem} .footer__legal a{color:var(--ivoire-dim);font-family:var(--font-texte);font-size:.74rem;letter-spacing:.06em;transition:color .25s} .footer__legal a:hover{color:var(--or-base)} @media (max-width:860px){ .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .footer__grid{grid-template-columns:1fr} .footer__bottom{flex-direction:column;align-items:flex-start;gap:.8rem} } /* ---------- 11. BOUTON DEVIS FLOTTANT (mobile) ---------- Rempli d'or / texte noir, et non le contour a reflet des autres CTA : pose sur du contenu qui defile derriere lui, un contour transparent ne tiendrait pas le contraste. C'est aussi l'action principale du site. z-index 55 : au-dessus de la nav (50), sous le flash (90) et le tunnel (1000). Affichage pilote par main.js -> .is-in (cf. bloc 4 de main.js). */ .fab-devis{ position:fixed;z-index:55; /* coin inferieur droit ; les deux env() evitent la barre d'accueil iOS en portrait et l'encoche en paysage */ right:calc(1rem + env(safe-area-inset-right,0px)); bottom:calc(1rem + env(safe-area-inset-bottom,0px)); white-space:nowrap; display:none;align-items:center;gap:.45rem; padding:.85rem 1.2rem;border-radius:var(--radius-btn); font-family:var(--font-texte);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; background-image:var(--grad-or-btn);color:var(--noir); box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(214,179,106,.4); /* etat de repos : escamote sous l'ecran */ transform:translateY(160%);opacity:0;pointer-events:none; transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease; } .fab-devis svg{width:1.05em;height:1.05em;flex:0 0 auto} /* mobile uniquement : au-dela, le CTA du header reste visible en permanence */ @media (max-width:760px){.fab-devis{display:inline-flex}} .fab-devis.is-in{transform:translateY(0);opacity:1;pointer-events:auto} /* NB : le tunnel est desormais une page dediee sans footer commun, le bouton flottant n'y existe pas — plus besoin de l'escamoter a l'ouverture. */ @media (prefers-reduced-motion:reduce){.fab-devis{transition:opacity .2s ease}} /* ---------- 11b. FLASH PLEIN ECRAN (envoi formulaire) ---------- */ .flash{position:fixed;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none} .flash.fire{animation:flashfire .35s ease} @keyframes flashfire{0%{opacity:0}10%{opacity:.95}100%{opacity:0}} /* confettis */ .confetti{position:fixed;z-index:85;width:10px;height:14px;pointer-events:none;border-radius:2px} /* ---------- 12. REVEALS ---------- */ .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.9,.2,1),transform .9s cubic-bezier(.2,.9,.2,1)} .reveal.is-in{opacity:1;transform:none} .reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s} /* ---------- 13. RESPONSIVE ---------- */ @media (max-width:1024px){ .nav__burger{display:block} .nav__panel{ display:none;position:absolute;top:100%;left:0;right:0; margin-top:.5rem;padding:1.4rem clamp(1.2rem,5vw,2rem); flex-direction:column;align-items:stretch;gap:1.2rem; background:rgba(33,27,38,.98);backdrop-filter:blur(16px);border-top:1px solid var(--or-border);box-shadow:var(--shadow-noir); } .nav__panel.open{display:flex} .nav__links--left,.nav__right{grid-column:auto;justify-self:auto;flex-direction:column;align-items:flex-start;gap:1.1rem;width:100%} .nav__cta{align-self:flex-start} /* sous-menus en accordeon dans le menu burger */ .nav__panel .nav__item{width:100%;flex-direction:column;align-items:flex-start} .nav__panel .nav__top{width:100%;justify-content:space-between;font-size:.9rem;color:var(--or-base)} .nav__panel .nav__sub{ position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; background:transparent;border:none;box-shadow:none;min-width:0;margin:.35rem 0 0;padding:.1rem 0 .1rem 1rem;display:none; } .nav__panel .nav__item--sub.open .nav__sub{display:flex} /* Pas de pont de survol en accordeon : le sous-menu passe en position:static, le ::before absolu se recalerait sur .nav__item et intercepterait des clics. */ .nav__panel .nav__sub::before{display:none} .hero__cols{grid-template-columns:1fr;gap:2.6rem} .hero-shot{justify-self:stretch;width:100%;max-width:420px;margin-top:.4rem} } @media (max-width:560px){ /* Plus de reglage de .section-title ici : le clamp de base couvre desormais tout le spectre (24 px sous 780 px de large, 40 px au-dela). Une regle mobile separee reintroduisait une rupture de 13 px au passage du seuil. */ .nav__cta{font-size:.7rem;padding:.5rem .9rem} } /* ---------- 14. ACCESSIBILITE MOUVEMENT ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .gold-shine{animation:none} .reveal,.develop{opacity:1;transform:none;filter:none} .hero__video{display:none} /* pas d'auto-play : on garde le poster statique */ } /* ============================================================ TUNNEL DE DEVIS (/devis) — page dediee en mode FOCUS L'ancien overlay est remplace par une page : pas de nav ni de footer, seul le logo et une sortie discrete (chaque lien est une sortie de tunnel). Le montage JS vit dans #devisMount, l'estimation courante dans une barre collee en bas de fenetre. ============================================================ */ /* Barre minimale, sans separation : retour a gauche, logo centre. Meme grille que la nav du site (1fr auto 1fr) pour que le logo tombe au meme endroit, et meme hauteur d'image (.brand__logo, 92 px). */ .focus-bar{position:relative;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:1rem;padding:.9rem clamp(1.2rem,4vw,3rem);background:transparent} .focus-bar__brand{grid-column:2;justify-self:center;display:grid;place-items:center;line-height:0} .focus-bar__retour{grid-column:1;justify-self:start; font-family:var(--font-texte);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ivoire-dim);transition:color .2s} .focus-bar__retour::before{content:"\2190\00a0"} .focus-bar__retour:hover{color:var(--or-clair)} @media (max-width:560px){ /* le logo pleine taille mangerait l'ecran a cote du lien de retour */ .focus-bar .brand__logo{height:62px} } /* colonne centrale etroite : une decision par ecran */ /* 940px : il faut de la place pour deux colonnes lisibles a l'ecran coordonnees. Les ecrans a colonne unique restent bornes par leurs propres largeurs (.devis-form 520px, .devis-choices 720px). */ .devis-page{position:relative;z-index:1;max-width:940px;margin-inline:auto; padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,4vw,2rem) clamp(2.4rem,5vw,4rem)} .devis-page__head{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)} .devis-page__title{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire)} .devis-mount{min-height:280px} /* Hauteur du tunnel : deux mecanismes complementaires contre les sauts. 1. Un PLANCHER qui aligne tous les ecrans courts (client 192px, evenement 285px, date 369px, details 401px) sur une meme hauteur : l'enchainement des premieres etapes ne bouge plus du tout. 2. Une TRANSITION de hauteur (pilotee par devis.js) pour les ecrans qui depassent forcement ce plancher — formules, extras, coordonnees : leur contenu est reellement plus grand, on ne peut pas le comprimer, mais on passe de l'un a l'autre en glissant au lieu de sauter. `overflow` n'est bride que PENDANT l'animation (classe is-morph) : en permanence il rognerait les halos de focus et les ombres des cartes. */ .devis__body{min-height:26rem;transition:height .38s cubic-bezier(.16,1,.3,1)} .devis__body.is-morph{overflow:hidden} @media (max-height:700px){.devis__body{min-height:20rem}} @media (prefers-reduced-motion:reduce){.devis__body{transition:none}} /* reassurance : discrete, sous le tunnel */ .devis-reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem; margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--or-border)} .devis-reassure__item{display:inline-flex;align-items:center;gap:.5rem;color:var(--ivoire);font-size:.82rem} .devis-reassure .stars5{width:74px} /* WhatsApp seul sur sa ligne, sous les deux mentions : flex-basis 100% force le retour a la ligne quelle que soit la largeur disponible. */ .devis-reassure__wa{flex:0 0 100%;justify-content:center;margin-top:.2rem; color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .devis-reassure__wa:hover{color:var(--or-eclat)} /* progression : barre simple, remplissage dore proportionnel (sans libelle) */ .devis__progress{margin:0 0 2rem} .devis-prog__track{height:4px;border-radius:999px;background:var(--or-hair);overflow:hidden} .devis-prog__fill{display:block;height:100%;border-radius:999px;background:var(--grad-or); transition:width .5s cubic-bezier(.16,1,.3,1)} /* têtes d'ecran : la question seule */ .devis__head{text-align:center;margin-bottom:1.8rem} /* Titres du tunnel en Josefin (vraies minuscules) : Cinzel n'a que des capitales, trop demonstratif pour un parcours. La graisse legere fait le premium. */ .devis__title{font-family:var(--font-texte);font-weight:300;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;color:var(--ivoire);letter-spacing:.01em} /* pied d'ecran : « Précédent » SOUS le CTA principal */ .devis__pied{margin-top:1.6rem;text-align:center} .devis__back{background:none;border:none;padding:0;cursor:pointer; font-family:var(--font-texte);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ivoire);opacity:.75;transition:opacity .2s,color .2s} .devis__back:hover{opacity:1;color:var(--or-clair)} /* choix (client / événement) : cartes a fleche, memes codes que le site */ /* borne a 720px : avec 2 ou 3 cartes seulement, auto-fit les etirerait sur toute la largeur de la page desormais elargie */ .devis-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-width:720px;margin-inline:auto} .devis-card{position:relative;display:flex;flex-direction:column;gap:.35rem;text-align:left; padding:1.5rem 3rem 1.5rem 1.5rem;border-radius:var(--radius-card); background:var(--prune);border:1px solid var(--or-border);color:var(--ivoire);cursor:pointer; box-shadow:var(--shadow-noir);transition:border-color .25s,transform .25s,box-shadow .25s} .devis-card::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1.5px;background:var(--grad-filet)} .devis-card::after{content:"";position:absolute;right:1.1rem;top:50%;width:.55em;height:.55em; border-right:2px solid var(--or-base);border-top:2px solid var(--or-base); transform:translateY(-50%) rotate(45deg);opacity:.45;transition:opacity .25s,transform .25s} .devis-card:hover{border-color:var(--or-base);transform:translateY(-3px);box-shadow:var(--shadow-or-soft)} .devis-card:hover::after{opacity:1;transform:translateY(-50%) translateX(4px) rotate(45deg)} .devis-card:focus-visible{outline:2px solid var(--or-base);outline-offset:2px} .devis-card__t{font-family:var(--font-texte);font-weight:600;font-size:1.08rem;letter-spacing:.02em} .devis-card__s{color:var(--ivoire);font-size:.9rem} /* formulaires : champs sobres, focus dore */ .devis-form{display:grid;gap:1rem;max-width:520px;margin-inline:auto} /* Dans la grille a deux colonnes, le formulaire doit REMPLIR sa colonne. `margin-inline:auto` sur un element de grille annule l'etirement par defaut (les marges auto absorbent l'espace libre) : le formulaire se dimensionnait sur son contenu — 173 px au lieu de 415 — d'ou l'aspect ecrase et l'enorme vide entre les deux colonnes. */ .devis-contact .devis-form{max-width:none;margin-inline:0} .devis-field{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--ivoire);text-align:left} .devis-field em{font-style:normal;opacity:.7} .devis-field input,.devis-field select,.devis-field textarea{width:100%;padding:.8rem .9rem;border-radius:10px;color:var(--ivoire);font:inherit; background:rgba(255,255,255,.04);border:1px solid var(--or-border);transition:border-color .2s,box-shadow .2s; /* color-scheme:dark : sans lui le calendrier natif de et la liste deroulante du natif ignore la plupart des styles : on neutralise son habillage systeme (appearance:none) et on redessine le chevron en SVG line-art encode en data-URI — l'entite %3E evite de casser l'attribut. Padding droit reserve a la fleche pour que le libelle ne passe jamais dessous. */ .devis-field select{ appearance:none;-webkit-appearance:none; padding-right:2.6rem;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6B36A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .9rem center;background-size:1.05rem} .devis-field select:hover{border-color:var(--or-base)} /* Liste deroulante ouverte : rendue par le systeme, seules ces deux proprietes sont honorees (et seulement sur les navigateurs de bureau). */ .devis-field select option{background:var(--prune);color:var(--ivoire)} .devis-actions{margin-top:.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem} /* formules : la reco en or, prix en degrade metallique */ .devis-formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem} .devis-formule{position:relative;display:flex;flex-direction:column;padding:1.7rem 1.4rem 1.5rem;border-radius:var(--radius-card); background:var(--prune);border:1px solid var(--or-border);box-shadow:var(--shadow-noir)} .devis-formule.is-reco{border-color:var(--or-base);box-shadow:var(--shadow-or-soft)} .devis-formule__tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap; font-family:var(--font-texte);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--noir);background-image:var(--grad-or-btn);padding:.32rem .85rem;border-radius:999px} .devis-formule__nom{font-family:var(--font-titre);font-weight:600;font-size:1.15rem;color:var(--ivoire);letter-spacing:.02em;text-transform:uppercase} .devis-formule__sous{color:var(--ivoire);font-size:.85rem;margin-bottom:.9rem} .devis-formule__inclus{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.45rem} .devis-formule__inclus li{display:flex;align-items:flex-start;gap:.55rem;color:var(--ivoire);font-size:.9rem;line-height:1.45} .devis-formule__inclus li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.45em;transform:rotate(45deg);background:var(--grad-or-btn)} .devis-formule__prix{margin-top:auto;margin-bottom:1rem;display:flex;flex-direction:column;gap:.15rem} .devis-formule__price{font-family:var(--font-titre);font-weight:700;font-size:2rem;line-height:1.1; background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .devis-formule__devis{font-family:var(--font-titre);font-weight:700;font-size:1.4rem;color:var(--ivoire)} .devis-formule__carte{font-size:.82rem;color:var(--ivoire-dim);text-decoration:line-through} .devis-formule__eco{font-family:var(--font-texte);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)} .devis-alt{margin-top:1.4rem;text-align:center} .devis-link{background:none;border:none;color:var(--ivoire);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s} .devis-link:hover{color:var(--or-clair)} /* à la carte */ .devis-carte{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;text-align:left} .devis-carte__col h3{font-family:var(--font-titre);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--or-base);margin-bottom:.8rem} /* Une colonne porte desormais deux titres (offres de la borne photo, puis autres dispositifs) : le second doit respirer sans creer d'ecart en tete. */ .devis-carte__col h3 + *{margin-top:0} .devis-carte__col h3:not(:first-child){margin-top:1.6rem} .devis-carte__aide{font-size:.86rem;line-height:1.45;color:var(--ivoire);margin:-.4rem 0 .8rem} .devis-item{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:12px;margin-bottom:.5rem;cursor:pointer; background:rgba(255,255,255,.03);border:1px solid var(--or-hair);transition:border-color .2s,background .2s} .devis-item:hover{border-color:var(--or-border)} .devis-item.is-on{border-color:var(--or-base);background:rgba(214,179,106,.08)} .devis-item input{accent-color:var(--or-base);width:18px;height:18px} .devis-item__n{flex:1;color:var(--ivoire);font-size:.92rem} .devis-item__p{font-family:var(--font-texte);font-weight:600;font-size:.85rem;color:var(--or-clair)} .devis-carte__foot{margin-top:1.2rem} .devis-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.1rem;border-radius:14px;background:var(--prune);border:1px solid var(--or-border)} .devis-total span{color:var(--ivoire)} /* detail des extras choisis : une ligne compacte par extra */ .devis-total--extras{padding:.5rem 1.1rem;font-size:.88rem} .devis-total--extras b{font-size:.95rem;font-weight:600;color:var(--ivoire)} .devis-total b{font-family:var(--font-titre);font-weight:700;font-size:1.5rem; background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .devis-total--grand{border-color:var(--or-base)} .devis-nudge{margin-top:.8rem;padding:.9rem 1.1rem;border-radius:14px;background:rgba(214,179,106,.07);border:1px solid var(--or-border);color:var(--ivoire);font-size:.92rem} .devis-nudge b{color:var(--or-clair)} /* ---------- Champs de facturation (professionnels) ---------- */ /* Pas de carte autour : ces champs sont dans la meme continuite visuelle que nom / e-mail / telephone. Seul un intitule discret les regroupe, et l'ecart reprend celui du formulaire (1rem) pour un rythme homogene. */ .devis-pro{display:grid;gap:1rem;margin:.4rem 0 0} .devis-pro__t{font-family:var(--font-texte);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-base)} .devis-field-row{display:grid;grid-template-columns:1fr 2fr;gap:1rem} @media (max-width:520px){.devis-field-row{grid-template-columns:1fr}} /* Piege a robots : sorti du flux sans display:none ni visibility:hidden, que certains automates detectent et contournent. */ .devis-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Bloc de validation : hors de la colonne du formulaire, centre sur toute la largeur de la page, juste avant « Précédent ». */ .devis-valider{display:grid;justify-items:center;gap:1.1rem;margin-top:1.8rem} /* Le texte reste aligne a gauche (multiligne centre = illisible), c'est le bloc entier qui est centre. */ /* 560px : largeur calee pour que la phrase tienne sur DEUX lignes (elle en prenait trois a 46ch/376px). */ .devis-consent{display:flex;align-items:flex-start;gap:.6rem;max-width:560px;text-align:left; color:var(--ivoire);font-size:.82rem;line-height:1.5;cursor:pointer} .devis-consent input{flex:0 0 auto;margin-top:.2rem;width:17px;height:17px;accent-color:var(--or-base)} .devis-consent a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} /* ---------- Etape upsell : cartes extras illustrees ---------- Memes codes que .devis-card (fond prune, filet dore en tete, elevation au survol) ; seules 3 vedettes sont exposees, d'ou des visuels plus grands. */ .devis-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .devis-extra{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.1rem;border-radius:var(--radius-card);text-align:left; background:var(--prune);border:1px solid var(--or-border);box-shadow:var(--shadow-noir); transition:border-color .25s,transform .25s,box-shadow .25s} .devis-extra::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1.5px;background:var(--grad-filet)} .devis-extra:hover{border-color:var(--or-base);transform:translateY(-3px);box-shadow:var(--shadow-or-soft)} .devis-extra.is-on{border-color:var(--or-base);box-shadow:var(--shadow-or-soft)} .devis-extra.is-inclus{opacity:.85} /* visuel large : c'est lui qui vend l'extra */ .devis-extra__media{display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:rgba(214,179,106,.06)} .devis-extra__media img{width:100%;height:100%;object-fit:contain;padding:.4rem} .devis-extra__media--icone svg{width:46px;height:46px;color:var(--or-base)} .devis-extra__n{color:var(--ivoire);font-family:var(--font-texte);font-weight:600;font-size:1rem;line-height:1.3} .devis-extra__s{color:var(--ivoire);font-size:.82rem;line-height:1.5;flex:1} .devis-extra__p{font-family:var(--font-texte);font-weight:600;color:var(--or-clair);font-size:.95rem} .devis-extra__btn{align-self:stretch;padding:.6rem 1rem;border-radius:var(--radius-btn);cursor:pointer;font:inherit;font-size:.78rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--noir);background-image:var(--grad-or-btn);border:none;transition:filter .2s} .devis-extra__btn:hover{filter:brightness(1.08)} .devis-extra.is-on .devis-extra__btn{background-image:none;background:transparent;color:var(--ivoire);border:1px solid var(--or-border)} .devis-extra__badge{align-self:flex-start;padding:.35rem .7rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--or-clair);border:1px solid var(--or-border);background:rgba(214,179,106,.08)} /* repli des extras non recommandes */ .devis-extras__plus{text-align:center;margin-top:1.2rem} .devis-extras--reste{margin-top:1rem} .devis-extras--reste[hidden]{display:none} /* Plus de totaux sous l'etape upsell : le recapitulatif chiffre arrive a l'ecran suivant (coordonnees), inutile de le dupliquer ici. */ @media (max-width:760px){.devis-extras{grid-template-columns:1fr 1fr}} @media (max-width:520px){.devis-extras{grid-template-columns:1fr}} /* vignettes des extras dans la vue a la carte */ .devis-item__media{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;overflow:hidden;background:rgba(214,179,106,.06)} .devis-item__media img{width:100%;height:100%;object-fit:contain;padding:.15rem} .devis-item__media--icone svg{width:22px;height:22px;color:var(--or-base)} /* contact + récap */ /* 35 % recapitulatif / 10 % d'ecart / 55 % formulaire. min-width:0 indispensable : sans lui, une piste de grille prend au minimum la taille de son contenu, et un mot long (« commerciaux ») elargit la colonne au-dela des 35 % demandes. */ /* Ecart fixe plutot qu'un pourcentage : a 10 % il valait 76 px et separait visuellement les deux colonnes au lieu de les relier. */ .devis-contact{display:grid;grid-template-columns:34% 1fr;gap:2.6rem;text-align:left} .devis-contact > *{min-width:0} /* Recapitulatif colle pendant la saisie : le formulaire pro est long, le montant doit rester sous les yeux. `top` reduit depuis que la barre de logo n'est plus collante (elle defile avec la page). Sur mobile la colonne passe au-dessus du formulaire, ou coller mangerait la moitie de l'ecran. */ .devis-recap{align-self:start;position:sticky;top:1.5rem; padding:1.3rem;border-radius:var(--radius-card);background:var(--prune);border:1px solid var(--or-border);box-shadow:var(--shadow-noir)} @media (max-width:760px){.devis-recap{position:static}} .devis-recap__row{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--or-hair);font-size:.9rem} .devis-recap__row span:first-child{color:var(--ivoire)} .devis-recap__row span:last-child{color:var(--ivoire);text-align:right} .devis-recap__total{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-top:.8rem;flex-wrap:wrap} .devis-recap__total b{font-family:var(--font-titre);font-weight:700;font-size:1.8rem;line-height:1.1;white-space:nowrap; background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* « Sur devis » n'est pas un montant : a 1.8rem il se cassait en deux lignes dans une colonne de 35 %. */ .devis-recap__total b.est-texte{font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase} .devis-recap__note{color:var(--ivoire-dim);font-size:.75rem;margin-top:.6rem} .devis-done{text-align:center;padding:2rem 1rem} .devis-done h2{font-family:var(--font-titre);font-weight:600;font-size:2rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire);margin-bottom:.6rem} .devis-done p{color:var(--ivoire);max-width:44ch;margin:0 auto 1.4rem} @media (max-width:760px){ .devis-contact,.devis-carte{grid-template-columns:1fr} } .devis-done p{color:var(--lilas);max-width:42ch;margin:0 auto 1.4rem} @media (max-width:720px){ .devis-carte,.devis-contact{grid-template-columns:1fr} .devis__panel{padding:3.4rem 1.1rem 1.4rem} } /* ============================================================ CARROUSEL ACCORDEON — Bornes & extras Carte repliee : image plein cadre + nom vertical. Carte active : image cantonnee a DROITE, infos sur la surface de la carte a GAUCHE -> aucun texte par-dessus l'image. ============================================================ */ .carou__nav{display:flex;justify-content:flex-end;gap:.6rem;margin:0 0 1rem} .carou__arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer; background:transparent;border:1px solid rgba(214,179,106,.45);color:var(--or-base); transition:background .25s,border-color .25s,transform .25s} .carou__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .carou__arrow:hover{background:rgba(214,179,106,.12);border-color:var(--or-base);transform:translateY(-2px)} .carou{display:flex;gap:clamp(8px,1vw,14px);height:clamp(380px,44vw,520px)} .carou__item{ position:relative;flex:1 1 0;min-width:0;overflow:hidden; border-radius:var(--radius-card);border:1px solid rgba(214,179,106,.22); background:linear-gradient(160deg,var(--prune),var(--noir));box-shadow:var(--shadow-noir); transition:flex-grow .85s cubic-bezier(.16,1,.3,1),border-color .5s; } .carou__item.is-active{flex-grow:6;border-color:rgba(214,179,106,.5)} /* image : ancree a droite -> plein cadre repliee, 54 % une fois active */ .carou__img{position:absolute;top:0;right:0;height:100%;width:100%; transition:width .85s cubic-bezier(.16,1,.3,1),filter .6s} .carou__item.is-active .carou__img{width:54%; /* fondu : l'image se dissout dans la carte cote texte (pas de bord net) */ -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 44%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 44%)} .carou__item--produit .carou__img{object-fit:contain;object-position:center 46%;padding:clamp(.6rem,1.4vw,1.5rem)} /* Replie, le visuel remonte : il degage ainsi le bas de la carte, ou court le nom en vertical. N'affecte pas la carte active (qui garde 46%). Borne a >900px : en dessous l'accordeon devient une pile et l'etat replie n'existe plus. Sans cette borne, ce selecteur (0,3,0) battrait la regle mobile qui remet 46% (0,2,0) et decalerait les images pour rien. */ @media (min-width:901px){ .carou__item--produit:not(.is-active) .carou__img{object-position:center 34%} } .carou__item--photo .carou__img{object-fit:cover} .carou__item:not(.is-active) .carou__img{filter:saturate(.45) brightness(.6)} /* fond du bord gauche de l'image vers la carte (raccord doux, pas de couture) */ .carou__scrim{position:absolute;top:0;right:0;height:100%;width:54%;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.42)); transition:opacity .6s .1s} .carou__item.is-active .carou__scrim{opacity:1} /* halo dore derriere le produit actif */ .carou__item--produit.is-active::before{ content:"";position:absolute;right:27%;top:48%;width:34%;height:56%;transform:translate(50%,-50%); background:radial-gradient(circle,rgba(214,179,106,.22),transparent 68%);pointer-events:none;z-index:1} /* nom vertical quand la carte est repliee */ /* La rotation DOIT rester dans le transform, pas dans la propriete `rotate` : l'ordre normatif est translate -> rotate -> scale -> transform, donc un `rotate:180deg` s'applique APRES le translateX(-50%) et en inverse le sens. Le texte se retrouvait alors decale de +50% (19,6 px trop a droite). */ .carou__spine{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%) rotate(180deg);z-index:2; writing-mode:vertical-rl;white-space:nowrap; font-family:var(--font-texte);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--or-clair);text-shadow:0 2px 10px rgba(0,0,0,.7); transition:opacity .4s;pointer-events:none} .carou__item.is-active .carou__spine{opacity:0} /* panneau d'infos : occupe les 46 % restants, jamais sur l'image */ .carou__content{position:absolute;left:0;top:0;bottom:0;width:46%;z-index:2; display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.45rem; padding:clamp(1.1rem,2.2vw,2.1rem); opacity:0;transform:translateX(-12px);pointer-events:none; transition:opacity .55s .2s cubic-bezier(.16,1,.3,1),transform .55s .2s cubic-bezier(.16,1,.3,1)} .carou__item.is-active .carou__content{opacity:1;transform:none;pointer-events:auto} .carou__name{font-family:var(--font-texte);font-weight:500;font-size:clamp(.88rem,1.25vw,1.1rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire);line-height:1.35} .carou__price{font-family:var(--font-texte);font-size:.88rem;color:var(--ivoire-dim)} .carou__desc{color:var(--ivoire-dim);font-size:.86rem;line-height:1.5} .carou__list{list-style:none;margin:.2rem 0 .7rem;padding:0;display:grid;gap:.3rem} .carou__list li{display:flex;align-items:flex-start;gap:.5rem;color:var(--ivoire);font-size:.82rem;line-height:1.4} .carou__list li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.42em;transform:rotate(45deg);background:var(--grad-or-btn)} /* margin-top : detache le CTA de la liste d'arguments, dont il etait trop proche. S'ajoute au gap .45rem du conteneur et au margin-bottom .7rem de .carou__list. */ .carou__content .btn{font-size:.72rem;padding:.55rem 1.1rem;margin-top:.85rem} /* zone cliquable quand la carte est repliee */ .carou__hit{position:absolute;inset:0;z-index:3;cursor:pointer;background:none;border:none;padding:0} .carou__item.is-active .carou__hit{display:none} .carou__hit:focus-visible{outline:2px solid var(--or-base);outline-offset:-4px} /* dots */ .carou__dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem} .carou__dot{width:9px;height:9px;border-radius:999px;cursor:pointer;padding:0;border:1px solid rgba(214,179,106,.5); background:transparent;transition:width .45s cubic-bezier(.16,1,.3,1),background .3s} .carou__dot.is-on{width:30px;background:var(--grad-or-btn);border-color:transparent} /* Etroit : l'accordeon (elargissement par flex-grow) ne tient pas sur un ecran de telephone. On garde un carrousel, mais sous sa forme tactile : un rail horizontal a scroll-snap, une carte par ecran, image en haut et infos dessous. Fleches et points restent les memes commandes qu'en grand. La synchro rail <-> points est dans main.js. */ @media (max-width:900px){ .carou{ height:auto;gap:1rem; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* la position est deja donnee par les points */ scroll-behavior:smooth; } .carou::-webkit-scrollbar{display:none} /* une carte pleine largeur ; flex-grow neutralise, sinon .is-active (0,2,0) reimposerait l'elargissement de l'accordeon */ .carou__item,.carou__item.is-active{flex:0 0 100%;scroll-snap-align:center} .carou__img{position:relative;width:100%;height:clamp(190px,42vw,260px)} .carou__item.is-active .carou__img{width:100%;-webkit-mask-image:none;mask-image:none} .carou__item:not(.is-active) .carou__img{filter:none} .carou__item--produit .carou__img{object-position:center 46%} .carou__scrim,.carou__spine,.carou__hit,.carou__item--produit.is-active::before{display:none} .carou__content{position:static;width:auto;opacity:1;transform:none;pointer-events:auto;gap:.5rem} .carou__nav{justify-content:center} } @media (prefers-reduced-motion:reduce){ .carou{scroll-behavior:auto} } @media (prefers-reduced-motion:reduce){ .carou__item,.carou__img,.carou__content,.carou__dot{transition-duration:.001ms} } /* ---------- 16. PAGES INTERIEURES ---------- Composants des pages de contenu (pilier SEO, intentions, galerie, contact). Uniquement des variables de tokens.css / du :root de ce fichier. */ /* En-tete de page : sous la nav fixe, centre. */ .page-hero{padding:calc(8.5rem + var(--topbar-h)) clamp(1.2rem,5vw,3rem) clamp(2.4rem,5vw,3.6rem);text-align:center} .page-hero .wrap{max-width:880px} .page-hero .eyebrow::after{content:"";width:28px;height:2px;background:var(--grad-filet)} .page-hero__title{font-family:var(--font-titre);font-weight:600;line-height:1.08;text-transform:uppercase;letter-spacing:.02em;color:var(--ivoire);font-size:clamp(1.9rem,4vw,3rem);text-wrap:balance;margin:0} .page-hero__lead{color:var(--ivoire-dim);max-width:58ch;margin:1.2rem auto 0;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.65} .page-hero__price{margin-top:1.3rem;color:var(--ivoire);font-size:1.02rem} .page-hero__price b{background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.35em} .page-hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.8rem} /* Variante avec image de fond : meme traitement que .hero (accueil). L'image est passee par la page via --ph-img (et --ph-pos si le sujet n'est pas centre), le voile .hero__scrim assure la lisibilite. --ph-veil (0 par defaut) : assombrissement supplementaire pour les photos claires, que le scrim de l'accueil (calibre sur hero.jpg, deja sombre) ne suffit pas a dompter. */ .page-hero--img{ position:relative;overflow:hidden; min-height:100svh;display:flex;align-items:center;justify-content:center; padding:calc(6rem + var(--topbar-h)) clamp(1.2rem,5vw,3rem) 4rem; background: linear-gradient(rgba(0,0,0,var(--ph-veil,0)),rgba(0,0,0,var(--ph-veil,0))), var(--noir) var(--ph-img) var(--ph-pos,center)/cover no-repeat; } .page-hero--img .wrap{position:relative;z-index:2} /* Tete de section generique (equivalent des .xxx__head de l'accueil) */ .sec-head{text-align:center;max-width:840px;margin-inline:auto} /* HISTOIRE — fil alterne image/texte de la page A propos. Meme principe de zigzag que le fil editorial des extras (.xtra-fil), mais composant distinct : celui des extras porte des encarts d'achat qui n'ont rien a faire ici. */ .histoire-fil{display:grid;gap:clamp(2.8rem,5vw,4.4rem);margin-top:clamp(2.6rem,5vw,3.6rem)} .histoire{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center} /* `order` deplace l'element, pas la piste : sans inverser aussi les colonnes, l'image heriterait de la piste large une ligne sur deux. */ .histoire:nth-child(even){grid-template-columns:1.15fr 1fr} .histoire:nth-child(even) .histoire__media{order:2} .histoire__media{margin:0;position:relative} .histoire__media img{display:block;width:100%;height:auto;border-radius:14px; border:1px solid var(--or-border);box-shadow:var(--shadow-noir)} .histoire__media figcaption{margin-top:.7rem;font-size:.78rem;line-height:1.45;color:var(--ivoire-dim)} .histoire__txt p{color:var(--ivoire-dim);line-height:1.75;margin-top:1rem;max-width:56ch} /* Jalon : meme filet dore que les surtitres de section, en version courte. */ .histoire__jalon{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-titre); font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-base)} .histoire__jalon::after{content:"";width:34px;height:1px;background:var(--grad-filet)} .histoire__chute{max-width:52ch;margin:clamp(2.8rem,5vw,4rem) auto 0;text-align:center; font-family:var(--font-titre);color:var(--ivoire);font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.55} @media (max-width:820px){ /* En colonne unique, `order` casserait l'alternance image-puis-texte. */ .histoire{grid-template-columns:1fr;gap:1.4rem} .histoire:nth-child(even) .histoire__media{order:0} } .sec-head .eyebrow::after{content:"";width:28px;height:2px;background:var(--grad-filet)} .sec-head .section-lead{margin-inline:auto} /* FAQ : accordeon natif details/summary (aucun JS, accessible clavier) */ .faq{max-width:800px;margin:clamp(2rem,4vw,3rem) auto 0;display:grid;gap:.75rem;text-align:left} .faq details{background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);overflow:hidden} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.3rem;font-family:var(--font-texte);font-weight:600;color:var(--ivoire);font-size:.98rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";width:11px;height:11px;flex:0 0 auto;border-right:2px solid var(--or-base);border-bottom:2px solid var(--or-base);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s} .faq details[open] summary::after{transform:rotate(225deg)} .faq summary:focus-visible{outline:2px solid var(--or-base);outline-offset:-2px} .faq details p{padding:0 1.3rem 1.2rem;color:var(--ivoire-dim);line-height:1.65;font-size:.95rem} /* Etapes numerotees */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2rem);margin-top:clamp(2.2rem,4vw,3.4rem)} .step{background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);padding:1.6rem 1.4rem} .step__n{font-family:var(--font-titre);font-weight:700;font-size:2rem;background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .step__t{font-family:var(--font-texte);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ivoire);margin:.5rem 0 .4rem;font-size:.92rem} .step p{color:var(--ivoire-dim);font-size:.93rem;line-height:1.6} @media (max-width:760px){.steps{grid-template-columns:1fr}} /* Variante « fil de la soiree » : plus de cartes — chaque etape est marquee d'un point lumineux (petite ampoule doree), la chronologie fait la mise en scene. S'ajoute sur le conteneur (.steps.steps--fil), la grille est inchangee. */ .steps--fil .step{background:none;border:0;border-radius:0;padding:1.5rem .2rem 0;position:relative} .steps--fil .step::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%; background:var(--grad-or);box-shadow:0 0 12px var(--or-base)} @media (max-width:760px){ .steps--fil .step{padding:0 0 0 1.6rem} .steps--fil .step::before{top:5px;left:0} } /* Variante « cadres de visee » : plus de cartes — quatre coins dores cadrent chaque bloc comme le viseur d'un appareil photo (echo des coins du cadre borne de l'accueil, .hero-shot__corner). Au survol, le cadre se resserre : effet de mise au point. */ .steps--visee .step{background:none;border:0;border-radius:0;position:relative;padding:1.8rem 1.6rem} .steps--visee .step::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.65; transition:inset .35s ease,opacity .35s ease; background: linear-gradient(var(--or-eclat),var(--or-eclat)) 0 0/22px 2px, linear-gradient(var(--or-eclat),var(--or-eclat)) 0 0/2px 22px, linear-gradient(var(--or-eclat),var(--or-eclat)) 100% 0/22px 2px, linear-gradient(var(--or-eclat),var(--or-eclat)) 100% 0/2px 22px, linear-gradient(var(--or-eclat),var(--or-eclat)) 0 100%/22px 2px, linear-gradient(var(--or-eclat),var(--or-eclat)) 0 100%/2px 22px, linear-gradient(var(--or-eclat),var(--or-eclat)) 100% 100%/22px 2px, linear-gradient(var(--or-eclat),var(--or-eclat)) 100% 100%/2px 22px; background-repeat:no-repeat} .steps--visee .step:hover::before{inset:8px;opacity:1} /* Variante « manifeste » (a-propos) : plus de cartes ni de colonnes — les promesses en rangees pleine largeur separees de filets, chiffre romain dore a gauche, lecture de charte de maison. Le chiffre s'eclaire au survol de sa rangee. */ .steps--manifeste{grid-template-columns:1fr;gap:0;max-width:880px;margin-inline:auto} .steps--manifeste .step{background:none;border:0;border-radius:0; display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1.4rem,4vw,2.6rem); align-items:start;padding:clamp(1.6rem,3vw,2.2rem) .4rem} .steps--manifeste .step+.step{border-top:1px solid var(--or-hair)} .steps--manifeste .step__n{grid-row:1/span 2;font-size:clamp(2.2rem,4vw,3rem);line-height:1; min-width:3.4rem;text-align:center;transition:filter .3s ease} .steps--manifeste .step:hover .step__n{filter:brightness(1.3)} .steps--manifeste .step__t{font-size:1.02rem;margin:.35rem 0 .45rem} .steps--manifeste .step p{font-size:.96rem;max-width:62ch} @media (max-width:640px){ .steps--manifeste .step{grid-template-columns:1fr} .steps--manifeste .step__n{grid-row:auto;text-align:left;min-width:0} } /* Variante « jalons » : plus de cartes — un parcours façon processus. Chaque etape porte une icone au trait dans un cercle d'or, les cercles sont relies par un filet (un segment par intervalle, pose sur les .step + .step : rien a masquer), titre et texte centres dessous. Le numero 01/02/03 n'est plus affiche, l'icone raconte l'etape. */ .steps--jalons .step{background:none;border:0;border-radius:0;padding:0 1rem;text-align:center;position:relative} .steps--jalons .step__n{display:none} .steps--jalons .step+.step::before{content:"";position:absolute;top:32px;height:1px; left:calc(-50% + 44px);right:calc(50% + 44px);background:var(--or-border)} .steps--jalons .jalon{width:64px;height:64px;margin:0 auto 1.3rem;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--or-base);color:var(--or-clair)} .steps--jalons .jalon svg{width:30px;height:30px} .steps--jalons .step p{margin-inline:auto;max-width:34ch} @media (max-width:760px){ .steps--jalons .step+.step::before{display:none} } /* Variante « filigrane » : plus de cartes — le numero devient un immense chiffre dore translucide pose derriere le texte, facon filigrane de magazine ; de fins filets separent les blocs. Le chiffre se ravive legerement au survol. */ .steps--filigrane .step{background:none;border:0;border-radius:0;position:relative;padding:1.6rem 1.4rem 0} .steps--filigrane .step__n{position:absolute;top:-1.2rem;left:.4rem;font-size:clamp(5.5rem,8vw,7.5rem); line-height:1;opacity:.16;pointer-events:none;transition:opacity .35s ease} .steps--filigrane .step:hover .step__n{opacity:.28} .steps--filigrane .step__t,.steps--filigrane .step p{position:relative} .steps--filigrane .step + .step::before{content:"";position:absolute; top:8%;bottom:8%;left:calc(-.5 * clamp(1.2rem,3vw,2rem));width:1px; background:linear-gradient(180deg,transparent,var(--or-border) 20%,var(--or-border) 80%,transparent)} @media (max-width:760px){ .steps--filigrane .step + .step::before{top:calc(-.5 * clamp(1.2rem,3vw,2rem));bottom:auto;left:0;right:0;width:auto;height:1px; background:linear-gradient(90deg,transparent,var(--or-border) 20%,var(--or-border) 80%,transparent)} } /* Animation « ampoules » : quand l'observer revele la premiere etape (is-in), chaque point s'allume l'un apres l'autre a 0,5 s d'intervalle, flou et halo d'abord, net ensuite — comme une ampoule qui chauffe. Chaque texte suit son point. Conditionne a :has() : sans support, points et textes s'affichent sans sequence. */ @supports selector(:has(*)){ .steps--fil .step::before{opacity:0;transform:scale(.4);filter:blur(6px)} .steps--fil:has(.step.is-in) .step:nth-child(1)::before{animation:fil-dot .8s cubic-bezier(.2,.9,.2,1) 0s both} .steps--fil:has(.step.is-in) .step:nth-child(2)::before{animation:fil-dot .8s cubic-bezier(.2,.9,.2,1) .5s both} .steps--fil:has(.step.is-in) .step:nth-child(3)::before{animation:fil-dot .8s cubic-bezier(.2,.9,.2,1) 1s both} /* Textes cales sur l'allumage de leur point (au lieu des delais d1-d3), et entree par le bas pour tous : les glissements lateraux (reveal--l/r) contrarieraient le sens de lecture. */ .steps--fil .step.reveal--l,.steps--fil .step.reveal--r{transform:translateY(40px)} .steps--fil .step.d1{transition-delay:.15s} .steps--fil .step.d2{transition-delay:.65s} .steps--fil .step.d3{transition-delay:1.15s} } @keyframes fil-dot{ 0%{opacity:0;transform:scale(.4);filter:blur(6px);box-shadow:0 0 0 rgba(214,179,106,0)} 60%{opacity:1;transform:scale(1.45);filter:blur(2.5px);box-shadow:0 0 26px var(--or-eclat),0 0 46px rgba(214,179,106,.55)} 100%{opacity:1;transform:scale(1);filter:blur(0);box-shadow:0 0 12px var(--or-base)} } @media (prefers-reduced-motion:reduce){ .steps--fil .step::before{opacity:1;transform:none;filter:none;animation:none} } /* Formules (pages d'intention) : prix reels, la carte `reco` est mise en avant */ .offres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem);margin-top:clamp(2.4rem,4vw,3.6rem);align-items:stretch} .offre{display:flex;flex-direction:column;background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);padding:1.9rem 1.5rem 1.6rem;position:relative;box-shadow:var(--shadow-noir)} .offre--reco{border-color:var(--or-base);box-shadow:var(--shadow-or-soft)} .offre__tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:.35rem .9rem;border-radius:999px;background-image:var(--grad-or-btn);color:var(--noir);font-family:var(--font-texte);font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase} .offre__nom{font-family:var(--font-titre);font-weight:600;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire)} .offre__sous{color:var(--ivoire-dim);font-size:.88rem;margin-top:.15rem} .offre__prix{margin:1rem 0 1.2rem;font-family:var(--font-titre);font-weight:700;font-size:2rem;background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .offre__prix small{font-size:.5em;letter-spacing:.06em} .offre ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem;flex:1} .offre li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ivoire);font-size:.9rem;line-height:1.45} .offre li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.42em;transform:rotate(45deg);background:var(--grad-or-btn)} .offre .btn{align-self:center} @media (max-width:860px){.offres{grid-template-columns:1fr;max-width:440px;margin-inline:auto}} /* Variante « liste d'univers » des pages hub (particuliers / professionnels). Flex et non grid : le nombre de cartes varie (3 evenements prives, 5 pro) et la grille a 3 colonnes laissait un trou au bout de la derniere rangee. Ici la rangee incomplete se centre d'elle-meme. Pas de .offre__prix dans ces cartes : le prix plancher est annonce une seule fois, dans le hero. */ .offres--liste{display:flex;flex-wrap:wrap;justify-content:center} .offres--liste .offre{flex:1 1 290px;max-width:370px} @media (max-width:860px){.offres--liste{max-width:440px}} /* Photo en tete de carte, a fleur des bords : les marges negatives annulent le padding de .offre, le rayon ne reprend que les deux coins hauts. Le voile bas evite que le titre « colle » a une photo claire. Leger zoom au survol : la seule animation de la carte, elle ne se declenche pas au scroll (pas de coup de projecteur permanent sur une page qui en compte plusieurs). */ /* .offre__media (marges + ratio) est deja defini plus bas, avec .cadre : on ne redefinit rien ici, on complete. flex:0 0 auto est indispensable — .offre est un conteneur flex en colonne et les cartes d'une rangee s'alignent en hauteur ; sans lui le media est comprime par le contenu et son aspect-ratio n'est jamais respecte. Le leger zoom au survol est la seule animation de la carte : .cadre porte deja overflow:hidden, le debordement est donc rogne proprement. */ .offre__media{flex:0 0 auto} .offre__media img{transition:transform .7s cubic-bezier(.16,1,.3,1)} .offre:hover .offre__media img{transform:scale(1.06)} @media (prefers-reduced-motion:reduce){ .offre__media img{transition:none} .offre:hover .offre__media img{transform:none} } /* ========================================================== TIRAGE — maquette de sortie de borne, ANONYMISEE Reproduit la mise en page d'un tirage reel (photo + bandeau signe) SANS reprendre l'habillage d'un client : le bandeau porte le TYPE d'evenement, jamais un prenom ni une date. Le droit a l'image des invites n'est donc jamais engage, et le visuel parle a tous les visiteurs au lieu d'exposer un client. L'emplacement photo est un vrai : deposer un visuel plus tard suffit, aucun montage ni re-export. Vide, il affiche l'etat « a venir » (meme langage que .cadre__ph). ========================================================== */ .tirage{display:flex;flex-direction:column;overflow:hidden; background:var(--ivoire);padding:.55rem .55rem 0; border-radius:var(--radius-card);box-shadow:var(--shadow-noir)} /* min-height:0 : sans lui l'emplacement refuse de se comprimer dans le flex et deborde du ratio impose par .offre__media. */ .tirage__slot{position:relative;flex:1 1 auto;min-height:0;overflow:hidden; background:var(--prune);display:grid;place-items:center} /* Positionnement absolu et non height:100% : l'emplacement est une grille centree, une image en pourcentage s'y dimensionne circulairement et deborde (constate : +26 px). En absolu elle epouse exactement la zone, et surtout elle n'influence plus la hauteur du bloc — le ratio impose par .offre__media reste maitre, avec ou sans photo. */ .tirage__slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tirage__vide{display:grid;place-items:center;gap:.45rem;padding:1rem;text-align:center} .tirage__vide svg{width:30px;height:30px;color:var(--or-fonce)} .tirage__vide span{font-family:var(--font-texte);font-size:.58rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ivoire-dim)} /* Bandeau signe : Great Vibes, deja chargee pour la note du collage. Encre sombre et non or — le bandeau est sur fond ivoire. */ /* Bandeau volontairement serre : sur un tirage reel la photo domine (~70 %). C'est elle qui portera le visuel, le bandeau ne fait que le signer. */ .tirage__pied{display:grid;place-items:center;gap:.02rem;padding:.22rem 0 .38rem} .tirage__type{font-family:'Great Vibes',cursive;line-height:1.05; font-size:clamp(1rem,1.8vw,1.32rem);color:var(--or-ombre)} .tirage__filet{width:52px;height:1px;background:var(--grad-filet);opacity:.9} .tirage__marque{font-family:var(--font-texte);font-size:.48rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:rgba(43,39,53,.45)} /* Teinte du papier selon l'univers : un tirage reel n'est jamais blanc pur, le fond reprend toujours la palette de l'evenement. Reste discret ici — c'est la photo qui doit primer dans la carte, les vrais habillages sont montres en grand plus bas (.designs). */ .tirage--rose{background:linear-gradient(160deg,#FBEDE9,#F3D9D2)} .tirage--rose .tirage__type{color:#A9564A} .tirage--or{background:linear-gradient(160deg,#FBF3DF,#EFDDB2)} .tirage--or .tirage__type{color:#8A6A22} .tirage--ciel{background:linear-gradient(160deg,#EFF4FA,#D9E4F0)} .tirage--ciel .tirage__type{color:#3E5A7A} /* ========================================================== DESIGNS — echantillons d'habillage, ANONYMISES Repond au point « un design a vos couleurs » : le visiteur voit trois univers au lieu de le lire. Aucun prenom, aucune date — seul le type d'evenement figure, comme sur les .tirage. Rendus en CSS (degrades + ornements SVG) : ce sont des APPROXIMATIONS. Les versions definitives doivent etre les vrais gabarits de la cliente, exportes depuis Fotoshare avec un libelle generique (cf. docs/checklist-pre-lancement.md). ========================================================== */ .designs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.4vw,.9rem); align-items:start;margin-inline:auto;max-width:520px} .design-ex{position:relative;margin:0;display:flex;flex-direction:column;gap:.4rem; padding:.5rem .5rem .6rem;border-radius:8px;box-shadow:var(--shadow-noir); transform:rotate(var(--dr,0deg));transition:transform .45s cubic-bezier(.16,1,.3,1)} .design-ex:nth-child(1){--dr:-3.5deg} .design-ex:nth-child(2){--dr:1deg;margin-top:.9rem} .design-ex:nth-child(3){--dr:3.5deg} .design-ex:hover{transform:rotate(0deg) translateY(-4px)} @media (prefers-reduced-motion:reduce){.design-ex,.design-ex:hover{transition:none;transform:rotate(var(--dr,0deg))}} /* fenetre photo : volontairement neutre et sombre, elle figure l'emplacement du cliche sans pretendre en montrer un */ .design-ex__fen{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden; background:linear-gradient(150deg,rgba(33,27,38,.88),rgba(33,27,38,.62)); border:1px solid rgba(255,255,255,.35)} /* Meme regle que .tirage__slot : position absolue et non height:100%, qui se dimensionne circulairement dans un conteneur en ratio et deborde. */ .design-ex__fen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Voile leger : unifie les trois echantillons malgre des photos differentes. Passe au-dessus de l'image (z-index) sinon il serait recouvert. */ .design-ex__fen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.10),transparent 62%)} .design-ex__nom{font-family:'Great Vibes',cursive;font-size:clamp(.85rem,1.7vw,1.1rem); line-height:1;text-align:center} .design-ex__filet{width:34px;height:1px;margin:0 auto;background:currentColor;opacity:.45} /* Trois univers repris de ce que la cliente produit reellement : floral poudre (mariage), paillete dore (anniversaire), pastel (ceremonie). */ .design-ex--rose{background: radial-gradient(circle at 88% 8%,rgba(233,164,150,.55),transparent 42%), radial-gradient(circle at 6% 94%,rgba(220,140,150,.45),transparent 40%), linear-gradient(155deg,#FBEDE9,#F1D2CA);color:#A9564A} .design-ex--or{background: radial-gradient(circle at 82% 12%,rgba(214,179,106,.75),transparent 45%), radial-gradient(circle at 10% 92%,rgba(155,120,50,.5),transparent 44%), linear-gradient(155deg,#2A2320,#151113);color:var(--or-clair)} .design-ex--or .design-ex__fen{border-color:rgba(214,179,106,.55)} .design-ex--ciel{background: radial-gradient(circle at 86% 10%,rgba(158,190,222,.6),transparent 44%), radial-gradient(circle at 8% 92%,rgba(226,214,190,.7),transparent 42%), linear-gradient(155deg,#F3F7FC,#DCE6F2);color:#3E5A7A} @media (max-width:520px){.designs{max-width:340px}} .offre__intro{color:var(--ivoire-dim);font-size:.92rem;line-height:1.6;margin:.9rem 0 1.1rem} /* Bloc a deux colonnes (media + texte) pour les pages annexes, trop textuelles sans lui. Les steps y passent en pile : .steps est une grille 3 colonnes, inexploitable dans une demi-largeur. */ .duo{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.2rem); align-items:center;margin-top:clamp(2.4rem,4vw,3.4rem)} .duo .steps{margin-top:0} .steps--pile{grid-template-columns:1fr;gap:clamp(1.4rem,2.4vw,2.1rem)} /* En pile, la pastille passe A GAUCHE. Au-dessus, elle n'a de sens que dans la version 3 colonnes, ou elle ponctue un fil horizontal ; empilee, elle n'appartient visuellement a rien. Meme traitement que celui deja prevu sous 760px pour .steps--fil. `em` et non `px` : la pastille suit la taille du numero si la typo change. */ /* Variante centree : la pile est autrement collee au bord gauche du wrap, alors que le titre de section est centre. Le texte, lui, reste ferre a gauche — c'est le BLOC qu'on centre, pas les lignes. */ .steps--centre{max-width:560px;margin-inline:auto} .steps--pile.steps--fil .step{padding:0 0 0 2rem} .steps--pile.steps--fil .step::before{top:1.4em;left:0} /* cale sur l'axe du numero */ @media (max-width:900px){.duo{grid-template-columns:1fr}} /* Fil d'Ariane visible des pages enfants (le JSON-LD, lui, est dans le ). Pose APRES le hero, qui a deja degage le header fixe : un simple retrait. */ .fil{position:relative;z-index:1;padding:1.4rem 0 0} .fil .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ivoire-dim)} .fil a{color:var(--ivoire-dim);text-decoration:underline;text-underline-offset:3px} .fil a:hover{color:var(--or-clair)} .fil b{color:var(--ivoire);font-weight:600} .fil span{color:var(--or-base)} /* Etapes du devis pro (page entreprise) — remplace les cartes de formules chiffrees : ce qu'on demande pour chiffrer, numerote en chiffres dores. */ .etapes-devis{list-style:none;counter-reset:etape;margin:clamp(2.2rem,4vw,3.2rem) auto 0;padding:0;max-width:760px;display:grid;gap:1.1rem} .etapes-devis li{counter-increment:etape;display:flex;align-items:baseline;gap:1rem;color:var(--ivoire);font-size:1.02rem;line-height:1.6} .etapes-devis li::before{content:counter(etape);flex:0 0 auto;font-family:var(--font-titre);font-weight:700;font-size:1.6rem;line-height:1;background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.etapes-devis li::before{color:var(--or-base);-webkit-text-fill-color:currentColor}} .etapes-devis b{color:var(--ivoire);font-weight:600} /* Variante « carte epuree » (gamme borne-photo) : la structure carte est conservee (zone image en haut, prete pour les photos produits) mais l'habillage devient minimaliste — bordure hairline, pas d'ombre, zone image sans boite dans la boite (seuls les coins de visee restent), caracteristiques en lignes fines, mention discrete, CTA en lien souligne (anneau ::before du bouton neutralise, fleche conservee). */ .offres--carte .offre{border-color:var(--or-hair);box-shadow:none;padding:2rem 1.7rem 1.8rem} .offres--carte .offre--reco{border-color:var(--or-base)} .offres--carte .offre__media.cadre{border:0;background:linear-gradient(165deg,rgba(0,0,0,.34),rgba(0,0,0,.12));box-shadow:none} .offres--carte .offre__tag{background:var(--noir);background-image:none;border:1px solid var(--or-border);color:var(--or-clair);letter-spacing:.2em} .offres--carte .offre ul{margin:1.3rem 0 1.5rem;gap:0} .offres--carte .offre li{padding:.72rem 0;border-bottom:1px solid var(--or-hair)} .offres--carte .offre li::before{display:none} /* box-shadow:none indispensable : .btn porte une ombre portee de 22 px de flou, qui donne du relief a un bouton PLEIN mais se voit comme une tache floue derriere un lien texte nu, dont le fond a justement ete retire. */ .offres--carte .offre .btn{align-self:flex-start;padding:.2rem 0;border-radius:0;color:var(--or-clair); box-shadow:none; background-image:linear-gradient(var(--or-base),var(--or-base));background-repeat:no-repeat; background-size:36% 1px;background-position:left bottom;transition:background-size .3s ease,color .2s ease} .offres--carte .offre .btn:hover,.offres--carte .offre .btn:focus-visible{box-shadow:none} .offres--carte .offre .btn::before{display:none} .offres--carte .offre .btn:hover{background-size:100% 1px;color:var(--or-eclat)} /* Bande de vignettes : une SECTION allegee, pas une section a part entiere. Sert de respiration entre deux blocs denses ; son eyebrow est centre et tient lieu de seul libelle. */ .section--bande{padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);text-align:center} /* .zones porte un margin-top prevu pour suivre un titre : sans libelle au-dessus, il creerait un vide en haut de bande. */ .section--bande .zones{margin-top:0} /* Lien texte souligne, soulignement anime par background-size (text-decoration ne s'anime pas). Meme traitement que la legende de la bande photo. */ .lien-souligne{display:inline-block;font-family:var(--font-texte);font-size:.78rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--or-clair);padding-bottom:.3rem; background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat; background-position:0 100%;background-size:100% 1px; transition:color .3s ease,background-size .35s cubic-bezier(.16,1,.3,1)} .lien-souligne:hover{color:var(--or-eclat);background-size:0 1px} @media (prefers-reduced-motion:reduce){.lien-souligne{transition:color .3s ease}} /* Galerie : filtres + grille */ .gfiltres{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.8rem} .gfiltre{padding:.55rem 1.15rem;border-radius:999px;border:1px solid var(--or-border);background:transparent;color:var(--ivoire-dim);font-family:var(--font-texte);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s,background .2s} .gfiltre:hover{color:var(--or-clair);border-color:var(--or-base)} .gfiltre.is-on{background-image:var(--grad-or-btn);color:var(--noir);border-color:transparent} .ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(2rem,4vw,3rem)} .ggrid figure{margin:0;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--or-border);background:var(--prune)} .ggrid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block} .ggrid figure.is-off{display:none} @media (max-width:760px){.ggrid{grid-template-columns:1fr 1fr}} /* Zone d'intervention : pastilles de communes */ /* Cachets de tournee : chaque commune est un tampon a l'encre doree, bordure pointillee et inclinaison propre, qui se plaque l'un apres l'autre quand la section apparait (.is-in du conteneur .reveal). fill:backwards, et la frame 100% egale l'etat statique : le survol (redressement) reste possible une fois les tampons poses. */ .zones{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.8rem} .zones li{list-style:none;padding:.55rem 1.15rem;border:1.5px dashed var(--or-base);border-radius:999px; color:var(--ivoire);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; transform:rotate(var(--zr,0deg));transition:transform .3s ease} .zones li:hover{transform:rotate(0deg)} .zones li:nth-child(4n+1){--zr:-2.4deg} .zones li:nth-child(4n+2){--zr:1.8deg} .zones li:nth-child(4n+3){--zr:-1.2deg} .zones li:nth-child(4n+4){--zr:2.6deg} .zones.is-in li{animation:zone-tampon .45s cubic-bezier(.34,1.56,.64,1) backwards} .zones.is-in li:nth-child(2){animation-delay:.09s} .zones.is-in li:nth-child(3){animation-delay:.18s} .zones.is-in li:nth-child(4){animation-delay:.27s} .zones.is-in li:nth-child(5){animation-delay:.36s} .zones.is-in li:nth-child(6){animation-delay:.45s} .zones.is-in li:nth-child(7){animation-delay:.54s} .zones.is-in li:nth-child(8){animation-delay:.63s} .zones.is-in li:nth-child(9){animation-delay:.72s} .zones.is-in li:nth-child(10){animation-delay:.81s} .zones.is-in li:nth-child(11){animation-delay:.9s} .zones.is-in li:nth-child(12){animation-delay:.99s} @keyframes zone-tampon{ 0%{opacity:0;transform:scale(1.7) rotate(var(--zr,0deg))} 55%{opacity:1;transform:scale(.94) rotate(var(--zr,0deg))} 100%{opacity:1;transform:scale(1) rotate(var(--zr,0deg))} } /* ---------- 17. PAGES INTERIEURES : variations visuelles ---------- Casse la standardisation des pages annexes : chaque page pioche des composants differents (hero scinde produit, cadres viseur, bandes photo, section claire, marquee) au lieu du meme empilement page-hero + steps. */ /* Reveals directionnels : meme observer et memes transitions que .reveal, seule la position d'entree change (.is-in remet transform:none). */ .reveal.reveal--l{transform:translateX(-44px)} .reveal.reveal--r{transform:translateX(44px)} /* Ces deux regles arrivent apres `.reveal.is-in` dans la cascade (meme specificite) : sans la regle ci-dessous, le transform directionnel l'emporte et les elements restent decales de 44px une fois reveles. */ .reveal.reveal--l.is-in,.reveal.reveal--r.is-in{transform:none} /* Hero scinde : texte a gauche, visuel detoure flottant a droite */ /* Le contenu est centre dans la hauteur de l'ecran : sans cela, tout le vide s'accumule sous les CTA et la section semble collee a la nav. */ .split-hero{min-height:100svh;display:flex;align-items:center; padding:calc(5rem + var(--topbar-h)) clamp(1.2rem,5vw,3rem) clamp(2rem,4vw,3rem)} /* Pleine largeur du site, pas les 880px du .page-hero centre : sinon la colonne de texte est trop etroite (les CTA s'empilent) et le bloc derive vers le centre au lieu de partir du bord gauche de la grille. */ .split-hero .wrap{width:100%;max-width:var(--maxw);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split-hero__txt{text-align:left} /* En colonne etroite, le text-wrap:balance du titre (regle .page-hero__title) egalise les lignes en les multipliant : un empilement de mots. Coupe naturelle + corps un peu reduit -> 2-3 lignes pleines. */ .split-hero__txt .page-hero__title{text-wrap:wrap;font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:1.4rem} .split-hero__txt .page-hero__lead{margin:1.2rem 0 0;max-width:54ch} .split-hero__txt .page-hero__cta{justify-content:flex-start} .split-hero__media{position:relative;display:grid;place-items:center;min-height:300px} .split-hero__media::before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(214,179,106,.16),transparent 66%)} /* enfant direct uniquement : les produits detoures flottent ; une photo dans un .cadre (a-propos) reste immobile, sinon elle bougerait dans son cadre */ .split-hero__media>img{position:relative;max-height:clamp(300px,36vw,440px);width:auto;max-width:100%; filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)); animation:sh-flotte 7s ease-in-out infinite alternate} @keyframes sh-flotte{from{transform:translateY(6px)}to{transform:translateY(-10px)}} @media (max-width:900px){ .split-hero .wrap{grid-template-columns:1fr;gap:1.8rem} .split-hero__txt{text-align:center} .split-hero__txt .page-hero__lead{margin-inline:auto} .split-hero__txt .page-hero__cta{justify-content:center} .split-hero__media{min-height:0} .split-hero__media>img{max-height:260px} } /* Collage "album" (a-propos) : voile organique dore, deux tirages photo inclines a bord ivoire, annotation calligraphiee (Great Vibes) avec fleche manuscrite, et gribouillis de borne — l'esprit scrapbook, transpose dans le noir & or. */ .collage{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1} .collage__blob{position:absolute;inset:4% 0 6% 2%; border-radius:58% 42% 55% 45%/48% 55% 45% 52%; background:radial-gradient(circle at 40% 35%,rgba(214,179,106,.2),rgba(214,179,106,.06) 58%,transparent 76%)} .collage__photo{position:absolute;margin:0;background:var(--ivoire);padding:10px 10px 14px;border-radius:4px; box-shadow:0 18px 40px rgba(0,0,0,.5)} .collage__photo img{display:block;width:100%;height:100%;object-fit:cover} .collage__photo--a{left:3%;top:10%;width:52%;aspect-ratio:3/4;transform:rotate(-4deg);z-index:1} .collage__photo--b{right:1%;bottom:4%;width:62%;aspect-ratio:4/3;transform:rotate(3deg);z-index:2} .collage__note{position:absolute;top:-3.2rem;left:2%;z-index:3;margin:0; font-family:'Great Vibes',cursive;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1; color:var(--or-clair);transform:rotate(-3deg)} @media (max-width:900px){ .collage{max-width:420px;margin-top:3.4rem} .collage__note{left:0;right:0;text-align:center} } /* Extras : fil editorial alterne — une grande rangee image/texte par extra (zigzag en desktop via order sur les rangees paires), mention doree du moment ou l'extra brille, benefice en tete, points en lignes fines, CTA en lien souligne. La rangee heure sup remplace la photo par un « +1 H » typographique dore. */ .xtra-fil{display:grid;gap:clamp(2.6rem,5vw,4.2rem)} .xtra{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center} .xtra:nth-child(even) .xtra__media{order:2} .xtra__media{aspect-ratio:4/3;width:100%} .xtra__media--type{display:grid;place-items:center;border:1px solid var(--or-border);border-radius:18px; background:linear-gradient(155deg,var(--prune),var(--noir))} .xtra__media--type span{font-family:var(--font-titre);font-weight:700;font-size:clamp(3.4rem,7vw,5.5rem); background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .xtra__moment{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-texte);font-weight:600; font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-base)} .xtra__moment::before{content:"";width:22px;height:1px;background:var(--grad-filet)} .xtra__nom{font-family:var(--font-titre);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire);margin-top:.7rem} .xtra__benef{color:var(--ivoire);font-size:1.02rem;line-height:1.6;margin-top:.6rem} .xtra__body ul{list-style:none;margin:1rem 0 1.3rem;padding:0} .xtra__body li{padding:.6rem 0;border-bottom:1px solid var(--or-hair);color:var(--ivoire-dim);font-size:.92rem;line-height:1.5} /* Module d'ajout au devis : bouton plein + micro-reassurance, sans prix (les tarifs vivent dans le tunnel) — l'appel a l'action reste net. */ .xtra-achat{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--or-hair); display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap} .xtra-achat__note{margin:0;font-size:.76rem;color:var(--ivoire-dim)} @media (max-width:860px){ .xtra{grid-template-columns:1fr} .xtra:nth-child(even) .xtra__media{order:0} .xtra__media{max-width:440px;justify-self:center} } /* Cadre "viseur" : photo reelle ou emplacement en attente (coins de visee or) */ .cadre{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--or-border); background:linear-gradient(155deg,var(--prune),var(--noir));box-shadow:var(--shadow-noir)} .cadre>img{width:100%;height:100%;object-fit:cover;display:block} .cadre__coin{position:absolute;width:22px;height:22px;border:2px solid var(--or-eclat);opacity:.65;z-index:2} .cadre__coin.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:6px 0 0 0} .cadre__coin.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 6px 0 0} .cadre__coin.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 6px} .cadre__coin.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 6px 0} /* emplacement "visuel a venir" : assume l'attente avec elegance plutot que de la cacher */ .cadre--ph{display:grid;place-items:center} .cadre__ph{display:grid;place-items:center;gap:.55rem;padding:1.6rem;text-align:center} .cadre__ph svg{width:38px;height:38px;color:var(--or-fonce)} .cadre__ph span{font-family:var(--font-texte);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire-dim)} /* medias integres aux cartes existantes */ .offre__media{margin:-.4rem 0 1.1rem;aspect-ratio:16/10} /* PACKSHOT — produit detoure sur fond transparent. `.cadre>img` est en `cover` : parfait pour une photo d'ambiance, destructeur pour un packshot, qui doit tenir ENTIER dans le cadre. D'ou `contain` et une marge interieure. Les silhouettes sont tres elancees (la borne fait 224x900) : un cadre portrait leur va mieux que le 16/10 des photos de situation. */ .cadre--produit>img{object-fit:contain;padding:clamp(.9rem,2.5vw,1.6rem); filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))} .offre__media--produit{aspect-ratio:4/5} .xtra__media.cadre--produit{aspect-ratio:1} .step__media{margin:0 0 1rem;aspect-ratio:16/10} /* Bande photo pleine largeur, fondue dans le noir haut et bas */ .band{position:relative;height:clamp(240px,36vw,420px);overflow:hidden} .band img{width:100%;height:100%;object-fit:cover;display:block} .band::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,var(--noir) 0%,transparent 24%,transparent 72%,var(--noir) 100%)} /* Legende de la bande. Rendue en LIEN : le voile ::after est en pointer-events:none, le z-index 2 la place donc au-dessus et elle reste cliquable. Soulignement anime par background-size, comme les CTA texte des cartes — pas de text-decoration, qui ne s'anime pas. */ .band__cap{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;white-space:nowrap; font-family:var(--font-texte);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--or-clair);text-shadow:0 2px 12px rgba(0,0,0,.85); padding-bottom:.35rem;background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px; transition:color .3s ease,background-size .35s cubic-bezier(.16,1,.3,1)} .band__cap:hover{color:var(--or-eclat);background-size:0 1px} @media (prefers-reduced-motion:reduce){.band__cap{transition:color .3s ease}} /* Section claire : contrepoint ivoire, comme la galerie de l'accueil */ .section--clair{background:var(--ivoire)} /* Bande claire PENCHEE — meme cassure en diagonale que la galerie de l'accueil (.galerie). Modifieur distinct de `.section--clair`, qui sert aussi a la zone d'intervention du pilier ou l'oblique n'a pas lieu d'etre. Le decalage est ajoute au padding vertical : sans cela le clip-path rognerait le haut du contenu de la valeur du biais. */ .section--oblique{ --slant:clamp(28px,4vw,58px); clip-path:polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); padding-block:calc(clamp(5rem,10vw,9rem) + var(--slant)); } .section--clair .section-title{color:var(--encre-sur-clair);-webkit-text-fill-color:var(--encre-sur-clair)} .section--clair .eyebrow{background-image:var(--grad-or-sombre)} .section--clair .section-lead{color:rgba(43,39,53,.75)} .section--clair .zones li{color:var(--encre-sur-clair);border-color:rgba(110,85,39,.55)} /* Quatre etapes : la grille de base est a 3 colonnes, la 4e se retrouvait seule sur une rangee. Une ligne de 4 en grand ecran, puis 2x2 — jamais d'element orphelin. */ /* Quatre etapes en 2x2 : sur une seule ligne de 4, les colonnes deviennent trop etroites et le texte trop compact. */ .steps--4{grid-template-columns:repeat(2,1fr)} @media (max-width:640px){.steps--4{grid-template-columns:1fr}} /* Carte cliquable : le TITRE porte le vrai lien, et son ::after est etire sur toute la carte. Un ne peut pas en contenir un autre — cette technique preserve la semantique, la navigation clavier et le clic droit « ouvrir dans un nouvel onglet », ce qu'un handler JS sur la carte perdrait. Le CTA devis est remonte au-dessus du calque pour rester cliquable. Une classe explicite plutot que :has() — seules les cartes qui ont une page cible la portent, les autres restent inertes et sans affordance. */ .offre--lien{transition:border-color .3s ease} .offre__lien{color:inherit;text-decoration:none} .offre__lien::after{content:"";position:absolute;inset:0;z-index:1} .offre--lien .btn{position:relative;z-index:2} .offre--lien:hover{border-color:var(--or-base)} .offre--lien:hover .offre__nom{color:var(--or-clair)} .offre__lien:focus-visible{outline:2px solid var(--or-base);outline-offset:4px;border-radius:2px} /* Mur d'avis (a-propos, section claire) : note globale en grand + trois avis Google reels, etoiles d'or sur ivoire, colonnes separees de filets or sombre (meme teinte que les autres accents de section claire). */ .avis-score{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-top:clamp(2rem,4vw,3rem)} .avis-score__note{font-family:var(--font-titre);font-weight:700;font-size:clamp(3rem,6vw,4.4rem);line-height:1;color:var(--encre-sur-clair)} .avis-score__note small{font-size:.36em;font-weight:600;letter-spacing:.04em;opacity:.65} .avis-score .stars5{width:150px} .avis-score__src{font-family:var(--font-texte);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(110,85,39,.85);text-decoration:none} .avis-score__src:hover{text-decoration:underline;text-underline-offset:3px} .avis-mur{list-style:none;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)} .avis-mur li{position:relative;text-align:center;padding:0 clamp(.6rem,2vw,1.4rem)} .avis-mur li+li::before{content:"";position:absolute;top:10%;bottom:10%; left:calc(-.5 * clamp(1.4rem,3vw,2.4rem));width:1px; background:linear-gradient(180deg,transparent,rgba(110,85,39,.3) 20%,rgba(110,85,39,.3) 80%,transparent)} .avis-mur .stars5{width:96px;margin:0 auto .9rem} .avis-mur blockquote{margin:0;color:var(--encre-sur-clair);font-size:.95rem;line-height:1.65} .avis-mur__nom{display:block;margin-top:.85rem;font-family:var(--font-texte);font-weight:600; font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(110,85,39,.85)} @media (max-width:860px){ .avis-mur{grid-template-columns:1fr;max-width:440px;margin-inline:auto} .avis-mur li+li::before{top:calc(-.5 * clamp(1.4rem,3vw,2.4rem));bottom:auto;left:12%;right:12%;width:auto;height:1px; background:linear-gradient(90deg,transparent,rgba(110,85,39,.3) 20%,rgba(110,85,39,.3) 80%,transparent)} } /* Galerie : rythme varie (une grande vignette toutes les six) */ .ggrid--rythme{grid-auto-rows:clamp(150px,20vw,230px);grid-auto-flow:dense} .ggrid--rythme img{aspect-ratio:auto;height:100%} .ggrid--rythme figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2} /* Vignettes hautes : tirages verticaux et videos 360, tournes en 9/16. Dans une case d'une seule rangee, un portrait serait rogne de moitie. */ .ggrid--rythme .gvert{grid-row:span 2} /* Videos 360. Lecture a la demande : en preload="metadata" le navigateur ne telecharge que l'entete, l'affiche webp tient lieu de vignette. Le fichier complet (~1 Mo) n'arrive qu'au premier clic. */ .ggrid video{width:100%;height:100%;object-fit:cover;display:block;background:var(--noir)} .gvideo{position:relative} .gvideo__play{ position:absolute;inset:0;margin:auto;width:3.6rem;height:3.6rem; display:grid;place-items:center;border-radius:50%;cursor:pointer; border:1px solid var(--or-base);background:rgba(10,8,12,.55); backdrop-filter:blur(2px);color:var(--or-clair); transition:background .2s,color .2s,transform .2s,opacity .2s; } .gvideo__play svg{width:1.5rem;height:1.5rem;fill:currentColor} .gvideo__play:hover{background:var(--noir);color:var(--ivoire);transform:scale(1.07)} .gvideo__play .ic-pause, .gvideo.is-playing .ic-play{display:none} .gvideo.is-playing .ic-pause{display:block} /* Pendant la lecture le bouton s'efface mais reste cliquable : au doigt, toucher la vignette met en pause, ce qui est le geste attendu. */ .gvideo.is-playing .gvideo__play{opacity:0;background:rgba(10,8,12,.75)} .gvideo.is-playing:hover .gvideo__play, .gvideo.is-playing .gvideo__play:focus-visible{opacity:1} @media (prefers-reduced-motion:reduce){ .split-hero__media>img{animation:none} } /* Corps de texte des pages legales : lisibilite avant tout */ .legal{max-width:760px;margin-inline:auto;text-align:left} .legal h2{font-family:var(--font-titre);font-weight:600;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ivoire);margin:2.4rem 0 .8rem} .legal h2:first-child{margin-top:0} .legal p,.legal li{color:var(--ivoire-dim);line-height:1.7;font-size:.97rem;margin-bottom:.7rem} .legal ul{padding-left:1.2rem;margin-bottom:.7rem} .legal a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .legal a:hover{color:var(--or-eclat)} .legal .a-completer{display:inline-block;padding:.1rem .5rem;border:1px dashed var(--fuchsia);border-radius:6px;color:var(--fuchsia-eclat);font-weight:600} /* Banniere cookies : consentement prealable aux mesures d'audience (GA4 a venir). Affichee par main.js si aucun choix memorise. Accepter et Refuser au meme niveau visuel (exigence CNIL), lien vers la politique de confidentialite. */ .cookies{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:80; max-width:560px;margin-inline:auto;padding:1.2rem 1.3rem; background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);box-shadow:var(--shadow-noir)} .cookies[hidden]{display:none} .cookies__txt{color:var(--ivoire-dim);font-size:.88rem;line-height:1.55;margin-bottom:1rem} .cookies__txt a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .cookies__btns{display:flex;flex-wrap:wrap;gap:.7rem} .cookies__btns .btn{font-size:.72rem;padding:.6rem 1.15rem} /* Lien dore dans un paragraphe + bloc "voir plus" centre sous une grille */ .lien-or{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .lien-or:hover{color:var(--or-eclat)} .sec-more{text-align:center;margin-top:1.8rem} /* Contact */ .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem);text-align:left} .contact-card{background:var(--prune);border:1px solid var(--or-border);border-radius:var(--radius-card);padding:clamp(1.5rem,3vw,2.2rem)} .contact-card h2{font-family:var(--font-titre);font-weight:600;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ivoire);margin-bottom:1rem} .contact-card p{color:var(--ivoire-dim);line-height:1.65;margin-bottom:.6rem} .contact-card a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .contact-card a:hover{color:var(--or-eclat)} @media (max-width:860px){.contact-grid{grid-template-columns:1fr}} /* Formulaire contact : panneau vise (coins or) + champs sombres a lisere d'or qui s'allume au focus. Envoi gere dans main.js (webhook + repli). */ .contact-form-panel{position:relative;background:var(--prune);border:1px solid var(--or-border); border-radius:var(--radius-card);padding:clamp(1.7rem,3.2vw,2.5rem)} .contact-form-panel h2{font-family:var(--font-titre);font-weight:600;font-size:1.2rem;text-transform:uppercase; letter-spacing:.02em;color:var(--ivoire);margin-bottom:.5rem} .cf-intro{color:var(--ivoire-dim);line-height:1.6;margin-bottom:1.6rem} .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.3rem} .cf-field{display:flex;flex-direction:column;gap:.45rem} .cf-field--full{grid-column:1/-1} .cf-label{font-family:var(--font-texte);font-size:.66rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--or-base)} .cf-field input,.cf-field select,.cf-field textarea{ background:rgba(0,0,0,.28);border:1px solid var(--or-hair);border-radius:10px; padding:.8rem .95rem;color:var(--ivoire);font-family:var(--font-texte);font-size:.95rem; color-scheme:dark;transition:border-color .25s ease,box-shadow .25s ease} .cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(240,234,220,.35)} .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{ outline:none;border-color:var(--or-base);box-shadow:0 0 0 3px rgba(214,179,106,.16)} .cf-field textarea{resize:vertical;min-height:120px} .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .cf-actions{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:1.5rem} .cf-note{font-size:.76rem;color:var(--ivoire-dim);max-width:36ch;line-height:1.5} .cf-note a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px} .cf-status{display:none;margin:1.1rem 0 0;font-size:.92rem} .cf-status.is-on{display:block;color:var(--ivoire-dim)} .cf-status.is-ok{display:block;color:var(--or-clair)} .cf-status.is-err{display:block;color:var(--fuchsia)} .contact-aside{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vw,1.8rem)} .contact-lignes{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.85rem} .contact-lignes li{display:flex;align-items:center;gap:.7rem} .contact-lignes svg{width:20px;height:20px;color:var(--or-base);flex:0 0 auto} .zones-note{text-align:center;color:var(--ivoire-dim);margin-top:1.7rem} @media (max-width:640px){.cf-grid{grid-template-columns:1fr}}