/* ─────────────────────────────────────────────────────────────────────
   Page d'accueil de re.digablo.fr — propre à l'accueil.
   Le socle (couleurs, polices, boutons, pied) vient de digablo.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── HÉROS PLEIN ÉCRAN ────────────────────────────────────────────── */
.heros{position:relative;min-height:100svh;display:flex;align-items:center;
       overflow:hidden;padding:clamp(90px,14vh,150px) 0 clamp(70px,12vh,120px)}
/* Sur tactile, le héros ne prend plus toute la hauteur : le vide entre
   l'en-tête et le badge n'a pas lieu d'être sur un écran qu'on fait défiler.
   Le repère « Faites défiler », ancré en bas du héros, disparaît avec lui —
   sinon il vient chevaucher les boutons. */
@media (hover: none), (max-width: 900px){
  .heros{min-height:auto;align-items:flex-start;
         padding:clamp(26px,4vh,44px) 0 clamp(54px,8vh,86px)}
  .heros .lieu{margin-bottom:clamp(16px,3vh,26px)}
  /* le repère de défilement revient dans le flux, sous les boutons : ancré en
     bas d'un héros devenu court, il chevauchait « Demander un devis ». */
  .heros{flex-direction:column;align-items:stretch}
  .heros .cue{position:static;transform:none;margin:26px auto 0;align-self:center}
  .heros .cue span{height:34px}
  /* Les deux boutons se rangent l'un sous l'autre faute de place : centrés,
     ils tiennent l'axe du texte au lieu de pendre à gauche. */
  .heros .btns{justify-content:center}
}
.heros-fond{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none}
.heros-grille{position:absolute;inset:0;
  background-image:linear-gradient(rgba(74,157,239,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(74,157,239,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 78%)}
.heros-halo{position:absolute;width:min(78vw,900px);aspect-ratio:1;border-radius:50%;
  left:50%;top:8%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(74,157,239,.20),rgba(74,157,239,0) 62%);filter:blur(20px)}
.heros-halo2{position:absolute;width:min(52vw,560px);aspect-ratio:1;border-radius:50%;
  right:-8%;bottom:-14%;
  background:radial-gradient(circle,rgba(240,128,64,.16),rgba(240,128,64,0) 64%);filter:blur(24px)}
.heros .w{position:relative;z-index:2;width:100%}

.heros .lieu{display:inline-flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.2em;
             text-transform:uppercase;color:var(--gris-clair);font-weight:600;margin:0 0 clamp(22px,4vh,38px);
             border:1px solid var(--trait);border-radius:99px;padding:9px 18px;background:rgba(20,25,34,.6)}
.heros .lieu i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--orange);
               box-shadow:0 0 0 0 rgba(240,128,64,.6);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(240,128,64,0)}100%{box-shadow:0 0 0 0 rgba(240,128,64,0)}}

h1.geant{font-size:clamp(38px,8.4vw,104px);line-height:.98;letter-spacing:-.035em;margin:0;
         max-width:14em;font-weight:700}
h1.geant .mot{display:inline-block;overflow:hidden;vertical-align:top}
h1.geant .mot span{display:inline-block;transform:translateY(105%);
                   transition:transform .95s cubic-bezier(.16,.9,.28,1)}
h1.geant.on .mot span{transform:none}
h1.geant em{font-style:normal;color:var(--bleu)}
.heros .sous{font-size:clamp(17px,2.2vw,21px);color:var(--gris-clair);max-width:34em;
             margin:clamp(24px,4vh,38px) 0 0}
.heros .btns{margin-top:clamp(26px,4vh,42px)}

.cue{position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);
     display:flex;flex-direction:column;align-items:center;gap:10px;
     font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.cue span{display:block;width:1px;height:42px;
          background:linear-gradient(var(--bleu),transparent);position:relative}
.cue span::after{content:'';position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;
                 background:var(--bleu);animation:goutte 2.4s ease-in-out infinite}
@keyframes goutte{0%{transform:translateY(0);opacity:1}70%{transform:translateY(36px);opacity:0}100%{opacity:0}}
@media(max-height:640px){.cue{display:none}}

/* ── BANDEAU DÉFILANT ─────────────────────────────────────────────── */
/* Il défile : c'est ce qui donne au visiteur l'étendue du catalogue en un
   coup d'œil, sans lui faire lire une liste. La piste porte deux fois la même
   série et glisse d'exactement la moitié de sa largeur : la boucle est donc
   invisible, et aucun mot ne se coupe au raccord. Le survol l'arrête, pour
   qui veut lire ou sélectionner. */
.defile{border-block:1px solid var(--trait);background:var(--profond);
        overflow:hidden;padding:20px 0}
.defile .piste{display:flex;width:max-content;animation:glisse 30s linear infinite}
.defile span{font-family:var(--titre);font-weight:700;font-size:clamp(17px,3vw,30px);
             letter-spacing:-.01em;padding:0 15px;white-space:nowrap;color:var(--papier)}
.defile span i{font-style:normal;color:var(--orange);margin-left:15px}
@keyframes glisse{to{transform:translateX(-50%)}}
.defile:hover .piste,.defile:focus-within .piste{animation-play-state:paused}

/* ── LA CARTE ─────────────────────────────────────────────────────── */
.carte-sec{position:relative;overflow:hidden}
.carte-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
          grid-template-areas:"txt vis" "liste vis";
          column-gap:clamp(30px,5vw,70px);row-gap:28px;align-items:start}
.carte-in>*{min-width:0}
.carte-txt{grid-area:txt}
.carte-vis{grid-area:vis;align-self:center}
.carte-liste{grid-area:liste}
.carte-liste .villes{margin-top:0}
@media (hover: none), (max-width: 900px){
  .carte-in{grid-template-columns:minmax(0,1fr);
            grid-template-areas:"txt" "vis" "liste";row-gap:26px}
  /* sous la carte, la liste et l'appel se lisent centrés */
  .carte-liste{text-align:center}
  .carte-liste .btns{justify-content:center}
}
.carte-svg{display:block;width:100%;max-width:100%;height:auto;overflow:visible}

/* la mer : une nappe bleue très diffuse, pour que l'île soit posée dans quelque chose */
.carte-svg .mer{fill:url(#mer);opacity:0;transition:opacity 1.2s ease .15s}
.carte-sec.on .carte-svg .mer{opacity:1}

/* l'écume : le tracé flouté sous la terre, qui détache le littoral du fond */
.carte-svg .ecume{fill:var(--bleu);opacity:0;transition:opacity 1.1s ease .45s}
.carte-sec.on .carte-svg .ecume{opacity:.18}

/* la terre : un plateau plein, plus clair que la page, avec un relief de haut en bas */
.carte-svg .terre{fill:url(#terre);opacity:0;transform:scale(.985);transform-origin:center;
                  transform-box:fill-box;
                  transition:opacity .9s ease .5s,transform .9s cubic-bezier(.3,1.2,.4,1) .5s}
.carte-sec.on .carte-svg .terre{opacity:1;transform:none}

/* le littoral : le trait se dessine d'un bout à l'autre de l'île */
.carte-svg .contour{fill:none;stroke:var(--bleu);stroke-width:7;
                    stroke-linejoin:round;stroke-linecap:round;
                    stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
                    transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.carte-sec.on .carte-svg .contour{stroke-dashoffset:0}

.carte-svg .ville{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
                  transition:opacity .5s ease,transform .5s cubic-bezier(.3,1.4,.4,1)}
.carte-sec.on .carte-svg .ville{opacity:1;transform:none}
.carte-svg .pt{fill:var(--bleu);stroke:var(--nuit);stroke-width:3}
.carte-svg .pt-phare{fill:var(--orange);stroke:var(--nuit);stroke-width:3}
.carte-svg .halo{fill:none;stroke:var(--orange);stroke-width:3;opacity:.55}
.carte-svg .tige{stroke:var(--gris);stroke-width:2;opacity:.7}
.carte-svg .anneau{fill:none;stroke:var(--orange);stroke-width:3.5;opacity:0;
                   transition:opacity .25s ease}
.carte-svg .ville.actif .anneau{opacity:.95}
.carte-svg .ville.actif .pt{fill:var(--orange)}
.carte-svg .ville.actif text{fill:#0B0E13;font-weight:700}
.carte-sec.on .carte-svg .halo{animation:onde 2.8s ease-out infinite}
@keyframes onde{0%{r:17;opacity:.6}100%{r:52;opacity:0}}

/* les noms restent lisibles sur la terre comme sur la mer : contour sombre sous le texte */
/* Les noms se posent sur la terre, restée pâle : ils gardent l'encre du site
   clair et leur halo blanc, quelle que soit la couleur de la section. */
.carte-svg text{fill:#0F1620;font-family:'Inter',sans-serif;font-size:30px;font-weight:500;
                paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:6px;stroke-linejoin:round}
.carte-svg text.phare{fill:#0B0E13;font-weight:700;font-size:33px}

.villes{list-style:none;margin:24px 0 0;padding:0;
        display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:380px){.villes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.villes button{width:100%;border:1px solid var(--trait);border-radius:99px;
               padding:9px 6px;font-size:12.5px;letter-spacing:.005em;
               font-family:inherit;background:transparent;color:var(--gris-clair);cursor:pointer;
               min-height:42px;
               transition:border-color .25s ease,color .25s ease,background .25s ease}
.villes button.actif{border-color:var(--orange);color:var(--blanc);
                     background:rgba(240,128,64,.10)}
/* Le survol n'existe qu'à la souris. Sur un écran tactile, il reste collé au
   dernier bouton touché : deux communes paraissaient alors allumées à la fois. */
@media (hover: hover){
  .villes button:hover{border-color:var(--orange);color:var(--blanc);
                       background:rgba(240,128,64,.10)}
}
.villes button:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
/* Saint-Denis porte la marque du phare : c'est là que tout commence. Mais dès
   que le visiteur choisit une commune, la marque s'efface — sinon Saint-Denis
   reste allumée à côté de son choix, et son geste semble n'avoir rien fait. */
.villes button.phare{border-color:var(--orange);color:var(--blanc)}
.villes.choisi button.phare:not(.actif){border-color:var(--trait);color:var(--gris-clair);
                                        background:transparent}

/* ── LES SERVICES : deux pôles, cartes à égalité ──────────────────── */
/* « align-items:start » : une carte dépliée grandit seule. Sans lui, ses deux
   voisines s'étirent à sa hauteur et laissent deux grands vides. */
.metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0;
         align-items:start}
@media(max-width:980px){.metiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.metiers{grid-template-columns:1fr;gap:10px}}
.metiers .m{background:var(--profond);border:1px solid var(--trait);border-radius:20px;
            padding:clamp(24px,3vw,32px);transition:border-color .3s ease}
.metiers .m:hover{border-color:var(--bleu)}
.metiers .m[open]{border-color:var(--bleu)}
.metiers .m h3{font-size:21px;margin:0 0 9px;line-height:1.25;padding-right:34px}
.metiers .m p{color:var(--gris-clair);margin:0;font-size:15.5px}

/* La carte se déplie : le titre et une phrase se lisent d'un coup d'œil, le
   détail attend qu'on le demande. Le résumé porte toute la surface cliquable —
   un doigt vise la carte, pas un mot. */
.metiers .m>summary{display:block;position:relative;cursor:pointer;list-style:none;
                    outline-offset:6px}
.metiers .m>summary::-webkit-details-marker{display:none}
.metiers .m .bref{display:block;color:var(--gris-clair);font-size:15.5px;line-height:1.55}
/* le signe : une croix couchée qui se relève à l'ouverture */
.metiers .m>summary::after{content:'';position:absolute;top:4px;right:0;width:20px;height:20px;
  background:linear-gradient(var(--gris),var(--gris)) center/100% 2px no-repeat,
             linear-gradient(var(--gris),var(--gris)) center/2px 100% no-repeat;
  transition:transform .28s ease,background-color .28s ease}
.metiers .m[open]>summary::after{transform:rotate(45deg);
  background:linear-gradient(var(--bleu),var(--bleu)) center/100% 2px no-repeat,
             linear-gradient(var(--bleu),var(--bleu)) center/2px 100% no-repeat}
.metiers .m .pave{margin-top:16px;padding-top:16px;border-top:1px solid var(--trait)}
.metiers .m .pave .ensavoir{margin:12px 0 0;font-size:14px}
.metiers .m .pave .ensavoir a{color:var(--bleu);text-decoration:none;border-bottom:1px solid rgba(74,157,239,.35)}
.metiers .m .pave .ensavoir a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.metiers .m .pave .btns{margin-top:16px}
.metiers .m .pave .btn{min-height:46px;padding:0 20px;font-size:14.5px}

/* Le service phare : celui par lequel presque tout commence. Il occupe deux
   colonnes et porte la couleur de la marque, pour qu'on le voie avant les
   autres sans avoir à lire. */
.metiers .m.phare{grid-column:span 2;
                  background:linear-gradient(150deg,rgba(74,157,239,.14),var(--profond) 60%);
                  border-color:rgba(74,157,239,.5)}
.metiers .m.phare h3{font-size:24px}
.metiers .m.phare .bref{color:var(--papier);font-size:16.5px}
@media(max-width:620px){ .metiers .m.phare{grid-column:auto} }

/* Sur téléphone, douze cartes fermées qui portent chacune un titre et une
   phrase font défiler sur deux écrans pour rien. La carte fermée n’affiche
   donc que son titre ; l’accroche revient dès qu’on l’ouvre, au-dessus du
   paragraphe. Sur ordinateur, où la place existe, rien ne change. */
@media (hover: none), (max-width: 760px){
  .metiers .m{padding:18px 20px}
  .metiers .m h3{font-size:18px;margin:0;padding-right:30px}
  .metiers .m .bref{display:none}
  .metiers .m[open] .bref{display:block;margin-top:8px;font-size:15px}
  .metiers .m>summary::after{top:2px;width:17px;height:17px}
  .metiers .m .pave{margin-top:14px;padding-top:14px}
  .metiers .m.phare h3{font-size:19px}
  .metiers .m.phare .bref{color:var(--gris-clair);font-size:15px}
}

.metiers .m[open] .pave{animation:deplie .3s ease both}
@keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .defile .piste{animation:none}
  .defile{overflow-x:auto}
  .metiers .m>summary::after{transition:none}
  .metiers .m[open] .pave{animation:none}
}
.suivi,.ouvert{margin-top:14px;border:1px solid var(--trait);border-radius:20px;
               padding:clamp(24px,3.4vw,38px)}
.suivi{background:linear-gradient(150deg,rgba(240,128,64,.13),var(--encre) 62%)}
/* la porte ouverte : ni un service de plus, ni une case orange — un encadré sobre */
.ouvert{background:var(--encre);border-style:dashed;border-color:var(--gris)}
.ouvert h3{font-size:clamp(20px,2.4vw,24px);margin:0 0 9px}
.ouvert p{color:var(--gris-clair);margin:0;font-size:15.5px;max-width:78ch;
          text-align:justify}
.ouvert .btns{margin-top:20px}
/* La section a pour fond var(--profond) : un dégradé qui s'y termine rend la
   case invisible. Il se termine donc sur var(--encre), plus clair, et la
   bordure est franche. */
.vedette{margin-top:14px;
         background:linear-gradient(150deg,rgba(74,157,239,.17),var(--encre) 62%);
         border:1px solid rgba(74,157,239,.5);border-radius:20px;
         box-shadow:0 1px 0 rgba(15,22,32,.03) inset;
         padding:clamp(24px,3.4vw,38px);
         display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
         gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:860px){.vedette{grid-template-columns:minmax(0,1fr);gap:22px}}
.vedette h3{font-size:clamp(22px,2.8vw,30px);margin:0 0 10px}
.vedette>div>p{color:var(--gris-clair);margin:0;font-size:16px}
.vedette .pts{margin:0}
.suivi h3{font-size:clamp(20px,2.4vw,24px);margin:0 0 9px}
.suivi p{color:var(--gris-clair);margin:0;font-size:15.5px;max-width:78ch}

/* ── ÉTAPES COLLANTES ─────────────────────────────────────────────── */
.parcours{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:start}
@media(max-width:900px){.parcours{grid-template-columns:1fr}}
.parcours .colle{position:sticky;top:110px}
@media(max-width:900px){.parcours .colle{position:static}}
.pas{border-top:1px solid var(--trait);padding:clamp(26px,4vh,40px) 0;display:grid;
     grid-template-columns:auto 1fr;gap:22px;align-items:start}
.pas:last-child{border-bottom:1px solid var(--trait)}
.pas .n{font-family:var(--titre);font-weight:700;font-size:14px;color:var(--orange);padding-top:5px}
.pas h3{margin:0 0 8px;font-size:clamp(20px,2.6vw,26px)}
.pas p{margin:0;color:var(--gris-clair);font-size:16px}

/* ── COMPTEURS ────────────────────────────────────────────────────── */
/* Le bandeau est entièrement décrit par « .chiffres » dans la feuille commune.
   Cette feuille se chargeant après, tout ce qui est redit ici l'écrase — c'est
   ainsi que « .compteurs span » a longtemps rejeté l'unité (€, h) à la ligne,
   en passant en bloc le <span> du compteur qui vit à l'intérieur du chiffre.
   On ne garde donc que le seul écart voulu : des chiffres un peu plus grands. */
.compteurs b{font-size:clamp(40px,8vw,62px);font-variant-numeric:tabular-nums}

/* ── GRAND APPEL FINAL ────────────────────────────────────────────── */
.final{position:relative;overflow:hidden;text-align:center;
       padding:clamp(70px,13vh,150px) 0}
.final::before{content:'';position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(90vw,1000px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(74,157,239,.16),transparent 62%);filter:blur(24px);pointer-events:none}
.final .w{position:relative;z-index:2}
.final h2{font-size:clamp(32px,6.4vw,74px);line-height:1;margin:0 auto 20px;max-width:13em}
.final p{color:var(--gris-clair);margin:0 auto;max-width:34em;font-size:clamp(16.5px,2vw,19px)}
.final .btns{justify-content:center;margin-top:34px}
.final .btn-plein{min-height:60px;padding:18px 38px;font-size:17px}
.final .joindre{margin-top:30px;font-size:15px;color:var(--gris)}
.final .joindre a{color:var(--gris-clair);text-decoration:none;display:inline-flex;align-items:center;
                  min-height:44px;padding:10px 4px;border-bottom:1px solid var(--trait)}
.final .joindre a:hover{color:var(--bleu);border-color:var(--bleu)}

/* ── MOUVEMENT COUPÉ ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .heros .lieu i,.cue span::after{animation:none}
  h1.geant .mot span{transform:none;transition:none}
  .carte-svg .contour{stroke-dashoffset:0;transition:none}
  .carte-svg .mer,.carte-svg .ecume,.carte-svg .terre{opacity:1;transform:none;transition:none}
  .carte-svg .ecume{opacity:.34}
  .carte-svg .ville{opacity:1;transform:none;transition:none}
  .carte-sec.on .carte-svg .halo{animation:none}
}