:root{
  --chaux:#EEF2F3;       /* mur passé à la chaux, blanc froid */
  --blanc:#FFFFFF;
  --email:#1B4B9B;       /* bleu des plaques de rue émaillées */
  --nuit:#0F2550;        /* encre principale */
  --zellige:#13705A;     /* vert zellige */
  --safran:#F2B632;      /* porte jaune safran, petites touches */
  --gris:#4A5872;        /* texte secondaire (contraste AA sur chaux) */
  --trait:#C9D3DE;
  --latin:"Archivo", system-ui, sans-serif;
  --arabe:"Reem Kufi", "Noto Kufi Arabic", "Geeza Pro", sans-serif;
  --gouttiere:clamp(16px,4vw,40px);
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--chaux);color:var(--nuit);font-family:var(--latin);font-size:1.0625rem;line-height:1.55;font-variation-settings:"wdth" 100}
img,svg{display:block;max-width:100%}
a{color:var(--email);text-underline-offset:.18em}
a:hover{color:var(--nuit)}
:focus-visible{outline:3px solid var(--safran);outline-offset:3px;border-radius:4px}
.ar{font-family:var(--arabe);direction:rtl;unicode-bidi:isolate}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--nuit);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* ---------- Titres ---------- */
h1,h2,h3{font-family:var(--latin);line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,5vw,3rem);font-weight:780;font-variation-settings:"wdth" 72;color:var(--nuit);max-width:20ch}
h3{font-size:1.3rem;font-weight:700;font-variation-settings:"wdth" 85}
.intro{color:var(--gris);max-width:58ch;margin:.9rem 0 0}
section{padding-block:clamp(56px,9vw,104px)}
section + section{border-top:1px solid var(--trait)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font:inherit;font-weight:700;font-variation-settings:"wdth" 90;text-decoration:none;border-radius:999px;padding:.85em 1.4em;border:2px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--zellige);color:#fff}
.btn-wa:hover{background:#0D5745;color:#fff}
.btn-line{border-color:var(--email);color:var(--email);background:transparent}
.btn-line:hover{background:var(--email);color:#fff}
.btn svg{width:1.2em;height:1.2em;flex:none}

/* ---------- En-tête ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--nuit);font-weight:800;font-variation-settings:"wdth" 75;font-size:1.15rem}
.logo-plaque{display:grid;place-items:center;width:44px;height:32px;border-radius:6px;background:var(--email);box-shadow:inset 0 0 0 2px var(--email),inset 0 0 0 3.5px #fff;color:#fff;font-family:var(--arabe);font-size:1rem;line-height:1}
.nav{display:none;gap:22px}
.nav a{color:var(--nuit);text-decoration:none;font-weight:600;font-variation-settings:"wdth" 88}
.nav a:hover{color:var(--email);text-decoration:underline}
@media (min-width:860px){.nav{display:flex}}
.top .btn{padding:.6em 1.1em;font-size:.95rem}

/* ---------- Hero : la plaque de rue ---------- */
.hero{padding-block:clamp(28px,6vw,72px) clamp(56px,9vw,104px);border-top:0}
.hero-grid{display:grid;gap:clamp(32px,6vw,64px);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.mur{position:relative;padding:28px 8px 8px}
.clou{position:absolute;top:10px;width:12px;height:12px;border-radius:50%;background:#8C97A8;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.clou.g{left:16%}.clou.d{right:16%}
.plaque{
  position:relative;background:var(--email);color:#fff;border-radius:18px;
  padding:clamp(18px,3.5vw,30px);
  box-shadow:0 1px 0 #0d2f6b,0 18px 30px -18px rgba(15,37,80,.55);
  transform-origin:50% -20px;
}
.plaque::before{content:"";position:absolute;inset:9px;border:3px solid #fff;border-radius:11px;pointer-events:none}
.plaque-in{position:relative;display:grid;gap:6px;text-align:center;padding:clamp(14px,3vw,26px) 10px}
.plaque .ar{font-size:clamp(3.4rem,13vw,6.2rem);line-height:1.05;font-weight:700}
.plaque .fr{font-weight:800;font-variation-settings:"wdth" 62;font-size:clamp(2rem,7.5vw,3.6rem);line-height:1;letter-spacing:.01em}
.plaque .sous{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:.98rem;font-variation-settings:"wdth" 80;opacity:.92}
.hero .sur-titre{margin:0 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--email)}
.hero h1{font-size:clamp(2.5rem,7.4vw,4.6rem);font-weight:800;font-variation-settings:"wdth" 66;line-height:.98;max-width:13ch}
.hero .darija{font-size:clamp(1.25rem,3.4vw,1.7rem);color:var(--email);margin:18px 0 0;line-height:1.5}
.hero .promesse{max-width:52ch;margin:18px 0 0;color:var(--nuit)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .note{margin:14px 0 0;font-size:.92rem;color:var(--gris)}

/* Le seul moment fort : la plaque est accrochée au mur puis se stabilise */
@media (prefers-reduced-motion:no-preference){
  .plaque{animation:accroche 1.5s cubic-bezier(.3,.7,.3,1) .15s both}
  .hero-texte{animation:apparait .6s ease-out .9s both}
  @keyframes accroche{
    0%{transform:translateY(-36px) rotate(-7deg);opacity:0}
    25%{transform:translateY(0) rotate(4deg);opacity:1}
    45%{transform:rotate(-2.4deg)}
    63%{transform:rotate(1.2deg)}
    80%{transform:rotate(-.5deg)}
    100%{transform:rotate(0)}
  }
  @keyframes apparait{from{opacity:0}to{opacity:1}}
}

/* ---------- Offres ---------- */
.offres{display:grid;gap:20px;margin-top:40px}
@media (min-width:760px){.offres{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.offres{grid-template-columns:repeat(3,1fr)}}
.offre{background:var(--blanc);border-radius:14px;padding:clamp(22px,3.5vw,34px);display:flex;flex-direction:column;gap:14px;border:1px solid var(--trait)}
.offre.vedette{border:3px solid var(--email);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--email)}
.prix{display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap;color:var(--email)}
.prix strong{font-size:clamp(2.6rem,7vw,3.6rem);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;letter-spacing:-.01em}
.prix span{font-weight:700;font-variation-settings:"wdth" 80}
.offre ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.offre li{padding-left:26px;position:relative}
.offre li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:12px;background:var(--zellige);clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.paiement{font-size:.95rem;color:var(--gris);margin:0;padding-top:12px;border-top:1px dashed var(--trait)}
.offre .btn{align-self:flex-start;margin-top:auto}

.suivi{margin-top:20px;background:var(--blanc);border-radius:14px;border:1px solid var(--trait);padding:clamp(22px,3.5vw,34px)}
.suivi > p{color:var(--gris);max-width:62ch;margin:.5rem 0 0}
.paliers{display:grid;gap:0;margin-top:22px}
@media (min-width:760px){.paliers{grid-template-columns:repeat(3,1fr);gap:28px}}
.palier{padding:18px 0;border-top:1px solid var(--trait);display:grid;gap:8px;align-content:start}
@media (min-width:760px){.palier{padding:6px 22px 4px;border-top:0;border-left:1px solid var(--trait)}.palier:first-child{padding-left:0;border-left:0}}
.palier .prix strong{font-size:2.2rem}
.palier p{margin:0;font-size:.97rem}
.palier .btn{justify-self:start;padding:.55em 1.1em;font-size:.95rem;margin-top:6px}
.petit{font-size:.92rem;color:var(--gris);margin:18px 0 0}

/* ---------- Clients fondateurs ---------- */
.fondateurs{background:var(--email);color:#fff;border-top:0}
.fondateurs h2{color:#fff}
.fondateurs .intro{color:#DCE6F7}
.fond-grid{display:grid;gap:36px;margin-top:34px}
@media (min-width:860px){.fond-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.barre{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.barre s{color:#BBCBEA;font-size:1.3rem;font-weight:600}
.barre strong{font-size:clamp(3rem,9vw,4.4rem);font-weight:800;font-variation-settings:"wdth" 66;line-height:1}
.fondateurs ul{padding-left:1.1em;margin:18px 0 0;display:grid;gap:6px}
.fondateurs .btn-wa{background:#fff;color:var(--email)}
.fondateurs .btn-wa:hover{background:var(--safran);color:var(--nuit)}
.fondateurs a:not(.btn){color:#fff}
.compteur{background:var(--nuit);border-radius:14px;padding:26px}
.compteur p{margin:0}
.compteur .chiffre{font-size:2.6rem;font-weight:800;font-variation-settings:"wdth" 66;line-height:1}
.portes{display:flex;gap:14px;margin:18px 0}
/* Place libre = porte ouverte : la lumière passe, le battant est poussé vers l'intérieur */
.porte{width:56px;height:76px;border-radius:28px 28px 4px 4px;border:3px solid #fff;position:relative;overflow:hidden;background:radial-gradient(75% 65% at 55% 65%,rgba(255,214,120,.95),rgba(242,182,50,.35) 75%);perspective:140px}
.porte::before{content:"";position:absolute;inset:0;border-radius:25px 25px 2px 2px;background:#21397A;border-right:2px solid rgba(255,255,255,.7);transform-origin:left center;transform:rotateY(62deg)}
.porte::after{content:"";position:absolute;left:7px;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.8}
/* Place prise = porte fermée */
.porte.prise{background:#fff;border-color:#fff}
.porte.prise::before{display:none}
.porte.prise::after{left:auto;right:9px;width:6px;height:6px;background:var(--nuit);opacity:1}
.compteur .etat{color:#DCE6F7;font-size:.95rem}

/* ---------- Réalisation ---------- */
.real-grid{display:grid;gap:32px;margin-top:36px;align-items:center}
@media (min-width:860px){.real-grid{grid-template-columns:.9fr 1.1fr}}
.vitrine{background:var(--nuit);border-radius:16px;padding:14px;color:#fff}
.vitrine-barre{display:flex;gap:6px;padding:2px 4px 12px}
.vitrine-barre i{width:9px;height:9px;border-radius:50%;background:#43557a}
.vitrine-ecran{background:#F7F2EE;color:#2a1c18;border-radius:8px;min-height:240px;display:grid;place-content:center;text-align:center;padding:28px;gap:8px}
.vitrine-ecran .real-logo{width:min(240px,70%);height:auto;margin:0 auto 4px}
.vitrine-ecran p{margin:0;font-size:.95rem}
.vitrine-ecran .pills{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.vitrine-ecran .pills span{border:1px solid #2a1c18;border-radius:999px;padding:3px 12px;font-size:.85rem}
.real-texte p{margin:0 0 14px;max-width:56ch}
.real-texte dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 22px;font-size:.97rem}
.real-texte dt{color:var(--gris)}
.real-texte dd{margin:0;font-weight:600}

/* ---------- Réalisations (grille) ---------- */
.projets{display:grid;gap:22px;margin-top:34px}
@media (min-width:760px){.projets{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.projets{grid-template-columns:repeat(3,1fr)}}
.projet-apercu.darsabra{background:radial-gradient(80% 90% at 50% 100%,#2F7A6C,#0E4D45);color:#F5EDE3;align-content:center;gap:4px}
.darsabra-arche{width:46px;height:46px;margin-bottom:4px}
.darsabra-logo{font-family:Georgia,"Times New Roman",serif;font-size:2.6rem;line-height:1;letter-spacing:.01em}
.projet-apercu.nouara{background:radial-gradient(60% 80% at 85% 10%,#FF6B1A,transparent 70%),radial-gradient(60% 80% at 10% 100%,#8B5CF6,transparent 70%),#120A1F;color:#FFF4E6;align-content:center;gap:6px}
.nouara-logo{font-weight:800;font-size:2.8rem;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.nouara-sous{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#C8F560;font-weight:700}
.darsabra-sous{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#E8C9A0}
.projet-apercu.ribat{background:#F6F1E7;box-shadow:inset 0 -16px 0 #1F3F8F;color:#14213D;align-content:center;gap:2px}
.ribat-arche{width:54px;height:54px;background:#1F3F8F;border-radius:14px;padding:8px;margin-bottom:6px}
.ribat-logo{font-weight:800;font-size:3rem;letter-spacing:-.03em;line-height:1}
.ribat-sous{font-size:.95rem;color:#B4532A;font-weight:600}
.projet{background:var(--blanc);border-radius:18px;border:1px solid var(--trait);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.projet:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(15,37,80,.5)}
.projet-apercu{position:relative;display:grid;place-items:center;aspect-ratio:16/10;padding:28px;text-decoration:none;border-bottom:1px solid var(--trait)}
.projet-apercu::before{content:"";position:absolute;top:12px;left:14px;width:42px;height:9px;background:radial-gradient(circle,rgba(15,37,80,.25) 4px,transparent 4.5px) 0 0/14px 9px repeat-x}
.projet-apercu img{width:min(72%,260px);height:auto;transition:transform .35s}
.projet:hover .projet-apercu img{transform:scale(1.04)}
.projet-apercu.rihla{background:linear-gradient(180deg,#2B2F5C,#C26A4A 62%,#F2B05E);color:#fff;align-content:center;gap:4px}
.rihla-logo{font-weight:800;font-size:3rem;letter-spacing:-.03em;line-height:1}
.rihla-logo b{color:#F2B632}
.rihla-sous{font-size:.95rem;opacity:.9}
.projet-corps{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.projet-corps h3{font-size:1.5rem;margin:0}
.projet-corps p{margin:0;color:var(--gris);font-size:.97rem}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.etiquettes li{font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--chaux);color:var(--email)}
.etiquettes .demo-tag{background:#FFF4D6;color:#7A5A00}
.projet-lien{margin-top:auto;padding-top:10px;font-weight:700;color:var(--email);text-decoration:none}
.projet-lien:hover{text-decoration:underline}

/* ---------- Étapes ---------- */
.etapes{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;counter-reset:e}
@media (min-width:860px){.etapes{grid-template-columns:repeat(4,1fr)}}
.etape{counter-increment:e;padding:22px 0 22px 64px;position:relative;border-top:1px solid var(--trait)}
.etape::before{content:counter(e);position:absolute;left:0;top:20px;width:44px;height:44px;display:grid;place-items:center;border-radius:22px 22px 4px 4px;background:var(--email);color:#fff;font-weight:800;font-size:1.2rem}
@media (min-width:860px){
  .etape{padding:70px 22px 0 0;border-top:0}
  .etape::before{top:0}
  .etape::after{content:"";position:absolute;left:52px;right:10px;top:22px;border-top:2px dotted var(--trait)}
  .etape:last-child::after{display:none}
}
.etape h3{margin-bottom:6px}
.etape p{margin:0;color:var(--gris);font-size:.98rem}

/* ---------- Propriété ---------- */
.cles{display:grid;gap:14px;margin:36px 0 0;padding:0;list-style:none}
@media (min-width:760px){.cles{grid-template-columns:repeat(3,1fr)}}
.cle{border-left:4px solid var(--zellige);padding:4px 0 4px 18px}
.cle h3{font-size:1.15rem}
.cle p{margin:6px 0 0;color:var(--gris);font-size:.97rem}

/* ---------- Avis ---------- */
.avis-vide{margin-top:30px;border:2px dashed var(--trait);border-radius:14px;padding:clamp(22px,4vw,36px);display:grid;gap:10px;max-width:720px}
.avis-vide p{margin:0}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;max-width:780px}
.faq details{border-top:1px solid var(--trait)}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:700;font-variation-settings:"wdth" 88;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2.5px solid var(--email);border-bottom:2.5px solid var(--email);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .rep{padding:0 0 20px;color:var(--nuit);max-width:66ch}
.faq .rep p{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- Contact / pied ---------- */
.contact{background:var(--nuit);color:#fff;border-top:0}
.contact h2{color:#fff}
.contact .intro{color:#C8D3EA}
.contact .ar{font-size:1.4rem;margin:14px 0 0;color:#fff}
.contact .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.contact .btn-wa{background:#fff;color:var(--zellige)}
.contact .btn-wa:hover{background:var(--safran);color:var(--nuit)}
.contact .btn-line{border-color:#fff;color:#fff}
.contact .btn-line:hover{background:#fff;color:var(--nuit)}
.contact .num{margin:16px 0 0;color:#C8D3EA;font-size:.95rem}
footer{background:var(--nuit);color:#C8D3EA;font-size:.92rem;padding-block:0 36px}
footer .wrap{border-top:1px solid #2B3F6B;padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{color:#fff}
.zellige-bande{height:14px;background:
  conic-gradient(from 45deg at 50% 50%,var(--zellige) 0 25%,transparent 0 50%,var(--zellige) 0 75%,transparent 0) 0 0/14px 14px,
  var(--email)}

/* Bouton WhatsApp flottant (mobile) */
.wa-flottant{position:fixed;right:16px;bottom:16px;z-index:5;width:56px;height:56px;border-radius:50%;background:var(--zellige);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(15,37,80,.5)}
.wa-flottant svg{width:28px;height:28px}
.wa-flottant:hover{background:#0D5745;color:#fff}
@media (min-width:860px){.wa-flottant{display:none}}

html,body{overflow-x:clip}

/* ---------- Animations : bandeau émaillé ---------- */
.bandeau{background:var(--email);color:#fff;transform:rotate(-1.6deg);margin:0 -30px;padding:16px 0;overflow:hidden;white-space:nowrap;border-block:4px solid #fff;box-shadow:0 0 0 2px var(--email)}
.bandeau-piste{display:inline-flex;gap:34px;font-weight:800;font-variation-settings:"wdth" 66;font-size:clamp(1.4rem,3.4vw,2.3rem);text-transform:uppercase;letter-spacing:.01em;will-change:transform}
.bandeau-piste span::after{content:"✦";color:var(--safran);margin-left:34px}

/* ---------- Animations : titre, offre vedette, étapes ---------- */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mot > span{display:inline-block}
.surligne{background:linear-gradient(var(--safran),var(--safran)) no-repeat 0 92%/var(--trait-safran,100%) .16em}
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.offre.vedette{position:relative;border-color:transparent}
.offre.vedette::before{content:"";position:absolute;inset:-4px;padding:5px;border-radius:17px;pointer-events:none;background:conic-gradient(from var(--angle),var(--email),var(--safran),var(--zellige),var(--email));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (prefers-reduced-motion:no-preference){.offre.vedette::before{animation:tourne 5s linear infinite}}
@keyframes tourne{to{--angle:360deg}}
.etapes{position:relative}
.etapes::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--safran);transform-origin:left;transform:scaleX(var(--fil,1));z-index:1}
@media (max-width:859px){.etapes::before{left:20px;top:22px;width:3px;height:calc(100% - 44px);transform-origin:top;transform:scaleY(var(--fil,1));z-index:0}}
.etape::before{transition:background .35s,transform .35s;z-index:1}
.etapes.anime .etape::before{background:var(--trait);color:var(--nuit)}
.etapes.anime .etape.allume::before{background:var(--email);color:#fff;transform:scale(1.12)}
.projet{will-change:transform}

/* ---------- Services ---------- */
.services-grille{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.service{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;padding:22px;display:grid;gap:8px;align-content:start}
.service svg{width:40px;height:40px;color:var(--email)}
.service h3{font-size:1.25rem}
.service p{margin:0;color:var(--gris);font-size:.96rem}
.services .petit{margin-top:18px}

/* ---------- Rebranding ---------- */
.rebrand{background:var(--nuit);color:#fff}
.rebrand-grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:920px){.rebrand-grid{grid-template-columns:1fr 1fr}}
.rebrand h2{color:#fff}
.rebrand .intro{color:#C9D6EA}
.rebrand-sur{display:inline-block;background:var(--safran);color:var(--nuit);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 12px;margin:0 0 16px}
.rebrand-liste{list-style:none;margin:22px 0;padding:0;display:grid;gap:8px}
.rebrand-liste li{padding-left:24px;position:relative;color:#E3EAF5}
.rebrand-liste li::before{content:"✦";position:absolute;left:0;color:var(--safran)}
.rebrand .prix{color:#fff;margin:0 0 20px}
.rebrand .prix .apartir{font-size:.95rem;font-weight:600;color:#C9D6EA;margin-right:6px}
.rebrand .btn-wa{background:#fff;color:var(--zellige)}
.rebrand-offre{align-self:end}
.cas-grille{grid-column:1/-1;display:grid;gap:22px}
@media (min-width:860px){.cas-grille{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cas-grille{grid-template-columns:repeat(3,1fr)}}
.etiquettes .client-tag{background:#DFF3EA;color:#13705A}
.cas{display:flex;flex-direction:column;background:#fff;color:var(--nuit);border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s;will-change:transform}
.cas:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cas-visuel{position:relative;aspect-ratio:16/10;background:linear-gradient(180deg,#DCEBF3,#EEF5F7);display:grid;place-items:center;align-content:center;gap:2px;overflow:hidden}
.cas-mont{position:absolute;left:0;right:0;bottom:0;width:100%;height:42%}
.cas-emb{position:relative;width:70px;margin-bottom:6px}
.cas-nom{position:relative;font-family:Georgia,"Times New Roman",serif;font-size:2.4rem;line-height:1;color:#0C1B2A}
.cas-ar{position:relative;font-size:1.3rem;color:#1E5FA8}
.cas-corps{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.cas-corps h3{font-size:1.5rem}
.cas-corps p{margin:0;color:var(--gris)}
.cas-mention{font-size:.8rem;border-top:1px solid var(--trait);padding-top:10px;margin-top:4px}

/* ---------- Motion : barre de lecture safran ---------- */
.lecture{position:fixed;top:0;left:0;right:0;height:3px;background:var(--safran);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
@media (prefers-reduced-motion:reduce){.lecture{display:none}}
/* =========================================================
   VERSION FUTURISTE — mêmes couleurs, rendu plus « tech »
   ========================================================= */
:root{
  --abysse:#081634;      /* nuit plus profonde, même teinte */
  --lueur:#5B8DEF;       /* bleu émail éclairci, pour les lignes sur fond nuit */
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
body{background:var(--chaux)}
section + section{border-top:0}

/* Étiquette de section : 01 · Services */
.index{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--email)}
.index::before{content:"";width:28px;height:1px;background:currentColor}
.sombre .index{color:var(--safran)}

/* Sections claires : fine trame de points, comme un plan */
main > section:not(.sombre){position:relative;background:radial-gradient(circle,rgba(27,75,155,.13) 1px,transparent 1.4px) 0 0/26px 26px,var(--chaux)}
main > section:not(.sombre)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--trait) 20%,var(--trait) 80%,transparent)}
.sombre{background:var(--abysse);color:#fff;position:relative;overflow:hidden}
.sombre h2{color:#fff}
.sombre .intro{color:#B9C6E0}

/* ---------- En-tête : verre fumé, fixe ---------- */
.entete{position:sticky;top:0;z-index:40;background:var(--abysse);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(91,141,239,.18);transition:background-color .3s}
.entete.colle{background:rgba(8,22,52,.95)}
.entete .top{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.entete .logo{color:#fff}
.entete .logo-plaque{box-shadow:inset 0 0 0 2px var(--email),inset 0 0 0 3.5px #fff,0 0 18px rgba(91,141,239,.55)}
.entete .nav a{color:#D5DEEF;font-size:.95rem}
.entete .nav a:hover{color:#fff;text-decoration:none}
.entete .nav a{position:relative}
.entete .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--safran);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.entete .nav a:hover::after{transform:scaleX(1)}

/* ---------- Boutons ---------- */
.btn{border-radius:12px}
.btn-wa{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 24px -12px rgba(19,112,90,.9)}
.sombre .btn-line,.hero .btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.sombre .btn-line:hover,.hero .btn-line:hover{background:#fff;color:var(--nuit);border-color:#fff}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(48px,8vw,96px) clamp(64px,9vw,112px)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{grid-template-columns:1fr}
@media (min-width:940px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero .sur-titre{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;color:var(--safran);display:inline-flex;align-items:center;gap:10px}
.hero .sur-titre::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--zellige);box-shadow:0 0 0 4px rgba(19,112,90,.3)}
.hero h1{color:#fff;max-width:14ch}
.hero .promesse{color:#C8D3EA}
.hero .note{color:#8FA3C8}
.surligne{background:linear-gradient(var(--safran),var(--safran)) no-repeat 0 92%/var(--trait-safran,100%) .12em}

/* Sol quadrillé en perspective + halo qui suit la souris */
.sol{position:absolute;left:-40%;right:-40%;bottom:-2px;height:55%;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(91,141,239,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(91,141,239,.32) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%)}
.halo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,75%) var(--my,35%),rgba(27,75,155,.55),transparent 65%),
             radial-gradient(420px circle at 12% 110%,rgba(242,182,50,.14),transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .sol{animation:avance 5s linear infinite}
  @keyframes avance{to{background-position:0 64px}}
}

/* La plaque devient un panneau de verre, avec son cadre blanc d'origine */
.holo-zone{perspective:1000px}
.holo{position:relative;border-radius:22px;padding:clamp(20px,3vw,30px);color:#fff;
  background:linear-gradient(155deg,rgba(27,75,155,.95),rgba(15,37,80,.82));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(91,141,239,.35),0 40px 90px -30px rgba(27,75,155,.95),inset 0 1px 0 rgba(255,255,255,.3);
  transform-style:preserve-3d}
.holo::before{content:"";position:absolute;inset:11px;border:3px solid #fff;border-radius:13px;pointer-events:none}
.holo-reflet{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.holo-reflet::after{content:"";position:absolute;top:-50%;bottom:-50%;width:40%;left:-60%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
@media (prefers-reduced-motion:no-preference){
  .holo-reflet::after{animation:reflet 7s ease-in-out 1.6s infinite}
  @keyframes reflet{0%{left:-60%}35%,100%{left:130%}}
}
.holo-in{position:relative;display:grid;gap:6px;text-align:center;padding:clamp(18px,3vw,30px) 10px}
.holo .ar{font-size:clamp(3.4rem,12vw,6rem);line-height:1.05;font-weight:700;text-shadow:0 0 30px rgba(255,255,255,.35)}
.holo .fr{font-weight:800;font-variation-settings:"wdth" 62;font-size:clamp(2rem,6.5vw,3.3rem);line-height:1}
.holo .sous{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-top:6px}
.hud{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#8FA3C8;padding:12px 6px 0}
.hud .vivant{display:inline-flex;align-items:center;gap:8px;color:#BFE6D8}
.hud .vivant::before{content:"";width:7px;height:7px;border-radius:50%;background:#2BD49A;box-shadow:0 0 10px #2BD49A}
@media (prefers-reduced-motion:no-preference){.hud .vivant::before{animation:pouls 2s ease-in-out infinite}@keyframes pouls{50%{opacity:.35}}}
/* coins de visée autour du panneau */
.visee{position:absolute;width:18px;height:18px;border-color:var(--safran);border-style:solid;border-width:0;pointer-events:none}
.visee.hg{top:-12px;left:-12px;border-top-width:2px;border-left-width:2px}
.visee.hd{top:-12px;right:-12px;border-top-width:2px;border-right-width:2px}
.visee.bg{bottom:-12px;left:-12px;border-bottom-width:2px;border-left-width:2px}
.visee.bd{bottom:-12px;right:-12px;border-bottom-width:2px;border-right-width:2px}

/* Chiffres clés sous le hero */
.chiffres{list-style:none;margin:clamp(40px,6vw,64px) 0 0;padding:0;display:grid;gap:1px;background:rgba(91,141,239,.22);border:1px solid rgba(91,141,239,.22);border-radius:16px;overflow:hidden}
@media (min-width:720px){.chiffres{grid-template-columns:repeat(3,1fr)}}
.chiffres li{background:rgba(8,22,52,.78);padding:18px 20px;display:grid;gap:2px}
.chiffres b{font-size:1.6rem;font-weight:800;font-variation-settings:"wdth" 70;color:#fff}
.chiffres span{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:#8FA3C8;text-transform:uppercase}

/* ---------- Bandeau ---------- */
.bandeau{transform:none;margin:0;background:var(--nuit);border-block:1px solid rgba(91,141,239,.3);box-shadow:none;padding:14px 0}
.bandeau-piste{font-family:var(--mono);font-weight:600;font-size:clamp(.95rem,2vw,1.15rem);letter-spacing:.12em;color:#D5DEEF}
.bandeau-piste span::after{content:"✦"}

/* ---------- Cartes : halo qui suit la souris ---------- */
.service,.offre,.suivi,.projet,.info-carte{position:relative;isolation:isolate}
.service::after,.offre:not(.vedette)::after,.projet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:-1;
  background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),rgba(27,75,155,.10),transparent 60%)}
.service:hover::after,.offre:hover::after,.projet:hover::after{opacity:1}
.service,.offre,.projet,.suivi{transition:border-color .3s,box-shadow .3s,transform .3s}
.service:hover,.offre:not(.vedette):hover,.projet:hover{border-color:rgba(27,75,155,.45);box-shadow:0 0 0 1px rgba(27,75,155,.15),0 24px 50px -30px rgba(15,37,80,.45)}
.projet:hover{transform:translateY(-4px)}
.service svg{width:44px;height:44px;padding:9px;border-radius:12px;background:linear-gradient(160deg,#E4ECF9,#F6F8FC);box-shadow:inset 0 0 0 1px rgba(27,75,155,.18)}
.service h3::before{content:attr(data-n);display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--gris);font-weight:600;margin-bottom:6px}
.offre,.suivi,.service,.projet{border-radius:18px}
.offre.vedette::before{border-radius:21px}
.prix strong{font-variant-numeric:tabular-nums}

/* ---------- Fondateurs ---------- */
.fondateurs{background:radial-gradient(70% 90% at 100% 0%,rgba(91,141,239,.35),transparent 60%),var(--email)}
.fondateurs::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/40px 40px;-webkit-mask-image:linear-gradient(to left,#000,transparent 70%);mask-image:linear-gradient(to left,#000,transparent 70%)}
.fondateurs .wrap{position:relative}
.fondateurs .index{color:var(--safran)}
.compteur{background:rgba(8,22,52,.7);border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.compteur .chiffre{font-variant-numeric:tabular-nums}
/* Portes libres : elles s'ouvrent à l'arrivée, puis une lueur dorée s'allume */
.porte:not(.prise)::before{transition:transform 1.6s cubic-bezier(.6,0,.2,1)}
.porte:not(.prise) + .porte:not(.prise)::before{transition-delay:.3s}
.attente .porte:not(.prise)::before{transform:rotateY(0)}
.porte:not(.prise){transition:box-shadow 1.4s ease .5s}
.lueur .porte:not(.prise){box-shadow:0 0 22px 4px rgba(255,200,90,.6),0 0 60px 12px rgba(242,182,50,.28);animation:halo-porte 3.2s ease-in-out 2.2s infinite}
@keyframes halo-porte{50%{box-shadow:0 0 30px 8px rgba(255,200,90,.85),0 0 90px 20px rgba(242,182,50,.4)}}

/* ---------- Rebranding ---------- */
.rebrand{background:radial-gradient(60% 70% at 0% 0%,rgba(27,75,155,.45),transparent 60%),var(--abysse)}
.cas{border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.cas:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(242,182,50,.5),0 30px 60px -30px rgba(0,0,0,.7)}

/* ---------- Étapes ---------- */
.etape::before{border-radius:12px;font-family:var(--mono);font-size:1rem}
.etapes::before{height:2px;box-shadow:0 0 12px rgba(242,182,50,.7)}

/* ---------- Propriété, avis, FAQ ---------- */
.cle{background:var(--blanc);border:1px solid var(--trait);border-left:3px solid var(--zellige);border-radius:4px 14px 14px 4px;padding:18px 20px}
.avis-vide{background:rgba(255,255,255,.6)}
.faq summary::after{border-color:var(--email)}
.faq details[open] summary{color:var(--email)}

/* ---------- Contact ---------- */
.contact{background:radial-gradient(60% 80% at 50% 120%,rgba(27,75,155,.6),transparent 70%),var(--abysse);text-align:center}
.contact h2,.contact .intro{margin-inline:auto}
.contact h2{font-size:clamp(2.2rem,6vw,3.8rem);max-width:16ch}
.contact .actions{justify-content:center}
.contact .index{justify-content:center}
footer{background:var(--abysse)}
footer .wrap{border-top-color:rgba(91,141,239,.2)}
.lecture{height:2px;box-shadow:0 0 10px rgba(242,182,50,.8)}


/* =========================================================
   SITE EN PLUSIEURS PAGES
   ========================================================= */
.entete .top{position:relative}
.entete .nav a[aria-current="page"]{color:#fff}
.entete .nav a[aria-current="page"]::after{transform:scaleX(1)}
.top-actions{display:flex;align-items:center;gap:10px}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;padding:0}
.menu-btn svg{width:22px;height:22px}
@media (min-width:860px){.menu-btn{display:none}}
@media (max-width:859px){
  .entete .nav.ouvert{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--abysse);padding:6px var(--gouttiere) 18px;border-bottom:1px solid rgba(91,141,239,.25);box-shadow:0 30px 40px -20px rgba(0,0,0,.6)}
  .entete .nav.ouvert a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.1rem}
  .entete .nav.ouvert a::after{display:none}
  .entete .nav.ouvert a[aria-current="page"]{color:var(--safran)}
}
@media (max-width:420px){.top .btn-wa .lib{display:none}.top .btn-wa{padding:.6em .8em}}

/* En-tête de page (pages intérieures) */
.page-hero{padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px)}
.page-hero .sol{height:75%;opacity:.75}
.page-hero h1{font-size:clamp(2.4rem,6.4vw,4.2rem);font-weight:800;font-variation-settings:"wdth" 66;line-height:1;max-width:17ch;color:#fff}
.page-hero .intro{color:#C8D3EA;font-size:1.1rem;margin-top:18px}
.page-hero + section,.page-hero + .sombre{border-top:0}

/* Lien « voir la suite » */
.lien-suite{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--email);text-decoration:none}
.lien-suite::after{content:"→";transition:transform .25s}
.lien-suite:hover{color:var(--nuit)}
.lien-suite:hover::after{transform:translateX(5px)}
.sombre .lien-suite{color:var(--safran)}
.sombre .lien-suite:hover{color:#fff}

/* Aperçu des tarifs (accueil) */
.apercu-prix{display:grid;gap:14px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mini-offre{position:relative;isolation:isolate;background:var(--blanc);border:1px solid var(--trait);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--nuit);transition:border-color .3s,box-shadow .3s,transform .3s}
.mini-offre::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:-1;background:radial-gradient(300px circle at var(--x,50%) var(--y,0%),rgba(27,75,155,.10),transparent 60%)}
.mini-offre:hover{color:var(--nuit);border-color:rgba(27,75,155,.45);transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(15,37,80,.45)}
.mini-offre:hover::after{opacity:1}
.mini-offre .nom{font-weight:700;font-variation-settings:"wdth" 85;font-size:1.1rem}
.mini-offre .prix{margin:0}
.mini-offre .prix strong{font-size:2.4rem}
.mini-offre em{font-style:normal;color:var(--gris);font-size:.93rem}
.mini-offre.vedette{border:2px solid var(--email)}
.mini-offre .badge{align-self:flex-start;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:var(--email);color:#fff;border-radius:6px;padding:3px 8px}

/* Accueil : bloc rebranding en deux colonnes */
.rebrand-apercu{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media (min-width:900px){.rebrand-apercu{grid-template-columns:1fr 1fr}}
.rebrand-apercu .cas{max-width:520px}

/* Contact */
.contact-cartes{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.contact-cartes .service{text-decoration:none;color:var(--nuit)}
.contact-cartes a.service:hover{color:var(--nuit)}
.contact-cartes .service p strong{color:var(--email)}

/* Pied de page en plusieurs colonnes */
.pied-liens{display:flex;flex-wrap:wrap;gap:10px 22px}
.pied-liens a{color:#D5DEEF;text-decoration:none}
.pied-liens a:hover{color:#fff;text-decoration:underline}

/* Rebranding : planche d'identité à côté de l'offre */
.planche{margin:0;border-radius:22px;padding:18px;background:linear-gradient(160deg,rgba(27,75,155,.28),rgba(8,22,52,.6));border:1px solid rgba(91,141,239,.3);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.planche-tete{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA3C8;padding:2px 4px 10px}
.planche-tete span:last-child{color:var(--safran)}
.planche-logo{width:100%;height:auto;border-radius:14px;background:linear-gradient(rgba(91,141,239,.08) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(91,141,239,.08) 1px,transparent 1px) 0 0/20px 20px,rgba(8,22,52,.55)}
.planche-bas{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 4px 2px}
.nuancier{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.nuancier li{display:grid;justify-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#8FA3C8}
.nuancier li::before{content:"";width:38px;height:38px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.specimen{display:flex;align-items:center;gap:12px;margin:0;color:#B9C6E0;font-size:.82rem;line-height:1.3}
.specimen b{font-size:2.4rem;font-weight:800;font-variation-settings:"wdth" 66;color:#fff;line-height:1}
/* Animation : les guides se tracent, puis le logo apparaît */
.planche.prete .guides *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.planche.prete .guides circle[stroke-dasharray]{stroke-dasharray:1}
.planche.prete .marque,.planche.prete .cotes,.planche.prete .nuancier li,.planche.prete .specimen{opacity:0;transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.planche.prete .marque{transform:scale(.85);transform-origin:200px 140px}
.planche.vu .guides *{stroke-dashoffset:0}
.planche.vu .marque{opacity:1;transform:none;transition-delay:.9s}
.planche.vu .cotes{opacity:1;transition-delay:1.3s}
.planche.vu .nuancier li,.planche.vu .specimen{opacity:1}
.planche.vu .nuancier li:nth-child(1){transition-delay:1.1s}
.planche.vu .nuancier li:nth-child(2){transition-delay:1.2s}
.planche.vu .nuancier li:nth-child(3){transition-delay:1.3s}
.planche.vu .nuancier li:nth-child(4){transition-delay:1.4s}
.planche.vu .specimen{transition-delay:1.5s}