/* ============================================================
   OCTOPUS — Feuille de style (site + devis + admin)
   Palette « Grand Océan ». Aucune dépendance CSS externe.
   ============================================================ */
:root{
  --ink:#0f172a; --navy:#1e1b4b; --indigo:#312e81; --indigo2:#6366f1; --indigo3:#818cf8;
  --yellow:#facc15; --yellow2:#eab308; --cyan:#22d3ee; --paper:#f8fafc; --line:#e2e8f0;
  --r:1.25rem; --r2:2rem; --shadow:0 10px 30px rgba(30,27,75,.10); --shadow-lg:0 30px 60px rgba(30,27,75,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden}
/* Pages dynamiques (#app rempli par JS) : invisibles jusqu'au premier rendu
   réel du contenu. Sans ça, le footer est visible juste sous #app vide au
   premier affichage, puis "saute" tout en bas dès que le contenu se charge —
   c'est la cause du décalage de mise en page (CLS) observé sur ces pages.
   Le filet de sécurité (script inline + JS d'amorçage) garantit que la page
   redevient visible même en cas d'erreur. */
body[data-view]{visibility:hidden}
body[data-view].octopus-ready{visibility:visible}
section[id]{scroll-margin-top:6rem}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--indigo2);outline-offset:3px;border-radius:10px}
.hidden-view{display:none !important}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.eyebrow{color:var(--indigo2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;text-align:center}
.title-wave{width:6rem;margin:1rem auto;color:var(--yellow)}
.title-wave svg{width:100%}
.h-sec{font-size:clamp(1.9rem,4vw,3rem);font-weight:900;color:var(--navy);text-align:center;margin:.4rem 0 0}
.section{padding:6rem 0}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;font-family:inherit;font-weight:900;
  padding:.9rem 1.8rem;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s;font-size:1rem}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 10px 30px rgba(250,204,21,.35)}
.btn-yellow:hover{background:var(--yellow2)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.btn-navy:hover{background:#151238}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}

/* ---------- Header pilule ---------- */
.pill-header{position:fixed;top:1rem;left:0;width:100%;z-index:120;display:flex;justify-content:center;padding:0 1rem;pointer-events:none}
.pill-nav{pointer-events:auto;width:100%;max-width:72rem;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6);border-radius:2rem;padding:.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;background:none;border:0;cursor:pointer}
.brand img{width:2.4rem;height:2.4rem;object-fit:contain}
.brand span{font-weight:900;font-size:1.4rem;color:var(--navy);letter-spacing:-.02em}
.nav-links{display:flex;gap:1.6rem;font-weight:800;color:#475569}
.nav-links a:hover{color:var(--indigo2)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.burger{display:none;background:none;border:0;color:var(--navy);font-size:1.4rem;cursor:pointer;padding:.4rem}
.mobile-menu{position:absolute;top:5rem;left:1rem;right:1rem;background:#fff;border-radius:1.5rem;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);padding:1.5rem;transform-origin:top;transform:scaleY(0);opacity:0;pointer-events:none;transition:.25s;pointer-events:auto}
.mobile-menu.open{transform:scaleY(1);opacity:1}
.mobile-menu a,.mobile-menu button{display:block;text-align:center;font-weight:900;color:var(--navy);font-size:1.4rem;padding:.6rem;background:none;border:0;width:100%;cursor:pointer}
@media(max-width:1024px){.nav-links{display:none}.burger{display:block}}
@media(min-width:1025px){.mobile-menu{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--navy);overflow:hidden;padding:8rem 1rem 16rem}
.hero::before{content:"";position:absolute;inset:0;opacity:.4;
  background:radial-gradient(circle at 28% 22%,rgba(34,211,238,.28),transparent 45%),radial-gradient(circle at 76% 30%,rgba(129,140,248,.32),transparent 42%)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;mix-blend-mode:screen}
.hero-inner{position:relative;z-index:20;max-width:60rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;background:rgba(255,255,255,.1);
  color:var(--yellow);font-weight:800;border:1px solid rgba(255,255,255,.1);margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;color:#fff;line-height:1.05;margin:0 0 1.5rem;letter-spacing:-.02em}
.hero h1 .accent{background:linear-gradient(90deg,#fde68a,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(1.05rem,2.4vw,1.5rem);color:#e0e7ff;font-weight:700;max-width:44rem;margin:0 auto 2.5rem;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero-devis-btn{position:relative;overflow:hidden;isolation:isolate;font-size:1.05rem;padding:1.1rem 2.2rem}
.hero-devis-btn i{margin-right:.4rem}
.hero-devis-btn::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  box-shadow:0 0 0 0 rgba(34,211,238,.55);
  animation:hero-devis-ripple 2.6s cubic-bezier(.25,1,.5,1) infinite;
}
.hero-devis-btn::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  animation:hero-devis-sweep 3.2s ease-in-out infinite;
}
@keyframes hero-devis-ripple{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}
  70%{box-shadow:0 0 0 14px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 14px rgba(34,211,238,0)}
}
@keyframes hero-devis-sweep{0%{left:-60%}55%{left:130%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.hero-devis-btn::before,.hero-devis-btn::after{animation:none}}
.hero-social-proof{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.1rem;color:#e0e7ff;font-weight:800;font-size:.85rem;flex-wrap:wrap}
.hero-social-proof .hsp-stars{color:#facc15;letter-spacing:1px;font-size:.85rem}
.hero-social-proof .hsp-text strong{color:#fff}

/* ---------- Vagues ---------- */
.wave-band{position:absolute;left:0;width:100%;overflow:hidden;line-height:0;pointer-events:none}
.wave-band svg{position:absolute;bottom:-1px;left:0;width:200%;height:100%}
.hero-waves{height:12rem;bottom:-2px}
@media(min-width:768px){.hero-waves{height:16rem}}
.footer-waves{top:0;height:8rem;transform:translateY(-99%)}
@media(min-width:768px){.footer-waves{height:13rem}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wave-slow{animation:wave 14s linear infinite}.wave-med{animation:wave 10s linear infinite}.wave-fast{animation:wave 7s linear infinite}

/* ---------- Effets d'eau ---------- */
#ripples-container{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.ripple-set{position:absolute}
.ripple-set .rp{position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;transform:translate(-50%,-50%)}
.rp1{border:3px solid rgba(34,211,238,.6);animation:ripple 1s cubic-bezier(.25,1,.5,1) forwards}
.rp2{border:2px solid rgba(96,165,250,.4);animation:ripple 1.25s cubic-bezier(.25,1,.5,1) .1s forwards}
.rp3{border:1px solid rgba(129,140,248,.3);animation:ripple 1.5s cubic-bezier(.25,1,.5,1) .2s forwards}
@keyframes ripple{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(6);opacity:0;border-width:0}}
.jd{position:absolute;bottom:0;background:rgba(255,255,255,.6);border-radius:50%;animation:jump ease-in-out infinite}
@keyframes jump{0%{transform:translateY(20px) scale(1.2);opacity:0}20%{opacity:.85}55%{transform:translateY(-90px) scale(.7);opacity:.7}100%{transform:translateY(-130px) scale(.4);opacity:0}}
.bubble{position:absolute;bottom:0;border-radius:50%;background:rgba(255,255,255,.13);animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.5}100%{transform:translateY(-150px) scale(.4);opacity:0}}
#jumping-drops,#hero-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* #footer-bubbles : hauteur fixe et indépendante du contenu du footer (jamais
   liée à sa hauteur réelle, qui peut varier). Élimine toute possibilité de
   décalage de mise en page (CLS) causé par cet élément, quelle qu'en soit
   la cause exacte côté contenu. Purement décoratif, aucun impact visuel
   négatif à ne pas couvrir 100% d'un footer inhabituellement haut. */
#footer-bubbles{position:absolute;top:0;left:0;right:0;height:420px;pointer-events:none;overflow:hidden}

/* ---------- Reveal (animations entre sections) ---------- */
.reveal{opacity:0;transform:translateY(42px) scale(.98);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- À propos ---------- */
.about{padding:6rem 0;background:#fff}
.about .container{display:flex;gap:4rem;align-items:center;flex-wrap:wrap}
.about-visual{flex:1 1 320px;background:#eef2ff;border-radius:var(--r2);border:4px solid #fff;box-shadow:var(--shadow-lg);
  padding:3rem;display:flex;align-items:center;justify-content:center;min-height:320px;background-size:cover;background-position:center}
.about-visual picture{width:70%;display:block}
.about-visual picture img{width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(49,46,129,.25));animation:float 6s ease-in-out infinite}
.about-visual img{width:70%;height:auto;filter:drop-shadow(0 20px 30px rgba(49,46,129,.25));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}
.about-text{flex:1 1 380px}
.about-text .eyebrow{text-align:left;color:var(--yellow2)}
.about-text .title-wave{margin-left:0}
.about-text h3{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;color:var(--navy);margin:.6rem 0 1.4rem;line-height:1.15}
.about-text p{color:#475569;font-size:1.15rem;line-height:1.7;font-weight:500;margin:0 0 1.2rem}

/* ---------- Storytelling ---------- */
.story{padding:5rem 0;background:#0f172a;border-bottom:8px solid var(--navy)}
.story .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;text-align:center}
.story .step .ic{width:5rem;height:5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:1.8rem}
.story .step:nth-child(1) .ic{border:1px solid #334155;color:#64748b;background:#1e293b}
.story .step:nth-child(2) .ic{border:2px solid var(--indigo2);color:var(--indigo3);background:rgba(49,46,129,.3)}
.story .step:nth-child(3) .ic{border:4px solid var(--yellow);color:var(--yellow);background:rgba(250,204,21,.1);box-shadow:0 0 30px rgba(250,204,21,.3)}
.story .step h3{font-size:1.4rem;font-weight:900;margin:0 0 .6rem}
.story .step:nth-child(1) h3{color:#cbd5e1}.story .step:nth-child(2) h3{color:var(--indigo3)}.story .step:nth-child(3) h3{color:var(--yellow)}
.story .step p{color:#94a3b8;font-weight:700}

/* ---------- Cartes services / portfolio / témoignages ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:900px){.grid-3,.story .grid-3{grid-template-columns:1fr}}
.svc-card{background:#fff;padding:2rem;border-radius:var(--r2);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s,border-color .3s;text-align:left;cursor:default}
.svc-card.as-btn{cursor:pointer;font-family:inherit;width:100%}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:#c7d2fe}
.svc-ico{width:4rem;height:4rem;border-radius:1rem;background:#eef2ff;color:var(--indigo2);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:1.4rem;transition:.3s}
.svc-card:hover .svc-ico{background:var(--indigo2);color:#fff}
.svc-card h4{font-size:1.4rem;font-weight:900;color:var(--navy);margin:0 0 .6rem}
.svc-card p{color:#475569;font-weight:500;margin:0 0 1.2rem}
.svc-link{color:var(--indigo2);font-weight:900;display:inline-flex;gap:.5rem;align-items:center}
.folio{cursor:pointer}
.folio-img{aspect-ratio:4/3;border-radius:var(--r2);background:#e2e8f0 center/cover;position:relative;overflow:hidden;box-shadow:var(--shadow);margin-bottom:1rem;display:flex;align-items:flex-end;padding:1.5rem}
.folio-tag{background:var(--yellow);color:var(--navy);font-weight:900;padding:.6rem 1.2rem;border-radius:999px;opacity:0;transform:translateY(10px);transition:.3s}
.folio:hover .folio-tag{opacity:1;transform:none}
.folio h4{color:var(--navy);font-weight:900;margin:0}.folio p{color:#64748b;font-weight:700;margin:.2rem 0 0}
.tmoni{background:#fff;border-radius:var(--r2);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.tmoni-media{aspect-ratio:1;background:var(--navy) center/cover;display:flex;align-items:center;justify-content:center;color:#fff;font-size:3.5rem;opacity:.9}
.tmoni-body{padding:2rem;position:relative}
.tmoni-body.no-media{padding-top:2.5rem}
.stars{color:var(--yellow);margin-bottom:1rem;display:flex;gap:.2rem}
.tmoni-body p{font-style:italic;color:#475569;font-weight:700;font-size:1.1rem;line-height:1.6;margin:0 0 1.4rem}
.tmoni-body h4{color:var(--navy);font-weight:900;margin:0;font-size:1.2rem}
.tmoni-body span{color:var(--indigo2);font-weight:900;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}

/* ---------- Contact ---------- */
.contact{padding:6rem 0;background:#fff;border-top:1px solid var(--line)}
.contact-wrap{display:flex;gap:3rem;max-width:64rem;margin:0 auto;flex-wrap:wrap}
.contact-info{flex:1 1 220px;display:flex;flex-direction:column;gap:1.5rem}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:2rem;box-shadow:var(--shadow)}
.info-card .ic{width:3rem;height:3rem;border-radius:.9rem;background:#e0e7ff;color:var(--indigo2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:1rem}
.info-card h3{color:var(--navy);font-weight:900;margin:0 0 .4rem}.info-card p{color:#475569;margin:0;font-weight:600}
.contact-card{flex:2 1 360px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow-lg);padding:3rem}
.field{margin-bottom:1.2rem}
.field label{display:block;font-weight:800;color:#334155;margin-bottom:.4rem;font-size:.9rem}
.field input,.field textarea{width:100%;padding:.9rem 1rem;border-radius:var(--r);border:2px solid var(--line);background:var(--paper);
  font-family:inherit;font-weight:700;color:var(--navy)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--indigo2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.anti{background:#eef2ff;border:1px solid #c7d2fe;border-radius:var(--r);padding:1.2rem;margin-bottom:1.2rem}
.anti .row{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
.anti .eq{font-weight:900;font-size:1.2rem;color:var(--navy)}
.anti input{width:5rem;text-align:center}
.anti .roll{margin-left:auto;background:none;border:0;color:#94a3b8;cursor:pointer;font-size:1.1rem}
.err{color:#dc2626;font-weight:800;background:#fef2f2;padding:.7rem 1rem;border-radius:.8rem;margin:0 0 1rem}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--navy);padding:10rem 0 2.5rem;overflow:visible;color:#fff}
.footer-glow{position:absolute;bottom:8rem;right:0;width:20rem;height:20rem;background:var(--indigo);border-radius:50%;filter:blur(120px)}
.foot-grid{position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-bottom:4rem}
@media(min-width:901px){.foot-grid{min-height:280px}}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;cursor:pointer}
.foot-brand .logo span{font-weight:900;font-size:1.8rem}
.foot-brand img{width:3rem;height:3rem;background:#fff;border-radius:.9rem;padding:.2rem}
.footer p{color:#c7d2fe;font-weight:500;line-height:1.6}
.footer h4{font-weight:900;font-size:1.2rem;margin:0 0 1.5rem}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}
.footer ul button,.footer li{color:#c7d2fe;font-weight:700;background:none;border:0;text-align:left;cursor:pointer;padding:0}
.footer ul button:hover{color:var(--yellow)}
.foot-cities{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:#c7d2fe;font-weight:800}
.foot-cities button{background:none;border:0;color:inherit;cursor:pointer}.foot-cities button:hover{color:var(--yellow)}
.foot-cities span{color:#4338ca}
.socials{display:flex;gap:.75rem;margin-top:1.4rem}
.socials a{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
.socials a:hover{background:var(--yellow);color:var(--navy)}
.foot-bottom{position:relative;z-index:10;border-top:2px solid rgba(49,46,129,.5);padding-top:2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;color:#818cf8;font-weight:700;font-size:.9rem}

/* ---------- Popup flaque ---------- */
.puddle-modal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:1rem}
.puddle-modal .backdrop{position:absolute;inset:0;background:rgba(30,27,75,.5);backdrop-filter:blur(4px)}
.puddle{position:relative;background:#fff;padding:2.5rem;max-width:26rem;text-align:center;box-shadow:var(--shadow-lg);
  border-radius:60% 40% 30% 70%/60% 30% 70% 40%;animation:puddle 6s ease-in-out infinite alternate}
@keyframes puddle{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:40% 60% 55% 45%/45% 55% 45% 55%}100%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
.puddle .ic{width:4rem;height:4rem;border-radius:50%;background:#e0e7ff;color:var(--indigo2);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 1rem}
.puddle h4{color:var(--navy);font-weight:900;font-size:1.5rem;margin:0 0 .8rem}
.puddle p{color:#475569;font-weight:800;margin:0 0 1.6rem}
.puddle .x{position:absolute;top:1.4rem;right:1.4rem;background:#f1f5f9;border:0;border-radius:50%;width:2.2rem;height:2.2rem;cursor:pointer;color:#94a3b8}

/* ============================================================
   GÉNÉRATEUR DE DEVIS (funnel)
   ============================================================ */
.od-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:1rem .5rem;overflow-y:auto}
.od-panel{margin:auto}
.od-backdrop{position:absolute;inset:0;background:rgba(30,27,75,.8);backdrop-filter:blur(8px)}
.od-panel{position:relative;background:var(--paper);width:100%;max-width:56rem;max-height:95vh;overflow-y:auto;border-radius:var(--r2);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:od-in .4s cubic-bezier(.16,1,.3,1)}
@keyframes od-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.od-head{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;z-index:5}
.od-back,.od-close{background:#f1f5f9;border:0;cursor:pointer;color:#475569;font-weight:800;font-family:inherit;border-radius:999px;padding:.5rem .9rem;display:inline-flex;gap:.4rem;align-items:center}
.od-close{width:2.4rem;height:2.4rem;justify-content:center;padding:0}
.od-progress span{background:#e0e7ff;color:var(--indigo);font-weight:900;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:.4rem .9rem;border-radius:999px}
.od-body{padding:2rem 1.5rem 2.5rem}
@media(min-width:640px){.od-body{padding:2.5rem}}
.od-step-in{animation:od-fade .45s ease}
@keyframes od-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.od-title{font-size:1.7rem;font-weight:900;color:var(--navy);text-align:center;margin:0 0 .4rem}
.od-sub{color:#64748b;text-align:center;font-weight:600;max-width:32rem;margin:0 auto 2rem}
.od-narrow{max-width:30rem;margin:0 auto}
.od-crumb{text-align:center;color:var(--indigo2);font-weight:900;margin-bottom:.4rem}

.od-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.od-grid .od-card{flex:0 1 calc(33.333% - .667rem)}
@media(max-width:640px){.od-grid .od-card{flex-basis:calc(50% - .5rem)}}
.od-card{position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--r2);padding:1.5rem 1rem;text-align:center;
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.od-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--indigo2)}
.od-card.is-added{opacity:.6;cursor:not-allowed;border-color:#e2e8f0;background:#f1f5f9}
.od-card-ico{width:3.5rem;height:3.5rem;border-radius:1rem;background:#eef2ff;color:var(--indigo2);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.od-card.is-added .od-card-ico{background:#dcfce7;color:#16a34a}
.od-card-name{font-weight:900;color:var(--navy)}
.od-card-desc{font-size:.82rem;color:#94a3b8;font-weight:700}
.od-badge{position:absolute;top:.6rem;right:.6rem;background:#22c55e;color:#fff;font-size:.65rem;font-weight:900;padding:.25rem .6rem;border-radius:999px}

.od-cart{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.4rem;box-shadow:var(--shadow)}
.od-cart h4{margin:0 0 .8rem;color:var(--navy);font-weight:900;display:flex;gap:.5rem;align-items:center}
.od-cart-row{display:flex;justify-content:space-between;align-items:center;background:#eef2ff;border-radius:999px;padding:.5rem .5rem .5rem 1rem;margin-bottom:.5rem;font-weight:800;color:var(--indigo)}
.od-cart-row small{color:#94a3b8;font-weight:700}
.od-cart-row button{background:none;border:0;color:#a5b4fc;cursor:pointer;padding:.3rem .6rem}
.od-cart-total{display:flex;justify-content:space-between;font-weight:800;color:#334155;margin:.8rem 0}
.od-cart-total strong{color:var(--navy)}

.od-qwrap{display:flex;flex-direction:column;gap:1.4rem;margin-bottom:1.8rem}
.od-qblock{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.od-qtitle{margin:0 0 1rem;color:var(--navy);font-weight:900;font-size:1.1rem}
.od-qtitle small{color:#94a3b8;font-weight:700;font-size:.8rem}
.od-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
@media(max-width:520px){.od-choices .od-choice{flex-basis:100%}}
.od-choice{position:relative;display:flex;align-items:center;gap:.7rem;text-align:left;background:#fff;border:2px solid var(--line);
  border-radius:var(--r);padding:.9rem 1rem;cursor:pointer;font-family:inherit;font-weight:800;color:#334155;transition:border-color .2s,background .2s,transform .1s}
.od-choice:hover{border-color:#c7d2fe}
.od-choice-check{width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;flex-shrink:0;transition:.2s;transform:scale(.8)}
.od-choice-check i{opacity:0;transform:scale(0);transition:.2s}
.od-choice.selected{border-color:var(--indigo2);background:#eef2ff;color:var(--indigo)}
.od-choice.selected .od-choice-check{background:var(--indigo2);border-color:var(--indigo2);transform:scale(1)}
.od-choice.selected .od-choice-check i{opacity:1;transform:scale(1)}
.od-choice.pop{animation:pop .28s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}

.od-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;font-family:inherit;font-weight:900;
  padding:1rem 1.6rem;border-radius:999px;font-size:1rem;transition:transform .2s,background .2s}
.od-btn:hover{transform:translateY(-2px)}
.od-btn-primary{background:var(--navy);color:var(--yellow)}
.od-btn-yellow{background:var(--yellow);color:var(--navy)}
.od-full{width:100%}
.od-btn.is-disabled,.od-btn:disabled{background:#e2e8f0;color:#94a3b8;cursor:not-allowed;transform:none}

.od-form label{display:block;font-weight:800;color:#334155;margin-bottom:1rem;font-size:.9rem}
.od-form input{width:100%;margin-top:.35rem;padding:.9rem 1rem;border-radius:var(--r);border:2px solid var(--line);background:#fff;font-family:inherit;font-weight:800;color:var(--navy)}
.od-form input:focus{outline:none;border-color:var(--indigo2)}
.od-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.od-2col{grid-template-columns:1fr}}
.od-err{color:#dc2626;font-weight:800;background:#fef2f2;padding:.7rem 1rem;border-radius:.8rem;margin:0 0 1rem}
.od-fineprint{text-align:center;color:#94a3b8;font-size:.8rem;font-weight:700;margin-top:1rem}
.od-send-loading{display:inline-flex;gap:.5rem;align-items:center}

.od-success{text-align:center}
.od-succ-badge{width:6rem;height:6rem;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 1.5rem;box-shadow:0 0 40px rgba(34,197,94,.4)}
.od-succ-card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.6rem;text-align:left;box-shadow:var(--shadow);margin:1.5rem 0}
.od-succ-card h4{margin:0 0 1rem;color:var(--navy);font-weight:900}
.od-succ-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.od-succ-svc{font-weight:900;color:var(--navy);display:flex;gap:.5rem;align-items:center}
.od-succ-svc i{color:#22c55e}
.od-succ-list ul{margin:.3rem 0 0 1.8rem;padding:0;color:#475569;font-weight:600}
.od-succ-total{margin-top:1rem;text-align:right;font-weight:800;color:#334155}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .about-visual img{animation:none}
  .about-visual picture img{animation:none}
}

/* ============================================================
   Composants multi-pages (avis Google, blog, médiathèque, prose)
   ============================================================ */
.nav-links a.active{color:var(--indigo2)}

/* Avis Google */
.greviews{max-width:1000px;margin:0 auto}
.greviews-head{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.5rem 2rem;box-shadow:var(--shadow)}
.g-logo{font-size:1.8rem;font-weight:900;letter-spacing:-.03em}
.g-score{display:flex;flex-direction:column;align-items:center}
.g-score strong{font-size:2rem;color:var(--navy);line-height:1}
.g-score .stars{color:#fbbc05}
.g-score small{color:#64748b;font-weight:700}
.greview{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.5rem;box-shadow:var(--shadow)}
.greview-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.g-avatar{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--indigo2);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.greview-top strong{display:block;color:var(--navy)}.greview-top small{color:#94a3b8;font-weight:700}
.greview-top .g-mark{margin-left:auto}
.greview .stars{color:#fbbc05;margin-bottom:.6rem}
.greview p{color:#475569;font-weight:600;margin:0;line-height:1.6}

/* Blog */
.blog-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;text-decoration:none}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.blog-cover{aspect-ratio:16/9;background:#e2e8f0 center/cover}
.blog-body{padding:1.6rem}
.blog-body small{color:var(--indigo2);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.blog-body h3{color:var(--navy);font-weight:900;font-size:1.3rem;margin:.4rem 0 .6rem;line-height:1.25}
.blog-body p{color:#475569;font-weight:500;margin:0 0 1rem}

/* Prose (article / page) */
.prose{color:#334155;font-size:1.12rem;line-height:1.8;font-weight:500}
.prose h2{color:var(--navy);font-weight:900;font-size:1.6rem;margin:2rem 0 .8rem}
.prose h3{color:var(--navy);font-weight:900;font-size:1.3rem;margin:1.6rem 0 .6rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.1rem 1.4rem}
.prose img{border-radius:var(--r);margin:1rem 0}
.prose a{color:var(--indigo2);font-weight:800}

/* Médiathèque */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.media-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.media-grid{grid-template-columns:1fr}}
.media-item{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;text-align:left;font-family:inherit;padding:0;text-decoration:none;transition:transform .3s,box-shadow .3s}
.media-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.media-frame{aspect-ratio:16/10;background:#0f172a center/cover;position:relative;display:flex;align-items:center;justify-content:center}
.media-frame iframe,.media-frame video{width:100%;height:100%;border:0;object-fit:cover}
.media-frame.pdf{background:linear-gradient(135deg,#312e81,#1e1b4b);color:#fff;font-size:3rem}
.media-cap{display:block;padding:.9rem 1.2rem;color:var(--navy);font-weight:800;font-size:.9rem}
.media-cap em{color:var(--indigo2);font-style:normal;float:right}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,9,30,.92);display:flex;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.lb-close{position:absolute;top:1.5rem;right:2rem;color:#fff;font-size:2.5rem;cursor:pointer;line-height:1}

/* Confettis (fin de devis) */
.confetti-piece{position:fixed;top:-10px;width:10px;height:14px;z-index:9998;pointer-events:none;will-change:transform,opacity;animation:confetti-fall linear forwards}
@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* ===== Effet de clic + gouttelettes renforcés ===== */
.ripple-set .rp{width:1.6rem;height:1.6rem}
.rp1{border-width:4px;border-color:rgba(34,211,238,.9)}
.rp2{border-width:3px;border-color:rgba(99,102,241,.7)}
.rp3{border-width:2px;border-color:rgba(250,204,21,.6)}
/* petite goutte projetée au clic */
.splash-drop{position:fixed;width:12px;height:12px;border-radius:50% 50% 55% 55%/45% 45% 60% 60%;
  background:radial-gradient(circle at 35% 30%,#fff,#67e8f9);box-shadow:0 2px 8px rgba(34,211,238,.5);z-index:9999;pointer-events:none;
  animation:splash-fly .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes splash-fly{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.9);opacity:0}}
/* gouttelettes du hero plus visibles */
.jd{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(186,230,253,.5));box-shadow:0 0 8px rgba(255,255,255,.4)}

/* Lien admin dans l'en-tête */
.admin-link{width:2.6rem;height:2.6rem;border-radius:50%;background:#eef2ff;color:var(--indigo);display:inline-flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none}
.admin-link:hover{background:var(--indigo);color:#fff}

/* ===== Gouttelettes ambiantes qui coulent sur l'écran ===== */
#screen-splashes{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.screen-drip{position:absolute;width:14px;height:14px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(186,230,253,.4));
  border-radius:50% 50% 55% 55%/45% 45% 60% 60%;box-shadow:0 2px 8px rgba(34,211,238,.35);opacity:0;
  animation:drip-drop ease-in-out infinite}
@keyframes drip-drop{
  0%{transform:translateY(0) scale(1.4);opacity:0}
  10%{transform:translateY(0) scale(1);opacity:.9}
  80%{opacity:.5}
  100%{transform:translateY(340px) scaleY(1.5);opacity:0}}

/* ===== Bouton devis flottant (mobile) + en-tête mobile ===== */
.devis-fab{position:fixed;right:1rem;bottom:1rem;z-index:140;display:none;align-items:center;gap:.5rem;
  background:var(--yellow);color:var(--navy);border:0;font-family:inherit;font-weight:900;font-size:1rem;
  padding:.95rem 1.3rem;border-radius:999px;box-shadow:0 12px 30px rgba(250,204,21,.55);cursor:pointer;animation:fab-in .4s ease}
.devis-fab i{font-size:1.1rem}
@keyframes fab-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1024px){
  .devis-fab{display:inline-flex}
  .pill-nav .nav-right > .btn-yellow{display:none}   /* on retire le bouton devis de l'en-tête mobile */
  .pill-nav{padding:.55rem 1rem}
  .brand span{font-size:1.25rem}
}

/* ===== Réordonnancement dans l'admin ===== */
.adm-move{display:inline-flex;gap:.3rem;align-items:center}
.adm-mini2{background:#eef2ff;color:var(--indigo);border:0;border-radius:.5rem;width:1.8rem;height:1.8rem;cursor:pointer;font-size:.7rem;line-height:1}
.adm-mini2:hover{background:#e0e7ff}

/* ===== Modale devis : centrage propre =====
   La règle "justify-items:center" seule faisait rétrécir chaque carte/choix à la
   largeur de son texte, donc chaque bouton flottait à une position différente
   dans sa cellule de grille au lieu de former une grille alignée. Le bouton doit
   remplir sa cellule (width:100%) ; c'est SON CONTENU (icône + texte) qui est
   centré à l'intérieur, pas le bouton qui flotte dans un espace trop grand. */
.od-body,.od-step-in{text-align:center}
.od-title{text-align:center}
.od-sub{text-align:center;margin-left:auto;margin-right:auto;max-width:34rem}
.od-crumb{text-align:center}
.od-qtitle{text-align:center}
/* .od-card sizing is now handled by flex-basis on .od-grid .od-card (voir plus haut) */
.od-choice{flex:0 1 calc(50% - .35rem);justify-content:center}
.od-succ-card{text-align:left;max-width:26rem;margin-left:auto;margin-right:auto}
.od-form{max-width:26rem;margin-left:auto;margin-right:auto}

/* ===== Témoignage vidéo + lecteur ===== */
.tmoni-media.as-video{cursor:pointer;border:0;width:100%;padding:0;font:inherit;position:relative}
.tmoni-media .fa-circle-play,.tmoni-media.as-video i{font-size:3.5rem;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:transform .2s}
.tmoni-media.as-video:hover i{transform:scale(1.12)}
.tmoni-media.no-play{pointer-events:none}
#video-modal .video-wrap{width:min(92vw,960px);aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
#video-modal .video-wrap iframe,#video-modal .video-wrap video{width:100%;height:100%;border:0;display:block}

/* ===== Centrage boutons pleine largeur ===== */
.btn{justify-content:center}

/* ===== Carte contact ===== */
.contact-map iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r2);box-shadow:var(--shadow)}

/* ===== Plan du site ===== */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:2rem}
.plan-col h3{color:var(--navy);font-weight:900;margin:0 0 .8rem;font-size:1.1rem}
.plan-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.plan-col a{color:#475569;font-weight:700;text-decoration:none}
.plan-col a:hover{color:var(--indigo2)}

/* ===== Admin : onglets média par type, upload, tableau de bord, stats, demandes ===== */
.adm-subtabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.adm-subtabs button{background:#eef2ff;color:var(--indigo);border:0;border-radius:.6rem;padding:.5rem 1rem;font-weight:800;cursor:pointer;font-family:inherit}
.adm-subtabs button.active{background:var(--indigo);color:#fff}
.adm-upload{display:inline-flex;align-items:center;gap:.5rem;background:#f1f5f9;border:1px dashed #94a3b8;border-radius:.6rem;padding:.5rem .9rem;cursor:pointer;font-weight:700;color:#334155;font-size:.85rem}
.adm-upload input{display:none}
.adm-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.adm-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.adm-stat .n{font-size:2rem;font-weight:900;color:var(--navy);line-height:1}
.adm-stat .l{color:#64748b;font-weight:700;font-size:.82rem;margin-top:.3rem}
.adm-quick{display:flex;gap:.6rem;flex-wrap:wrap}
.adm-quick button{background:var(--navy);color:#fff;border:0;border-radius:.6rem;padding:.7rem 1rem;font-weight:800;cursor:pointer;font-family:inherit;font-size:.85rem}
.lead-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;background:#fff}
.lead-open{font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:999px}
.lead-open.yes{background:#dcfce7;color:#15803d}
.lead-open.no{background:#fef9c3;color:#a16207}
.lead-actions{display:flex;gap:.4rem}
.lead-actions button{font-size:.78rem;padding:.4rem .7rem;border-radius:.5rem;border:0;cursor:pointer;font-weight:800;font-family:inherit}
.bar-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.bar-row .lab{width:190px;font-weight:700;color:#334155;font-size:.85rem;text-align:right}
.bar-row .bar{height:16px;background:var(--indigo2);border-radius:8px;min-width:2px}
.bar-row .val{font-weight:800;color:var(--navy)}

/* ===== Admin : layout menu latéral ===== */
.adm-wrap{display:flex;align-items:flex-start;max-width:1240px;margin:0 auto}
.adm-side{width:236px;flex-shrink:0;padding:1.2rem .8rem;position:sticky;top:0;align-self:flex-start}
.adm-sgroup{margin-bottom:1.1rem}
.adm-slabel{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#94a3b8;font-weight:800;padding:.3rem .6rem;margin-bottom:.2rem}
.adm-side button{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;background:none;border:0;padding:.6rem .8rem;border-radius:.6rem;font-weight:700;color:#334155;cursor:pointer;font-family:inherit;font-size:.9rem}
.adm-side button i{width:1.15rem;text-align:center;color:#94a3b8}
.adm-side button:hover{background:#f1f5f9}
.adm-side button.active{background:var(--indigo);color:#fff}
.adm-side button.active i{color:#fff}
.adm-wrap .adm-main{flex:1;min-width:0;padding:1.5rem}
@media(max-width:820px){
  .adm-wrap{flex-direction:column}
  .adm-side{width:100%;display:flex;flex-wrap:wrap;gap:.3rem;position:static;padding:.8rem}
  .adm-sgroup{margin:0}
  .adm-slabel{width:100%}
  .adm-side button{width:auto}
}

/* ===== Statut des demandes (admin) ===== */
.lead-badge{display:inline-block;font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;margin-top:.3rem}
.lead-badge.st-sent{background:#e2e8f0;color:#475569}
.lead-badge.st-open{background:#fef9c3;color:#a16207}
.lead-badge.st-acc{background:#dcfce7;color:#15803d}
.lead-badge.st-ref{background:#fee2e2;color:#b91c1c}

/* ===== FAQ (accordéon) ===== */
.faq-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.8rem;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.4rem;background:none;border:0;font-family:inherit;font-weight:800;color:var(--navy);font-size:1.05rem;cursor:pointer;text-align:left}
.faq-q i{transition:transform .3s;color:var(--indigo2)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:600px}
.faq-a p{padding:0 1.4rem 1.3rem;color:#475569;line-height:1.7;margin:0;font-weight:500}

/* ===== Section contact — refonte ===== */
.contact-wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:2rem;align-items:start}
@media(max-width:820px){.contact-wrap{grid-template-columns:1fr}}
.contact-info{display:grid;gap:1rem;align-content:start}
.info-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.info-card .ic{width:2.9rem;height:2.9rem;flex-shrink:0;border-radius:14px;background:linear-gradient(135deg,var(--indigo2),var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.info-card h3{margin:0 0 .2rem;color:var(--navy);font-size:.95rem;font-weight:900}
.info-card p{margin:0;color:#475569;font-weight:600;font-size:.92rem}
.info-card a{color:var(--indigo2);text-decoration:none;font-weight:800}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:2rem;box-shadow:var(--shadow-lg)}
.contact-info .socials{display:flex;gap:.6rem;margin-top:.2rem}
.contact-info .socials a{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--paper);color:var(--indigo2);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:.2s;font-size:1rem}
.contact-info .socials a:hover{background:var(--indigo);color:#fff;transform:translateY(-3px)}

/* ===== Pages longues : listes riches + process numéroté ===== */
.rich-list{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:grid;gap:.8rem}
.rich-list li{display:flex;gap:.8rem;align-items:flex-start;font-weight:600;color:#334155;font-size:1.05rem;line-height:1.6}
.rich-list li i{color:#22c55e;margin-top:.28rem;flex-shrink:0}
.process .step .ic span{font-size:1.3rem}
.faq-sec .faq-q{font-size:1rem}

/* ===== Section méthode (icônes + vagues animées) ===== */
.method-sec{background:linear-gradient(180deg,#1e1b4b,#0f091e);color:#fff;position:relative;padding:6rem 1rem}
.method-sec .h-sec{color:#fff}
.method-wave-top,.method-wave-bot{position:absolute;left:0;width:100%;height:60px;background-repeat:repeat-x;background-size:1200px 60px;opacity:.5}
.method-wave-top{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,0 L0,0 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");animation:mwave 12s linear infinite}
.method-wave-bot{bottom:-1px;transform:rotate(180deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,0 L0,0 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");animation:mwave 16s linear infinite reverse}
@keyframes mwave{from{background-position-x:0}to{background-position-x:1200px}}
.method-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:3rem}
@media(max-width:960px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.method-grid{grid-template-columns:1fr}}
.method-step{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r2);padding:2rem 1.2rem 1.5rem;text-align:center;transition:transform .3s,background .3s}
.method-step:hover{transform:translateY(-8px);background:rgba(255,255,255,.1)}
.method-num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:var(--yellow);color:var(--navy);font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(250,204,21,.4)}
.method-ic{width:3.4rem;height:3.4rem;margin:.6rem auto 1rem;border-radius:16px;background:linear-gradient(135deg,var(--indigo2),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff}
.method-step h3{color:#fff;font-weight:900;font-size:1.05rem;margin:0 0 .5rem}
.method-step p{color:#c7d2fe;font-weight:500;font-size:.9rem;line-height:1.55;margin:0}

/* ===== Bannière mentions légales ===== */
.consent-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:300;background:#1e1b4b;color:#fff;border-radius:var(--r2);box-shadow:0 20px 50px rgba(0,0,0,.4);padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:center;animation:fab-in .5s ease}
.consent-bar p{margin:0;font-weight:600;font-size:.9rem;flex:1;min-width:220px}
.consent-bar a{color:var(--yellow);font-weight:800}
.consent-bar .btn{white-space:nowrap}

/* ===== Modale projet (réalisations) ===== */
.folio.as-btn{border:0;background:none;font-family:inherit;text-align:left;cursor:pointer;padding:0;width:100%}
.proj-panel{max-width:640px;padding:0;position:relative}
.proj-img{width:100%;aspect-ratio:16/9;background:#0f172a center/contain no-repeat;border-radius:var(--r2) var(--r2) 0 0}
.proj-panel .od-x{position:absolute;top:1rem;right:1rem;z-index:5;width:2.4rem;height:2.4rem;border-radius:999px;
  background:rgba(15,23,42,.55);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;backdrop-filter:blur(4px)}
.proj-panel .od-x:hover{background:rgba(15,23,42,.8)}
.proj-txt{padding:2rem}
.proj-txt h3{color:var(--navy);font-weight:900;font-size:1.6rem;margin:.3rem 0 1rem}
.proj-txt p{color:#475569;line-height:1.7;font-weight:500;margin:0 0 1.5rem}

/* ===== Process (méthode) sur les pages villes/secteurs ===== */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:step}
@media(max-width:960px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process{grid-template-columns:1fr}}
.process .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:2rem 1.1rem 1.4rem;text-align:center;box-shadow:var(--shadow);transition:transform .3s}
.process .step:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.process .step .ic{width:3rem;height:3rem;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(135deg,var(--indigo2),var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 8px 20px rgba(99,102,241,.35)}
.process .step h3{color:var(--navy);font-weight:900;font-size:1.05rem;margin:0 0 .5rem}
.process .step p{color:#475569;font-weight:500;font-size:.9rem;line-height:1.55;margin:0}

/* ===== Miniature vidéo témoignage (style YouTube) ===== */
.tmoni-media.as-video{position:relative;overflow:hidden;background:#0f172a}
.tmoni-thumb{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.tmoni-media.as-video .tmoni-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:44px;border-radius:12px;background:rgba(220,38,38,.92);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .2s,background .2s;z-index:2}
.tmoni-media.as-video:hover .tmoni-play{transform:translate(-50%,-50%) scale(1.12);background:#dc2626}
.tmoni-media.as-video .tmoni-play i{margin-left:3px}

/* ===== Logo : proportions conservées (plus d'étirement) ===== */
.brand img{width:auto !important;height:2.4rem !important;max-width:190px;object-fit:contain}
.foot-brand .logo img,.footer .logo img{width:auto !important;height:2.6rem !important;max-width:200px;object-fit:contain}
@media(max-width:768px){.brand img{height:2rem !important}}


/* ===== Tableau journal de sécurité ===== */
.adm-table{width:100%;border-collapse:collapse;font-size:.85rem}
.adm-table th{text-align:left;color:#64748b;font-weight:800;padding:.5rem .6rem;border-bottom:2px solid var(--line)}
.adm-table td{padding:.5rem .6rem;border-bottom:1px solid var(--line);color:#334155}
.adm-table tr:hover td{background:#f8fafc}

/* ===== Cartes sous-services (pages service) ===== */
.sub-card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:1.8rem 1.5rem;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.sub-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sub-ico{width:3rem;height:3rem;border-radius:14px;background:linear-gradient(135deg,var(--indigo2),var(--cyan));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:1rem}
.sub-card h3{color:var(--navy);font-weight:900;font-size:1.1rem;margin:0 0 .5rem}
.sub-card p{color:#475569;font-weight:500;font-size:.92rem;line-height:1.55;margin:0}

/* Sécurité : aucune bande de vagues fixée en haut de l'écran (les vagues restent uniquement en haut du footer) */
#top-waves{display:none !important}

/* Touche de jaune dans les vagues du footer (uniquement le footer) */
.footer-waves .wave-med path{fill:#facc15 !important;fill-opacity:.45 !important}

/* Statuts de réponse client (rappel / réflexion) */
.lead-badge.st-call{background:#cffafe;color:#0e7490}
.lead-badge.st-think{background:#fef3c7;color:#92400e}