/* Dekko · site public */
:root{
  --bleu:#2743E3; --bleu-fonce:#1A2FA8; --bleu-doux:#E4EAFF;
  --or:#FFC533; --or-doux:#FFF3CC; --rouge:#E5383B;
  --encre:#0B1020; --texte:#2B3142; --gris:#5A6072; --ligne:#E3E6EE; --fond:#F4F6FA; --blanc:#fff;
  --titre:'Bricolage Grotesque',system-ui,sans-serif; --corps:'Figtree',system-ui,sans-serif;
  --r:28px; --large:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--corps);font-size:18px;line-height:1.6;color:var(--texte);background:var(--blanc)}
img,video{display:block;max-width:100%}
a{color:var(--bleu)}
a:hover{color:var(--bleu-fonce)}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);color:var(--encre);letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.large{width:min(var(--large),100% - 48px);margin-inline:auto}

/* en-tête */
.entete{position:fixed;inset:0 0 auto;z-index:20;transition:background .25s,box-shadow .25s}
.entete .large{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.entete.plein{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ligne)}
.marque{font-family:var(--titre);font-weight:800;font-size:32px;letter-spacing:-.05em;color:var(--blanc);text-decoration:none;line-height:1}
.marque span{color:var(--or)}
.entete.plein .marque,.entete.clair .marque{color:var(--bleu)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:rgba(255,255,255,.9);text-decoration:none;font-weight:600;font-size:16px}
.entete.plein .nav a,.entete.clair .nav a{color:var(--texte)}
.nav a.bouton{color:var(--encre)}
@media (max-width:820px){.nav a:not(.bouton){display:none}}

/* boutons */
.bouton{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--or);color:var(--encre);font-weight:700;font-size:16.5px;text-decoration:none;border:0;cursor:pointer;font-family:var(--corps)}
.bouton:hover{background:#ffd35e;color:var(--encre)}
.bouton.sombre{background:var(--encre);color:var(--blanc)}
.bouton.sombre:hover{background:#252b3d;color:var(--blanc)}
.bouton.blanc{background:var(--blanc);color:var(--bleu)}
.bouton svg{width:22px;height:22px;flex:none}
.magasins{display:flex;flex-wrap:wrap;gap:12px}

/* ouverture */
.ouverture{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--blanc);overflow:hidden;background:var(--encre)}
.ouverture video,.ouverture .affiche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,32,.55) 0%,rgba(11,16,32,0) 22%,rgba(11,16,32,0) 42%,rgba(11,16,32,.86) 100%)}
@media (min-width:821px){.ouverture::after{background:linear-gradient(180deg,rgba(11,16,32,.5) 0%,rgba(11,16,32,0) 20%),linear-gradient(90deg,rgba(11,16,32,.82) 0%,rgba(11,16,32,.55) 38%,rgba(11,16,32,0) 62%)}}
.ouverture .large{position:relative;z-index:1;padding:0 0 clamp(48px,8vh,96px)}
.ouverture h1{color:var(--blanc);font-size:clamp(52px,9vw,128px);font-weight:800;max-width:11ch}
.ouverture h1 em{font-style:normal;color:var(--or)}
.ouverture p{font-size:clamp(18px,2vw,22px);max-width:34ch;margin:20px 0 30px;color:rgba(255,255,255,.88)}
.pause{position:absolute;right:24px;bottom:24px;z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:var(--blanc);cursor:pointer;display:grid;place-items:center}
.pause svg{width:20px;height:20px}

/* sections */
section{padding:clamp(80px,11vw,140px) 0}
.chapeau{max-width:640px}
.chapeau h2{font-size:clamp(38px,5.2vw,64px);font-weight:800}
.chapeau p{font-size:20px;color:var(--gris);margin-top:18px}

/* le parcours */
.parcours ol{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:e}
.parcours li{counter-increment:e;border-top:3px solid var(--encre);padding-top:20px}
.parcours li::before{content:counter(e);display:block;font-family:var(--titre);font-weight:800;font-size:56px;line-height:1;color:var(--bleu);margin-bottom:14px}
.parcours h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.parcours li p{color:var(--gris);font-size:16.5px;margin-top:8px}
.parcours figure{margin:64px 0 0;border-radius:var(--r);overflow:hidden;aspect-ratio:21/9}
.parcours figure img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media (max-width:900px){.parcours ol{grid-template-columns:1fr 1fr}.parcours figure{aspect-ratio:4/3}}
@media (max-width:520px){.parcours ol{grid-template-columns:1fr}}

/* fonctions */
.fonctions{background:var(--fond)}
.fonction{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(64px,9vw,120px)}
.fonction:nth-child(odd) .telephone{order:-1}
.fonction h3{font-size:clamp(32px,3.6vw,46px);font-weight:800}
.fonction p{font-size:19px;color:var(--gris);margin-top:16px;max-width:30em}
.fonction ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.fonction li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.fonction li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--bleu);margin-top:10px}
.fonction.urgence li::before{background:var(--rouge)}
.telephone{justify-self:center;width:min(340px,80vw);border:10px solid var(--encre);border-radius:52px;overflow:hidden;background:var(--blanc);box-shadow:0 40px 80px -30px rgba(11,16,32,.45)}
.telephone img{width:100%;aspect-ratio:660/1434;object-fit:cover;object-position:top}
@media (max-width:820px){.fonction{grid-template-columns:1fr}.fonction .telephone{order:2!important}}

/* scènes */
.scenes{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:56px}
.scenes figure{margin:0;border-radius:var(--r);overflow:hidden;position:relative;min-height:320px}
.scenes img{width:100%;height:100%;object-fit:cover}
.scenes figcaption{position:absolute;left:20px;bottom:20px;right:20px;color:var(--blanc);font-weight:700;font-size:18px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.scenes .pile{display:grid;gap:20px}
@media (max-width:820px){.scenes{grid-template-columns:1fr}}

/* communes */
.communes .boite{margin-top:40px;max-width:640px}
.communes label{display:block;font-weight:700;color:var(--encre);margin-bottom:10px}
.communes input{width:100%;height:60px;border-radius:18px;border:2px solid var(--ligne);padding:0 20px;font:inherit;font-size:18px;color:var(--encre);background:var(--blanc)}
.communes input:focus{border-color:var(--bleu);outline:0}
.resultats{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.resultats li{background:var(--fond);border-radius:16px;padding:14px 18px}
.resultats b{color:var(--encre);font-weight:700}
.resultats span{color:var(--gris);font-size:15px;display:block}
.compte{font-family:var(--titre);font-weight:800;font-size:clamp(80px,14vw,180px);line-height:.9;color:var(--bleu);letter-spacing:-.05em}

/* mairies */
.mairies{background:var(--bleu);color:rgba(255,255,255,.9)}
.mairies h2,.mairies h3{color:var(--blanc)}
.mairies .grille{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.mairies dl{margin:0;display:grid;gap:22px}
.mairies dt{font-family:var(--titre);font-weight:700;font-size:22px;color:var(--blanc);letter-spacing:-.02em}
.mairies dd{margin:4px 0 0;font-size:17px}
.mairies .contact{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mairies .contact small{display:block;width:100%;color:rgba(255,255,255,.75);font-size:15px}
.mairies figure{margin:0;border-radius:var(--r);overflow:hidden}
@media (max-width:860px){.mairies .grille{grid-template-columns:1fr}}

/* questions */
.questions details{border-top:1px solid var(--ligne);padding:22px 0}
.questions details:last-child{border-bottom:1px solid var(--ligne)}
.questions summary{cursor:pointer;font-family:var(--titre);font-weight:700;font-size:22px;color:var(--encre);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";font-size:28px;line-height:1;color:var(--bleu)}
.questions details[open] summary::after{content:"−"}
.questions details p{margin-top:12px;color:var(--gris);max-width:62ch}
.questions .liste{max-width:820px;margin-top:40px}

/* fin */
.final{background:var(--encre);color:rgba(255,255,255,.85);text-align:center}
.final h2{color:var(--blanc);font-size:clamp(44px,7vw,96px);font-weight:800}
.final p{font-size:20px;margin:18px auto 34px;max-width:36ch}
.final .magasins{justify-content:center}
.pied{background:var(--encre);color:rgba(255,255,255,.65);font-size:15px;padding:40px 0 48px;border-top:1px solid rgba(255,255,255,.1)}
.pied .large{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.pied a{color:rgba(255,255,255,.85);text-decoration:none}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied nav{display:flex;flex-wrap:wrap;gap:22px}

/* pages de texte */
.texte{padding:150px 0 100px}
.texte .large{max-width:780px}
.texte h1{font-size:clamp(40px,6vw,64px);font-weight:800}
.texte .date{color:var(--gris);margin-top:14px}
.texte h2{font-size:28px;margin:48px 0 12px;letter-spacing:-.02em}
.texte p,.texte li{font-size:18px}
.texte p+p{margin-top:14px}
.texte ul,.texte ol{padding-left:22px;margin:12px 0}
.texte li{margin:6px 0}
.texte table{border-collapse:collapse;width:100%;margin:16px 0;font-size:16px}
.texte th,.texte td{border:1px solid var(--ligne);padding:10px 12px;text-align:left;vertical-align:top}
.texte th{background:var(--fond);color:var(--encre)}
.texte .encadre{background:var(--or-doux);border-radius:20px;padding:22px 24px;margin:24px 0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* pied de page en colonnes */
.pied .colonnes{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;align-items:start}
.pied .colonnes p{margin-top:12px;line-height:1.5}
.pied .marque{color:var(--blanc);font-size:30px}
.pied nav{display:flex;flex-direction:column;gap:10px}
.pied h2{font-family:var(--corps);font-size:14px;font-weight:700;color:var(--blanc);letter-spacing:0;margin:0 0 4px}
.pied .bas{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
@media (max-width:900px){.pied .colonnes{grid-template-columns:1fr 1fr}.pied .colonnes>div:first-child{grid-column:1/-1}}
.nav a[aria-current="page"]{color:var(--bleu);text-decoration:underline;text-underline-offset:6px}

/* page mairies */
.bandeau{background:var(--bleu);color:rgba(255,255,255,.9);padding:170px 0 110px}
.bandeau h1{color:var(--blanc);font-size:clamp(46px,7vw,92px);font-weight:800;max-width:14ch}
.bandeau p{font-size:21px;max-width:40ch;margin:22px 0 32px}
.film-mairies{width:100%;aspect-ratio:16/9;border-radius:var(--r);background:var(--encre);margin-top:40px}
.cotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.cotes article{background:var(--fond);border-radius:var(--r);padding:32px}
.cotes h3{font-size:26px;letter-spacing:-.02em}
.cotes ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.cotes li{display:flex;gap:12px;font-size:17px}
.cotes li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--bleu);margin-top:10px}
.captures{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin-top:24px}
.captures figure{margin:0}
.captures img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:left top;border-radius:20px;border:1px solid var(--ligne)}
.captures figcaption{font-size:15px;color:var(--gris);margin-top:10px}
@media (max-width:820px){.cotes,.captures{grid-template-columns:1fr}}

/* aide */
.questions .groupe{margin-top:48px}
.questions .groupe h2{margin-bottom:8px}

/* contact */
.contact-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;margin-top:40px;align-items:start}
.contact form{display:grid;gap:8px}
.contact label{font-weight:700;color:var(--encre);font-size:16px;margin-top:12px}
.contact input,.contact select,.contact textarea{width:100%;border:2px solid var(--ligne);border-radius:16px;padding:14px 16px;font:inherit;font-size:17px;color:var(--encre);background:var(--blanc)}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--bleu);outline:0}
.contact .deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact .deux label{display:block}
.contact .aide-champ{font-size:15px;color:var(--gris)}
.contact button{margin-top:16px;justify-self:start}
.contact #f-etat{font-weight:600;color:var(--encre);min-height:1.6em}
.contact aside{background:var(--fond);border-radius:var(--r);padding:28px}
.contact aside h2{font-size:22px;margin:22px 0 8px}
.contact aside h2:first-child{margin-top:0}
.contact aside p{font-size:17px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:860px){.contact-grille,.contact .deux{grid-template-columns:1fr}}

/* ouverture en 3D : le défilement fait tourner le téléphone */
.film3d{position:relative;height:620vh;background:radial-gradient(120% 80% at 70% 40%,#E4EAFF 0%,#F4F6FA 55%,#fff 100%)}
.scene3d{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene3d .repli{display:none}
.scene3d.sans3d .repli{display:block;position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);height:min(70svh,640px);width:auto;border-radius:36px;border:10px solid #1F35C4;box-shadow:0 30px 60px -20px rgba(20,30,80,.4)}
.hero3d{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:76px;width:min(var(--large),100% - 48px);margin-inline:auto;pointer-events:none}
.hero3d > *{max-width:560px}
.hero3d h1{font-size:clamp(50px,7vw,104px);font-weight:800}
.hero3d p{font-size:clamp(18px,1.8vw,22px);color:var(--gris);margin:22px 0 30px;max-width:34ch}
.hero3d .magasins{pointer-events:auto}
.leg{position:absolute;top:50%;max-width:min(420px,38vw);opacity:0;visibility:hidden;will-change:opacity,transform}
.leg.gauche{left:max(24px,calc((100vw - var(--large))/2))}
.leg.droite{right:max(24px,calc((100vw - var(--large))/2))}
.leg.haut{top:clamp(96px,14vh,140px);left:50%;transform:translateX(-50%);text-align:center;max-width:640px}
.leg h2{font-size:clamp(36px,4.4vw,60px);font-weight:800}
.leg p{margin-top:16px;font-size:clamp(17px,1.4vw,20px);color:var(--gris)}
.leg p b{color:var(--encre)}
.leg .bouton{margin-top:24px}
.etapes{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
.etapes i{width:6px;height:6px;border-radius:3px;background:#C9D0E2;transition:height .3s,background .3s}
.etapes i.on{height:22px;background:var(--bleu)}
@media (max-width:820px){
  .hero3d{justify-content:flex-start;padding-top:108px}
  .hero3d h1{font-size:46px}.hero3d p{font-size:17px;margin:14px 0 20px}
  .leg,.leg.gauche,.leg.droite{left:20px;right:20px;max-width:none;top:auto;bottom:max(36px,env(safe-area-inset-bottom,0px));transform:none;z-index:2}
  .leg.haut{top:96px;bottom:auto;left:20px;right:20px;max-width:none;transform:none;text-align:center}
  .leg h2{font-size:32px}.leg p{font-size:16px;margin-top:10px}
  .scene3d::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:linear-gradient(transparent,rgba(255,255,255,.95) 45%);pointer-events:none;opacity:var(--voile,0)}
  .etapes{right:8px}
}
.son3d{position:absolute;left:max(24px,calc((100vw - var(--large))/2));bottom:28px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--ligne);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);color:var(--encre);font:600 15px var(--corps);cursor:pointer;box-shadow:0 10px 30px -14px rgba(20,30,80,.35)}
.son3d svg{width:20px;height:20px}
.son3d .ondes{opacity:.25}
.son3d[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.son3d[aria-pressed="true"] .ondes{opacity:1;animation:ondes 1.2s ease-in-out infinite}
@keyframes ondes{50%{opacity:.35}}
@media (max-width:820px){.son3d{left:auto;right:20px;top:88px;bottom:auto;min-height:40px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.etapes i{transition:none}.son3d .ondes{animation:none!important}}