/* Ygrek Consulting V5 — feuille de style commune.
   Les pages héritées de la V4 gardent leur balisage : ce fichier en habille
   les classes (section, benefits-grid, faq-list…) et les variables (--muted, --text…). */

@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/barlow-condensed-800-italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}

:root{
  --nuit:#070b1f; --nuit-2:#0d1433; --nuit-3:#151d47;
  --nuit-4:#2a3570; --abime:#05081a;
  --craie:#f3f0e8; --brume:#959dbf;
  --cordeau:#5b78ff; --cordeau-clair:#9db0ff;
  --regle:rgba(243,240,232,.13);
  --feu:#ff7a33;               /* accent chaud : réservé à l'action et aux résultats */
  --cta:var(--feu); --cta-encre:var(--nuit);
  --fd:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --fb:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gout:clamp(1.25rem,6vw,7rem);
  --large:78rem;
  /* Correspondances avec les variables de la V4, encore utilisées en style en ligne */
  --bg:var(--nuit); --text:var(--craie); --muted:var(--brume); --c:var(--cordeau-clair); --v:var(--cordeau-clair);
  --surface:var(--nuit-2); --border:var(--regle); --star:#f5b301;
  --v-10:rgba(91,120,255,.1); --v-15:rgba(91,120,255,.15); --v-20:rgba(91,120,255,.2); --v-25:rgba(91,120,255,.25);
  --r-md:12px; --r-lg:18px; --r-xl:24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--nuit);color:var(--craie);font-family:var(--fb);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cordeau-clair);outline-offset:4px;border-radius:4px}
::selection{background:var(--cordeau);color:#fff}
.evitement{position:fixed;left:1rem;top:-4rem;z-index:80;background:var(--craie);color:var(--nuit);padding:.6rem 1rem;border-radius:8px;font-weight:600}
.evitement:focus{top:1rem}

/* ——— Typographie ——— */
h1,h2,.serif{font-family:var(--fd);font-weight:400;font-optical-sizing:auto;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.4vw,6.2rem);line-height:1;letter-spacing:-.025em}
h2{font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.05}
h3{font-family:var(--fb);font-size:1.12rem;font-weight:600;line-height:1.35;letter-spacing:-.005em}
p+p{margin-top:1rem}
strong{font-weight:600;color:var(--craie)}
.grad-text{font-style:italic}
.eyebrow{display:block;font-size:.95rem;font-weight:500;color:var(--cordeau-clair)}
.diag-q{font-family:var(--fd);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35;color:var(--craie);margin:1.5rem 0 1rem;max-width:32ch}
.seo-hero-lead{color:var(--brume);font-size:1.12rem;max-width:38rem;margin:1.25rem 0 2rem}
.mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.mask>span{display:block}

/* ——— Mise en page ——— */
.page{position:relative}
.container{width:100%;max-width:calc(var(--large) + 2 * var(--gout));margin-inline:auto;padding-inline:var(--gout);position:relative}
main{position:relative}
main>*{position:relative;z-index:2}
.section{position:relative;padding-block:clamp(4.5rem,12vh,8rem)}
.section--alt{background:linear-gradient(var(--nuit-2),var(--nuit-2)) padding-box}
.section h2{margin-bottom:clamp(1.75rem,4vh,3rem)!important}
.section h2[style*="text-align:center"]{margin-inline:auto;max-width:18ch}
.split-grid{display:grid;gap:3rem}
@media(min-width:900px){.split-grid{grid-template-columns:1fr 1fr;gap:5rem;align-items:start}}

/* Une rupture claire par page longue : la section des questions fréquentes */
.section:has(.faq-list):not(.sombre),.claire{
  --craie:#070b1f; --brume:#4f577a; --regle:color-mix(in srgb,var(--nuit) 14%,transparent); --cordeau-clair:#2b4bd7; --feu:#c73f08; --cta:#c73f08; --cta-encre:#fff;
  --text:#070b1f; --muted:#4f577a; --c:#2b4bd7; --v:#2b4bd7; --border:color-mix(in srgb,var(--nuit) 14%,transparent);
  background:#f3f0e8;color:#070b1f;border-radius:clamp(1.5rem,4vw,3.5rem);margin-block:clamp(1rem,3vh,2rem)}

/* ——— Le trait de cordeau ——— */
.cordeau{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:3;overflow:visible}
body:not(.accueil) .cordeau{z-index:1}
.cordeau path{fill:none;stroke:var(--cordeau);stroke-width:1.5}
.cordeau circle{fill:var(--feu);filter:drop-shadow(0 0 8px var(--feu)) drop-shadow(0 0 18px var(--feu));opacity:0}
.knot{position:absolute;width:1px;height:1px;pointer-events:none}

/* ——— En-tête ——— */
.tete{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:1.1rem var(--gout);transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.tete.is-hidden{transform:translateY(-110%)}
.tete.is-solid{background:color-mix(in srgb,var(--nuit) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{font-weight:600;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap;margin-right:auto}
.logo i{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--cordeau);margin:0 .08em .5em}
.menu{display:flex;align-items:center;gap:2.1rem;font-size:.93rem;color:var(--brume)}
.menu>a,.menu-services{position:relative;padding:.3rem 0;transition:color .3s}
.menu>a::after,.menu-services::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--craie);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.menu>a:hover,.menu-services:hover,.menu>a[aria-current],.menu-services[data-actif]{color:var(--craie)}
.menu>a:hover::after,.menu-services:hover::after,.menu>a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.menu-groupe{position:relative}
.menu-services::before{content:"";float:right;width:.42em;height:.42em;margin:.45em 0 0 .45em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sous-menu{position:absolute;left:-1.5rem;top:calc(100% + 1rem);display:grid;grid-template-columns:repeat(3,max-content);gap:1.5rem 2.75rem;padding:1.75rem 2rem 1.5rem;border-radius:18px;
  background:color-mix(in srgb,var(--nuit-2) 97%,transparent);border:1px solid var(--regle);box-shadow:0 40px 80px -30px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.sous-menu p{font-size:.8rem;color:var(--cordeau-clair);margin-bottom:.65rem}
.sous-menu a{display:block;color:var(--craie);font-size:.95rem;padding:.25rem 0;transition:color .25s}
.sous-menu a:hover{color:var(--feu)}
.sous-menu .tous{grid-column:1/-1;border-top:1px solid var(--regle);padding-top:1rem;color:var(--brume)}
.menu-groupe.ouvert .sous-menu,.menu-groupe:focus-within .sous-menu{opacity:1;visibility:visible;transform:none}
@media(hover:hover){.menu-groupe:hover .sous-menu{opacity:1;visibility:visible;transform:none}}
.menu-contact{display:none}
.burger{display:none;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--regle);position:relative;z-index:2}
.burger span{position:absolute;left:30%;right:30%;height:1.5px;background:var(--craie);transition:transform .4s}
.burger span:first-child{top:42%}.burger span:last-child{top:57%}
.burger[aria-expanded="true"] span:first-child{transform:translateY(.21rem) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-.21rem) rotate(-45deg)}
@media(max-width:999px){
  .tete{gap:1rem}
  .tete .tete-cta{display:none}
  .burger{display:block}
  .menu{position:fixed;inset:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:6.5rem var(--gout) 3rem;overflow-y:auto;background:var(--nuit);
    font-family:var(--fd);font-size:clamp(1.9rem,7vw,2.6rem);color:var(--craie);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
  .menu.ouvert{opacity:1;visibility:visible}
  .menu>a,.menu-services{padding:.35rem 0}
  .menu>a::after,.menu-services::after{display:none}
  .menu-groupe{width:100%}
  .sous-menu{position:static;display:none;grid-template-columns:1fr;gap:1rem;padding:.5rem 0 1rem;background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;font-family:var(--fb)}
  .menu-groupe.ouvert .sous-menu{display:grid}
  .sous-menu a{font-size:1.05rem}
  .menu-contact{display:inline-flex;margin-top:2rem;font-family:var(--fb);font-size:1rem;font-weight:600;padding:1.05rem 1.9rem;border-radius:99px;background:var(--cta);color:var(--cta-encre)}
}

/* ——— Boutons et liens ——— */
.btn,.btn-primary,.btn-white,.cta-actions a{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  padding:1.05rem 1.9rem;border-radius:99px;font-weight:600;font-size:.98rem!important;line-height:1;white-space:nowrap;background:var(--cta);color:var(--cta-encre);transition:color .45s}
.btn::before,.btn-primary::before,.btn-white::before,.cta-actions a::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--craie);border-radius:inherit;transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.btn:hover,.btn-primary:hover,.btn-white:hover,.cta-actions a:hover{color:var(--nuit)}
.btn:hover::before,.btn-primary:hover::before,.btn-white:hover::before,.cta-actions a:hover::before{transform:none}
.btn--petit{padding:.75rem 1.25rem;font-size:.88rem!important;background:var(--craie);color:var(--nuit)}
.btn--petit::before{background:var(--feu)}
.btn--grand{padding:1.5rem 2.8rem;font-size:1.12rem!important}
.btn-ghost{display:inline-flex;align-items:center;padding:1rem 1.6rem;border-radius:99px;border:1px solid var(--regle);font-weight:500;transition:border-color .3s}
.btn-ghost:hover{border-color:var(--craie)}
.lien,.article-body a,.blog-card-link{font-weight:500;padding-bottom:.2rem;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.lien:hover,.article-body a:hover,.blog-card-link:hover{background-size:0 1px;background-position:100% 100%}

/* ——— Fil d'Ariane ——— */
.breadcrumb{margin-bottom:2rem;font-size:.88rem;color:var(--brume)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumb li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.breadcrumb a:hover{color:var(--craie)}
.breadcrumb [aria-current]{color:var(--craie)}

/* ——— En-tête des pages intérieures ——— */
main>.section:first-child,main>section.seo-hero,main>.svc-hero,main>.container:first-child{padding-top:clamp(8rem,20vh,12rem)}
main>.section:first-child h1{max-width:16ch}

/* ——— Blocs de contenu hérités ——— */
.benefits-grid,.cards-grid-3{display:grid;gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.benefit-item,.card,.cards-grid-3>div{position:relative;padding-top:1.5rem;border-top:1px solid var(--regle);background:none!important;border-radius:0!important;padding-inline:0!important;padding-bottom:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}
.benefit-item h3,.card h3{margin-bottom:.6rem}
.benefit-item p,.card p{color:var(--brume);font-size:.98rem!important;line-height:1.7!important}
.benefit-item::before,.card::before{content:"";position:absolute;left:0;top:-1px;width:2.5rem;height:1px;background:var(--cordeau)}
.benefit-icon,.card-icon,.cards-grid-3>div>div:first-child:not(:only-child)[style*="font-size:2rem"]{display:none!important}
.card ul{margin-top:1rem}
.card li{font-size:.92rem!important}
.card .btn-primary{margin-top:.5rem}
.pain-list{display:grid;gap:0;max-width:46rem}
.pain-list li{position:relative;padding:1.15rem 0 1.15rem 2.25rem;border-bottom:1px solid var(--regle);font-family:var(--fd);font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.3}
.pain-list li::before{content:"";position:absolute;left:0;top:1.85rem;width:1.25rem;height:1px;background:var(--cordeau)}
.faq-list{max-width:52rem}
.faq-item{border-bottom:1px solid var(--regle)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:2rem;padding:1.4rem 0;font-family:var(--fd);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:1rem;height:1rem;margin-top:.35rem;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .4s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--brume);padding:0 0 1.5rem;max-width:44rem}
.nearby-list{display:flex;flex-wrap:wrap;gap:.6rem}
.nearby-list a{display:inline-block;padding:.55rem 1.1rem;border-radius:99px;border:1px solid var(--regle);font-size:.92rem;transition:border-color .3s,color .3s}
.nearby-list a:hover{border-color:var(--feu);color:var(--feu)}
.tags-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.badge,.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:99px;border:1px solid var(--regle);font-size:.85rem;color:var(--brume)}
.badge-dot{width:.45rem;height:.45rem;border-radius:50%;background:#22c55e}

/* Grand appel à l'action */
.cta-box{position:relative;text-align:center;padding:clamp(3rem,10vh,6rem) 0;display:flex;flex-direction:column;align-items:center}
.cta-box h2{font-size:clamp(2.4rem,6vw,5.5rem);line-height:1;letter-spacing:-.025em;max-width:14ch;margin-bottom:1.5rem!important}
.cta-box>p{color:var(--brume);max-width:34rem}
.cta-actions{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.cta-orb{display:none}

/* Photos avec crédit */
.seo-photo{margin:2rem 0}
.seo-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.seo-photo figcaption,.credit{margin-top:.6rem;font-size:.78rem;color:var(--brume)}
.seo-photo figcaption a,.credit a{text-decoration:underline}

/* ——— En-tête des pages services (ancienne « scène défilée ») ——— */
.svc-hero{position:relative;padding-bottom:clamp(3rem,8vh,5rem)}
.svc-hero .scrub-grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media(min-width:1000px){.svc-hero .scrub-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.svc-hero h1{font-size:clamp(2.5rem,5.2vw,5.2rem)}
.svc-hero .scrub-body>p[style]{font-size:1.02rem!important;max-width:36rem}
.scrub-bar{display:none}

/* ——— Cadre des scènes animées ——— */
.demo{position:relative;width:100%;aspect-ratio:var(--ratio,4/3);border-radius:18px;overflow:hidden;background:var(--nuit-2);border:1px solid var(--regle);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--cordeau) 6%,transparent) inset}
.demo-legende{margin-top:.75rem;font-size:.78rem;color:var(--brume)}

/* ——— Réalisations ——— */
.portfolio-grid{display:grid;gap:clamp(3rem,8vh,5rem)}
@media(min-width:900px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid>div:first-child{grid-column:1/-1}}
.portfolio-item{aspect-ratio:16/10;overflow:hidden;border-radius:14px;border:1px solid var(--regle);background:var(--nuit-2)}
.portfolio-item img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),object-position 6s ease}
.portfolio-item:hover img{transform:scale(1.03);object-position:50% 100%}
.portfolio-grid h2{font-family:var(--fd)!important;font-weight:400!important;font-size:clamp(1.5rem,2.4vw,2.2rem)!important;margin-bottom:0!important}

/* ——— Blog ——— */
.blog-grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem) clamp(2rem,4vw,3rem);grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.blog-card{position:relative;display:flex;flex-direction:column;gap:.75rem;padding-top:1.5rem;border-top:1px solid var(--regle)}
.blog-card::before{content:"";position:absolute;left:0;top:-1px;width:2.5rem;height:1px;background:var(--cordeau)}
.blog-card-cover{display:block;overflow:hidden;border-radius:14px;border:1px solid var(--regle);aspect-ratio:1200/630;margin-bottom:.5rem}
.blog-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.blog-card:hover .blog-card-cover img{transform:scale(1.04)}
.blog-card:has(.blog-card-cover){padding-top:0;border-top:0}
.blog-card:has(.blog-card-cover)::before{display:none}
.blog-card-cat,.article-category{font-size:.85rem;color:var(--cordeau-clair)}
.blog-card h2{font-size:clamp(1.45rem,2.2vw,1.85rem)!important;line-height:1.15;margin:0!important}
.blog-card p{color:var(--brume);font-size:.96rem}
.blog-card-link{align-self:flex-start;margin-top:auto;font-size:.92rem}
.article-container{max-width:calc(46rem + 2 * var(--gout))}
.article-header{margin-bottom:3rem}
.article-header h1{font-size:clamp(2.3rem,5vw,4.2rem);margin:.75rem 0 1rem}
.article-header time{color:var(--brume);font-size:.9rem}
.article-scene{margin:0 0 3.5rem}
.article-scene .demo-legende{display:none}
.article-container .couverture{width:100%;height:auto;border-radius:16px;border:1px solid var(--regle);margin:0 0 3rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.article-body{font-size:1.08rem;line-height:1.8}
.article-body>*+*{margin-top:1.25rem}
.article-body h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:3rem!important}
.article-body h3{font-size:1.2rem;margin-top:2rem!important}
.article-body p,.article-body li{color:#d6d8e6}
.article-body ul,.article-body ol{padding-left:1.25rem}
.article-body ul{list-style:none}
.article-body ul li{position:relative}
.article-body ul li::before{content:"";position:absolute;left:-1.25rem;top:.85em;width:.6rem;height:1px;background:var(--cordeau)}
.article-body ol{list-style:decimal}
.article-body li+li{margin-top:.5rem}
.article-body blockquote{border-left:1px solid var(--cordeau);padding-left:1.5rem;font-family:var(--fd);font-size:1.35rem;color:var(--craie)}
.article-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.article-body th,.article-body td{text-align:left;padding:.75rem .5rem;border-bottom:1px solid var(--regle)}
.article-cta{margin-top:4rem}

/* ——— Contact ——— */
.contact-grid{display:grid;gap:4rem}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:6rem;align-items:start}}
.contact-grid>div:first-child span[style*="font-size:1.25rem"]{display:none}
.contact-grid>div:last-child{background:var(--nuit-2)!important;border-color:var(--regle)!important}
.form-row{display:grid;gap:1.25rem}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.25rem}
.form-group label{font-size:.88rem;font-weight:500;color:var(--brume)}
input,textarea,select{font:inherit;color:var(--craie);background:rgba(243,240,232,.04);border:1px solid var(--regle);border-radius:12px;padding:.85rem 1rem;width:100%;transition:border-color .3s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--cordeau-clair)}
textarea{min-height:9rem;resize:vertical}
select option{background:var(--nuit-2)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form button[type=submit]{margin-top:.5rem}
form button[type=submit]:not([class]){position:relative;display:inline-flex;padding:1.05rem 1.9rem;border-radius:99px;font-weight:600;background:var(--cta);color:var(--cta-encre)}

/* ——— 404 ——— */
.page-404{min-height:80svh;display:flex;align-items:center}
.page-404 h1{font-family:var(--fd)!important;color:var(--craie)!important;font-weight:400}

/* ——— Pied de page ——— */
.pied{position:relative;z-index:2;border-top:1px solid var(--regle);color:var(--brume);font-size:.93rem}
.pied-haut{display:grid;gap:3rem;padding:clamp(3.5rem,9vh,5.5rem) var(--gout) 3rem;max-width:calc(var(--large) + 2 * var(--gout));margin-inline:auto}
@media(min-width:900px){.pied-haut{grid-template-columns:1.1fr 2fr;gap:5rem}}
.pied-marque .logo{display:inline-block;color:var(--craie);margin-bottom:1.25rem}
.pied-marque p{max-width:26rem}
.pied address{font-style:normal;margin-top:1.5rem;line-height:1.9}
.pied address a{color:var(--craie)}
.pied-nav{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.pied-nav h2{font-family:var(--fb);font-size:.82rem;font-weight:600;color:var(--cordeau-clair);margin:0 0 .75rem!important;letter-spacing:0}
.pied-nav h2:not(:first-child){margin-top:1.75rem!important}
.pied-nav a{display:block;padding:.2rem 0;transition:color .25s}
.pied-nav a:hover{color:var(--craie)}
.pied-bas{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:1.5rem var(--gout) 2.25rem;border-top:1px solid var(--regle);font-size:.85rem;max-width:calc(var(--large) + 2 * var(--gout));margin-inline:auto}
.pied-bas nav{display:flex;gap:1.5rem}
.pied-bas a:hover{color:var(--craie)}

/* Les titres montent derrière un masque quand ils arrivent à l'écran (classes posées par site.js) */
.js .leve{opacity:0}
@media (prefers-reduced-motion:reduce){.js .leve{opacity:1}}

.claire .btn:hover,.section:has(.faq-list) .btn:hover,.claire .btn-primary:hover{color:#f3f0e8}

/* ——— Appel à l'action discret, à côté de chaque élément ——— */
.mini-cta{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:500;color:var(--brume);padding-bottom:.15rem;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s,background-size .45s cubic-bezier(.2,.7,.2,1)}
.mini-cta::after{content:"";width:.42em;height:.42em;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .35s}
.mini-cta:hover{color:var(--feu);background-size:100% 1px}
.mini-cta:hover::after{transform:translateX(.2rem) rotate(45deg)}
.benefit-item .mini-cta,.card .mini-cta{margin-top:1rem}

/* ——— Le bouton toujours prêt, en bas à droite ——— */
.cta-flottant{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:45;display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1.15rem .8rem 1rem;border-radius:99px;font-size:.88rem;font-weight:600;color:var(--craie);
  background:color-mix(in srgb,var(--nuit-2) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(243,240,232,.16);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s,border-color .3s}
.cta-flottant i{width:.5rem;height:.5rem;border-radius:50%;background:var(--feu);box-shadow:0 0 0 0 color-mix(in srgb,var(--feu) 60%,transparent);animation:pouls 2.4s infinite}
.cta-flottant.visible{opacity:1;visibility:visible;transform:none}
.cta-flottant:hover{border-color:var(--feu)}
@keyframes pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--feu) 55%,transparent)}70%{box-shadow:0 0 0 .55rem color-mix(in srgb,var(--feu) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--feu) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.cta-flottant i{animation:none}}

/* ——— En-tête des pages : la scène en haut de sa colonne, toujours entière à l'écran ——— */
@media(min-width:1000px){.svc-hero .scrub-grid{align-items:start}.svc-hero .svc-scene{margin-top:.75rem}}
/* ——— Charte « noir et or » du site (html[data-charte="or"], posé par seo-head.php), alignée sur le logo et les vidéos.
   Choisie le 11/11/2026 ; les valeurs de :root plus haut sont l'ancienne charte bleue, gardée en repli. ——— */
:root[data-charte="or"]{
  --nuit:#0a0a0b; --nuit-2:#141416; --nuit-3:#1d1d20; --nuit-4:#2c2c30; --abime:#050506;
  --craie:#f4f3ef; --brume:#9b9a94;
  --cordeau:#c9963f; --cordeau-clair:#e2b866;
  --regle:rgba(255,255,255,.14);
  --feu:#e2b866;
  --cta:linear-gradient(100deg,#f6dfa0,#d4a24c 35%,#9a6a22 72%,#e8c878); --cta-encre:#0a0a0b;
}
[data-charte="or"] .section:has(.faq-list):not(.sombre),[data-charte="or"] .claire{
  --craie:#0a0a0b; --brume:#5f5e59; --regle:rgba(10,10,11,.14); --cordeau:#b8862f; --cordeau-clair:#8a5a1c; --feu:#8a5a1c;
  --cta:linear-gradient(100deg,#b8862f,#8a5a1c 45%,#c9963f); --cta-encre:#fff; --text:#0a0a0b; --muted:#5f5e59; --c:#8a5a1c; --v:#8a5a1c;
  background:#f6f5f1}
[data-charte="or"] .claire .btn:hover,[data-charte="or"] .section:has(.faq-list) .btn:hover{color:#f4f3ef}
[data-charte="or"] ::selection{background:#c9963f;color:#0a0a0b}

/* ——— Le logo ——— */
.logo{display:inline-flex;align-items:center}
.logo img{display:block;height:2.6rem;width:auto}
.pied-marque .logo img{height:3.4rem}

/* ——— L'Orbe : la mascotte qui suit le trait au fil du défilement ——— */
.orbe{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:1;pointer-events:none;opacity:0;will-change:transform}
.orbe-corps{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--feu) 35%,transparent) 0%,transparent 34%),radial-gradient(circle at 50% 50%,rgba(8,6,4,.55) 0%,rgba(8,6,4,.72) 62%,color-mix(in srgb,var(--feu) 30%,transparent) 100%);
  box-shadow:inset 0 0 3px rgba(255,235,190,.6),inset 0 0 10px color-mix(in srgb,var(--feu) 45%,transparent),0 0 calc(10px + 18px * var(--eclat,0)) color-mix(in srgb,var(--feu) calc(40% + 45% * var(--eclat,0)),transparent);
  animation:orbe-flotte 4.2s ease-in-out infinite}
.orbe-corps img{position:absolute;left:22%;top:20%;width:56%;filter:brightness(1.15) drop-shadow(0 0 3px rgba(255,210,120,.7));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.orbe-corps::before{content:"";position:absolute;left:14%;top:8%;width:44%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.6),transparent 70%);transform:rotate(-20deg)}
.orbe-corps::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,240,210,.45)}
.orbe svg{position:absolute;inset:-30%;width:160%;height:160%;overflow:visible}
.orbe ellipse{fill:none;stroke:var(--cordeau-clair);stroke-width:.9;stroke-dasharray:14 5 2 5;opacity:.75;animation:orbe-anneau 3s linear infinite}
@keyframes orbe-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes orbe-anneau{to{stroke-dashoffset:-52}}
.cordeau circle{display:none}
.accueil .orbe{z-index:3}
@media(max-width:899px){.orbe{width:36px;height:36px;margin:-18px 0 0 -18px}}
@media (prefers-reduced-motion:reduce){.orbe-corps,.orbe ellipse{animation:none}}

/* Le bouton flottant porte le Y */
.cta-flottant img{width:1.15rem;height:auto;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--feu) 60%,transparent));animation:orbe-flotte 3s ease-in-out infinite}
/* ——— Pictogrammes dorés des éléments présentés, chiffres des étapes ——— */
.picto{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;margin-bottom:1.2rem;border-radius:50%;color:var(--cordeau-clair);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--feu) 16%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--cordeau-clair) 35%,transparent);
  box-shadow:0 0 30px -12px color-mix(in srgb,var(--feu) 70%,transparent);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.picto svg{width:1.45rem;height:1.45rem}
.benefit-item:hover .picto,.card:hover .picto{transform:translateY(-3px) rotate(-6deg);box-shadow:0 0 36px -8px color-mix(in srgb,var(--feu) 90%,transparent)}
.chiffre{display:block;font-family:var(--fd);font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;margin-bottom:.9rem;color:transparent;
  background:linear-gradient(100deg,#f6dfa0,#d4a24c 35%,#9a6a22 72%,#e8c878);-webkit-background-clip:text;background-clip:text}
:root:not([data-charte="or"]) .chiffre{background:none;color:var(--cordeau-clair)}