/* ─────────────────────────────────────────────────────────────────────
   Digablo — feuille commune de re.digablo.fr
   Marque reprise de digablo.fr : Space Grotesk + Inter, encre #1F242D,
   le bleu de l'anneau du O et l'orange du point d'exclamation du logo.
   ───────────────────────────────────────────────────────────────────── */
:root{
  /* Palette reprise de digablo.fr : fond blanc, fond secondaire #F6F7F8,
     encre #1F242D. Les noms de variables gardent leur rôle plutôt que leur
     teinte : « encre » est le fond de page, « papier » la couleur du texte.
     Les accents sont assombris d'un cran : le bleu et l'orange du logo, posés
     tels quels sur du blanc, ne tenaient pas le contraste d'un texte lisible. */
  --encre:#FFFFFF; --profond:#F6F7F8; --nuit:#FFFFFF; --blanc:#0F1620;
  --papier:#1F242D; --gris:#6B7688; --gris-clair:#4A5566; --trait:#E3E6EA;
  --bleu:#2F82D6; --bleu-f:#1F6FD0; --orange:#D4600F; --orange-f:#B44E08;
  --titre:'Space Grotesk','Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --rayon:14px;
}
/* ── LES SECTIONS FONCÉES ─────────────────────────────────────────── */
/* Le site est clair, trois sections restent sombres : le bandeau des métiers,
   la carte de l'île et l'appel final. Plutôt que de réécrire chaque règle, on
   redéfinit la palette à l'intérieur de ces sections. Les variables CSS
   s'héritent : tout ce qui vit dedans bascule d'un coup, boutons et bordures
   compris, sans qu'aucun composant ait à savoir où il se trouve. */
.heros,.defile,.final,.sombre{
  --encre:#1F242D; --profond:#141922; --nuit:#0B0E13; --blanc:#FFFFFF;
  --papier:#F4F6F9; --gris:#8894A6; --gris-clair:#AEB6C2; --trait:#2A313D;
  --bleu:#4A9DEF; --bleu-f:#2F82D6; --orange:#F08040; --orange-f:#DC6A28;
  background:var(--encre);color:var(--papier)}
.defile{background:var(--profond)}
.final{background:linear-gradient(180deg,var(--profond),var(--encre))}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--encre);color:var(--papier);font-family:var(--sans);
     font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden;
     animation:pagein .5s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img{display:block;max-width:100%;height:auto}
a{color:var(--bleu)}
h1,h2,h3{text-wrap:balance;font-family:var(--titre);font-weight:700;letter-spacing:-.02em}
p,li{text-wrap:pretty}
::selection{background:var(--orange);color:var(--nuit)}
.w{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.etroit{max-width:840px}

/* ── EN-TÊTE ──────────────────────────────────────────────────────── */
/* Fond opaque : à 90 % d'opacité, un grand titre qui défilait dessous restait
   visible au travers et se mêlait au menu. Le flou ne suffit pas pour du texte
   épais et clair. */
.tete{position:sticky;top:0;z-index:40;background:#FFFFFF;
      border-bottom:1px solid var(--trait)}
.tete .w{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.tete .marque{display:inline-flex;align-items:center;min-height:44px}
.tete img{height:30px;width:auto}

/* ── MENU DE TÉLÉPHONE ────────────────────────────────────────────── */
/* Le point d'arrêt vise le tactile autant que la largeur : un téléphone dont
   le zoom de page élargit le viewport reste un téléphone. */
.burger{display:none}
.lu{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Le menu de bureau d'abord : une ligne de liens. Le menu de téléphone, plus
   bas, le remplace entièrement. L'ordre compte — à spécificité égale, c'est la
   dernière règle qui gagne, et le menu déroulant du téléphone se retrouvait
   remis en ligne par les règles de bureau écrites après lui. */
.tete nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tete nav a{color:var(--gris-clair);text-decoration:none;font-size:14.5px;padding:11px 13px;
            border-radius:9px;min-height:44px;display:inline-flex;align-items:center;
            transition:color .25s ease,background .25s ease}
.tete nav a:hover{color:var(--blanc);background:rgba(15,22,32,.05)}
.tete nav a.cta{background:var(--bleu);color:#FFFFFF;font-weight:600;padding:11px 20px}
.tete nav a.cta:hover{background:var(--orange);color:var(--nuit)}

@media (hover: none), (max-width: 900px){
  .tete .w{position:relative;gap:10px}
  .tete img{height:24px}
  .burger{display:inline-flex;align-items:center;justify-content:center;
          width:46px;height:46px;padding:0;background:transparent;
          border:1px solid var(--trait);border-radius:12px;
          color:var(--papier);cursor:pointer}
  .burger:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
  .burger .barres{display:grid;gap:5px;width:20px}
  .burger .barres i{display:block;height:2px;background:currentColor;border-radius:2px;
                    transition:transform .25s ease,opacity .18s ease}
  .burger[aria-expanded="true"] .barres i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] .barres i:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] .barres i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Un petit rectangle sous le bouton, calé à droite : le menu tombe de la main
     qui vient de l'ouvrir. Un lien par ligne — « grid » à une colonne, et non
     « flex », pour qu'aucun lien ne se range à côté d'un autre. */
  /* « right » se mesure sur la boîte de rembourrage : à zéro, le rectangle
     débordait la gouttière et touchait le bord de l'écran. */
  .tete nav{position:absolute;right:var(--gut);left:auto;top:100%;z-index:39;
            width:max-content;min-width:170px;max-width:min(78vw,260px);
            display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
            margin-top:8px;padding:8px;
            background:#FFFFFF;border:1px solid var(--trait);
            border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
            backdrop-filter:blur(16px);transform-origin:top right;
            opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);
            transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .menu-ouvert .tete nav{opacity:1;visibility:visible;transform:none}
  .tete nav a{min-height:46px;padding:0 14px;border-radius:10px;font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .burger .barres i,.tete nav{transition:none}
}
@media(max-width:560px){
  /* le devis vit dans l appel de bas de page, pas dans l en-tete */
  .tete nav a[href="/devis/"]{display:none}
  .tete nav a{padding:10px 8px;font-size:13.5px}
}

/* ── SECTIONS ─────────────────────────────────────────────────────── */
section{padding:clamp(52px,9vh,110px) 0}
/* Sur téléphone, les blancs entre sections coûtent un demi-écran à eux seuls.
   Ils se resserrent sans que les sections se touchent. */
@media (max-width: 760px){ section{padding:38px 0} }
.oeil{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;
      letter-spacing:.18em;text-transform:uppercase;color:var(--bleu);font-weight:600;margin:0 0 18px}
.oeil::before{content:'';width:26px;height:2px;background:var(--orange);border-radius:2px}
h2{font-size:clamp(28px,4.6vw,46px);line-height:1.1;margin:0 0 16px}
h3{font-size:clamp(19px,2.4vw,23px);margin:0 0 8px}
.chapeau{font-size:clamp(17px,2.1vw,20px);color:var(--gris-clair);max-width:38em;margin:0}
.gris{color:var(--gris-clair)}

/* ── BOUTONS ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
     padding:15px 28px;border-radius:99px;text-decoration:none;font-weight:600;font-size:16px;
     border:1px solid transparent;cursor:pointer;font-family:var(--sans);
     transition:transform .25s ease,background .25s ease,border-color .25s ease;
     touch-action:manipulation}
.btn-plein{background:var(--bleu);color:#FFFFFF}
.btn-plein:hover{background:var(--orange);transform:translateY(-2px)}
.btn-vide{background:transparent;color:var(--papier);border-color:var(--trait)}
.btn-vide:hover{border-color:var(--bleu);transform:translateY(-2px)}
/* Un seul liseré orange sur toute la page : celui du devis, dans le héros.
   La couleur du point d exclamation du logo ne sert qu à cette porte-là. */
.heros .btns .btn-vide{border:2px solid var(--orange)}
.heros .btns .btn-vide:hover{border-color:var(--orange-f)}
.btn::after{content:'→';font-size:17px;transition:transform .25s ease}
.btn:hover::after{transform:translateX(4px)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ── CARTES ───────────────────────────────────────────────────────── */
.grille{display:grid;gap:14px;margin-top:36px}
/* « minmax(290px) » laissait tenir trois colonnes sur un grand écran : trente-
   cinq signes par ligne pour des paragraphes de cinq lignes, illisible. Le
   plancher monte à 430 px, ce qui donne deux colonnes larges au-delà de 900 px
   et une seule en dessous. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));align-items:start}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.carte{background:var(--profond);border:1px solid var(--trait);border-radius:var(--rayon);
       align-self:start;
       padding:28px 26px;transition:border-color .3s ease,transform .3s ease}
.carte:hover{border-color:var(--bleu);transform:translateY(-3px)}
.carte p{margin:0;color:var(--gris-clair);font-size:15.5px}
/* L accroche se detache du paragraphe, comme sur l accueil : meme forme des
   deux cotes, pour que la page des services soit lue comme sa suite. */
.carte .bref-carte{margin:0 0 10px;color:var(--papier);font-size:16.5px;font-weight:600;
                   line-height:1.45}
.carte .bref-carte+p{margin-top:0}
.carte .pastille{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
                 border-radius:11px;background:rgba(74,157,239,.14);color:var(--bleu);
                 font-family:var(--titre);font-weight:700;font-size:17px;margin-bottom:16px}
.carte.accent .pastille{background:rgba(240,128,64,.16);color:var(--orange)}
.carte.accent:hover{border-color:var(--orange)}
a.carte{text-decoration:none;color:inherit;display:block}
a.carte .fleche{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px;
                font-weight:600;color:var(--bleu)}
a.carte:hover .fleche{color:var(--orange)}

/* ── BANDEAU CHIFFRES ─────────────────────────────────────────────── */
.chiffres{border-block:1px solid var(--trait);background:var(--profond)}
.chiffres .in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
              padding-block:clamp(26px,4.5vh,46px)}
@media(max-width:860px){.chiffres .in{grid-template-columns:repeat(2,1fr)}}
.chiffres .in>div{display:flex;flex-direction:column;align-items:center;justify-content:center;
                  gap:10px;text-align:center;padding:clamp(16px,2.6vw,26px) 12px;
                  aspect-ratio:1/1;background:var(--encre);
                  border:1px solid var(--trait);border-radius:18px;
                  transition:border-color .3s ease}
.chiffres .in>div:hover{border-color:var(--bleu)}
.chiffres b{display:block;font-family:var(--titre);font-weight:700;
            font-size:clamp(38px,7.5vw,58px);line-height:1;color:var(--blanc);
            white-space:nowrap;font-variant-numeric:tabular-nums}
.chiffres b em{font-style:normal;color:var(--orange)}
.chiffres b em.ord{font-size:.46em;vertical-align:super;margin-left:.14em;
                   letter-spacing:.01em;line-height:1}
/* La légende seule passe en bloc : le <span> du compteur vit à l intérieur du
   chiffre, et le mettre en bloc rejetait l unité (€, h) à la ligne suivante. */
.chiffres .in>div>span{display:block;margin:0;font-size:14px;line-height:1.5;
                       color:var(--gris);max-width:19ch}
.chiffres b span{display:inline}

/* ── ÉTAPES ───────────────────────────────────────────────────────── */
.etapes{counter-reset:e;display:grid;gap:0;margin-top:36px}
.etape{counter-increment:e;display:grid;grid-template-columns:auto 1fr;gap:22px;
       padding:26px 0;border-bottom:1px solid var(--trait)}
.etape:last-child{border-bottom:0}
.etape::before{content:counter(e,decimal-leading-zero);font-family:var(--titre);font-weight:700;
               font-size:15px;color:var(--orange);padding-top:5px}
.etape h3{margin:0 0 6px}
.etape p{margin:0;color:var(--gris-clair);font-size:15.5px}
/* Sur téléphone, le chiffre en colonne poussait tout le texte vers la droite et
   lui volait un quart de la largeur. Il passe au-dessus du titre, le texte
   reprend toute la ligne. */
@media (max-width: 760px){
  .etape{grid-template-columns:minmax(0,1fr);gap:6px}
  .etape::before{font-size:15px}
}

/* ── LISTE À PUCES ────────────────────────────────────────────────── */
ul.pts{list-style:none;margin:22px 0 0;padding:0}
ul.pts li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--trait);
          color:var(--gris-clair);font-size:16px}
ul.pts li:last-child{border-bottom:0}
ul.pts li::before{content:'';position:absolute;left:0;top:21px;width:9px;height:9px;
                  border-radius:50%;background:var(--bleu)}
ul.pts b{color:var(--papier);font-weight:600}

/* ── APPEL FINAL ──────────────────────────────────────────────────── */
.appel{background:linear-gradient(135deg,var(--profond),var(--nuit));
       border:1px solid var(--trait);border-radius:20px;padding:clamp(30px,5vw,54px);text-align:center}
.appel h2{margin-bottom:12px}
.appel p{color:var(--gris-clair);margin:0 auto;max-width:34em}
.appel .btns{justify-content:center}

/* ── PIED ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--trait);padding:clamp(38px,6vh,64px) 0 46px;
       color:var(--gris);font-size:14.5px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:30px}
footer h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
          color:var(--gris-clair);margin:0 0 10px;font-weight:600}
footer a{color:var(--gris-clair);text-decoration:none;display:inline-flex;align-items:center;
         min-height:40px}
footer a:hover{color:var(--bleu)}
footer .liens{display:flex;flex-direction:column}
footer .bas{margin-top:34px;padding-top:22px;border-top:1px solid var(--trait);font-size:13.5px}
footer img{height:26px;width:auto;margin-bottom:14px}

/* le projet vit ici, en bas de page, jamais dans l'en-tête */
footer .pied-appel{display:flex;align-items:center;justify-content:space-between;gap:24px;
                   flex-wrap:wrap;padding:clamp(22px,3.5vw,34px);margin-bottom:44px;
                   background:var(--profond);border:1px solid var(--trait);
                   border-radius:var(--rayon)}
footer .pied-appel>div{flex:1 1 min(100%,34ch)}
footer .pied-appel h4{font-family:var(--titre);font-size:clamp(20px,2.6vw,27px);letter-spacing:0;
                      text-transform:none;color:var(--blanc);margin:0 0 7px;font-weight:600;
                      line-height:1.2}
footer .pied-appel p{margin:0;max-width:48ch;font-size:15px;line-height:1.6}
footer .pied-appel .btn{flex:0 0 auto;margin:0}

/* ── FAMILLES DE SERVICES ─────────────────────────────────────────── */
.famille{display:flex;align-items:center;gap:18px;margin:46px 0 18px;
         font-family:var(--titre);font-size:clamp(17px,2.1vw,21px);font-weight:600;
         color:var(--blanc);line-height:1.3}
.famille span{flex:0 0 auto}
.famille::after{content:'';flex:1 1 auto;height:1px;background:var(--trait)}

/* ── TEXTE JUSTIFIÉ ───────────────────────────────────────────────── */
/* La justification ne s'applique qu'aux paragraphes de lecture. Les blocs
   centrés (appel, section finale) et les libellés gardent leur alignement.

   Aucune coupure de mot : « héberge-ment » en bout de ligne se lit comme une
   faute, personne n'écrit ainsi à la main. La justification, elle, reste —
   partout, téléphone compris. */
/* La justification demande une ligne longue. Au-delà d'une soixantaine de
   signes elle serre le texte proprement ; en dessous, elle creuse des trous
   entre les mots, et c'est ce qui arrivait dans les cartes. Elle ne vaut donc
   que pour les chapeaux et les paragraphes qui courent sur toute la largeur.
   Tout ce qui vit dans une carte ou une colonne se lit au fer à gauche. */
.chapeau,.sous,.parcours .pas p{text-align:justify;text-justify:inter-word}
.carte p,.carte .bref-carte,.etape p,.pts li,.metiers .m p,.metiers .m .bref,
.vedette>div>p,.suivi p,.metier .petit p,.autres .petit p,
footer .cols>div>p{text-align:left}
/* Sous 900 px, même les chapeaux perdent la largeur nécessaire. */
@media (max-width: 900px){
  .chapeau,.sous,.parcours .pas p{text-align:left}
}
*{hyphens:manual}
.appel p,.appel h2,.final p,.final h2{text-align:center;hyphens:manual}

/* ── QUESTIONS FRÉQUENTES ─────────────────────────────────────────── */
/* Ce que les assistants citent, ils l ont d abord lu sur la page : la FAQ
   sert autant le visiteur pressé que le modèle qui vient chercher une
   réponse à donner. Elle se déplie, comme les cartes de services. */
.faq{margin-top:30px;border-top:1px solid var(--trait)}
.faq .q{border-bottom:1px solid var(--trait)}
.faq .q>summary{display:block;position:relative;cursor:pointer;list-style:none;
                padding:20px 44px 20px 0}
.faq .q>summary::-webkit-details-marker{display:none}
.faq .q h3{display:inline;font-size:clamp(17px,2.2vw,20px);line-height:1.35;margin:0}
.faq .q>summary::after{content:'';position:absolute;top:50%;right:6px;margin-top:-9px;
  width:18px;height:18px;
  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}
.faq .q[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}
.faq .q p{margin:0 0 22px;color:var(--gris-clair);font-size:16px;max-width:70ch}

/* ── FORMULAIRE ───────────────────────────────────────────────────── */
form.devis{display:grid;gap:16px;background:var(--profond);border:1px solid var(--trait);
           border-radius:var(--rayon);padding:clamp(22px,4vw,34px);margin-top:32px}
form.devis label{display:block;font-size:13px;font-weight:600;color:var(--gris-clair);margin-bottom:7px}
form.devis input,form.devis textarea,form.devis select{
  width:100%;padding:14px 15px;background:var(--encre);border:1px solid var(--trait);
  border-radius:10px;color:var(--papier);font-family:inherit;font-size:16px}
form.devis textarea{min-height:130px;resize:vertical}
form.devis input:focus-visible,form.devis textarea:focus-visible,form.devis select:focus-visible{
  outline:2px solid var(--bleu);outline-offset:1px}
form.devis .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){form.devis .duo{grid-template-columns:1fr}}
form.devis button{background:var(--bleu);color:var(--nuit);border:0;min-height:54px;
                  border-radius:99px;font-weight:700;font-size:16px;cursor:pointer;
                  font-family:var(--sans);transition:background .25s ease,transform .25s ease;
                  touch-action:manipulation}
form.devis button:hover{background:var(--orange);transform:translateY(-2px)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── RÉVÉLATION ───────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}