/* ==========================================================================
   Habillage du site vitrine (visiteurs non connectés) — octobre 2026.
   Chargée par layouts/main.php APRÈS fond.css, pour les visiteurs
   seulement : l'espace client (body.has-sidebar) n'en reçoit que le fond.
   Retirer la balise <link> de main.php suffit à revenir à l'ancien rendu.
   ?v= = date de modification du fichier : rien à bumper à la main.
   ========================================================================== */

:root{
  --ink:#0E1B22; --body:#4A5862; --muted:#65737D;
  --nuit:#061B23; --nuit-2:#0A2C38; --ciel:#5CCFEA;
  --shadow-s:0 1px 2px rgba(14,27,34,.04),0 8px 22px -14px rgba(14,27,34,.14);
  --shadow-m:0 18px 44px -20px rgba(11,60,78,.32),0 4px 12px -6px rgba(14,27,34,.08);
  --trame-claire:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
}

/* Fond gris-bleu, teinte du haut de page et trame : fond.css (commun avec
   l'espace client). */

.nav{background:rgba(255,255,255,.9);border-color:rgba(210,221,228,.8);
  box-shadow:0 1px 2px rgba(14,27,34,.04),0 12px 32px -18px rgba(11,60,78,.35)}
.breadcrumb{background:transparent;border-bottom:0}
.secteur-hero,.secteur-hero--demo{background:transparent}
/* Halos propres à /contact (voir sa vue), redondants avec la teinte globale. */
body .secteur-hero--contact,body .contact-sec{background:none}

.eyebrow{background:#fff;color:var(--accent-deep);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(14,27,34,.04)}

/* ---- Boutons ---------------------------------------------------------------
   Le .btn de base porte une ombre orangée héritée de l'ancienne charte, y
   compris au survol des boutons secondaires. Les variantes (.btn-ghost,
   .btn-dark, celles déclarées dans les vues…) gardent leur fond. */
.btn-accent,.btn:not([class*="btn-"]){background:var(--accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-accent:not(:disabled):hover,.btn:not([class*="btn-"]):not(:disabled):hover{background:var(--accent-deep);
  box-shadow:0 14px 28px -12px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn-ghost{box-shadow:var(--shadow-s)}
.btn-ghost:hover{box-shadow:var(--shadow-m)}

/* ---- Cartes : mieux détachées du fond --------------------------------------
   « body » en tête : certaines vues (guides, cas pratiques, fonctionnalités)
   redéclarent leurs cartes dans un <style> placé après cette feuille. */
body .feat,body .how-step,body .price-card,body .guide-card,body .cp-carte,body .fonc-card,
body .tech-card,body .card{border-color:var(--line);box-shadow:var(--shadow-s)}
body .feat:hover,body .how-step:hover,body .price-card:hover,body .guide-card:hover,body .cp-carte:hover,
body .tech-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow-m)}
body .fonc-check{background:var(--accent-soft)}

.feat .fic{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;
  box-shadow:0 10px 20px -10px color-mix(in srgb,var(--accent) 85%,transparent)}
.how-step .ic{background:var(--accent-soft);color:var(--accent-deep)}
.how-step .n{display:inline-block;background:var(--accent-soft);color:var(--accent-deep);padding:3px 9px;border-radius:999px}

.sec-alt{background:#fff;border-color:var(--line)}

.price-card.popular{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 70%,#fff),#fff 38%);
  border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),var(--shadow-m)}

/* ---- Bandeaux sombres (chiffres clés, appel final) ------------------------ */
.band,.cta-final{background:
  radial-gradient(60% 90% at 100% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),
  radial-gradient(50% 80% at 0% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
  linear-gradient(150deg,var(--nuit-2),var(--nuit));
  box-shadow:0 30px 70px -30px rgba(6,27,35,.6)}
.band::after,.cta-final::after{width:auto;height:auto;inset:0;top:0;right:0;border-radius:0;
  background:none;background-image:var(--trame-claire);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(70% 90% at 80% 10%,#000,transparent 75%);
  mask-image:radial-gradient(70% 90% at 80% 10%,#000,transparent 75%)}

/* ---- Pied de page clair ----------------------------------------------------
   Essayé en bleu nuit le 2026-10-29, remis en clair à la demande de Gomes. */
footer{background:#fff;border-top:1px solid var(--line);padding:44px 0 56px}
footer .foot-links a{transition:color .15s}
footer .foot-links a:hover{color:var(--accent-deep)}

/* ==========================================================================
   PAGE D'ACCUEIL — même fond que les pages intérieures (fond.css)
   Un hero bleu nuit a été essayé le 2026-10-29 puis retiré à la demande de
   Gomes : il jurait avec la barre de menu blanche.
   ========================================================================== */
.hero .blob{display:none}
.hero .stage::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:50%;left:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%);
  pointer-events:none}
@media (max-width:560px){
  .hero .fc2{right:6px}
}

/* ---- Vidéo de présentation : cadre en dégradé ---------------------------- */
.video-cadre{padding:8px;border-radius:28px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--nuit-2) 70%);
  box-shadow:0 40px 80px -36px rgba(6,27,35,.55)}
.video-cadre video{display:block;width:100%;border-radius:20px;background:#000}

/* ---- Secteurs sur bande blanche ------------------------------------------- */
.sec-blanche{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- « Parlons de votre projet » : carte horizontale --------------------- */
.contact-carte{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 40px;box-shadow:var(--shadow-s);
  position:relative;overflow:hidden}
.contact-carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),#FF9E45)}
.contact-carte h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:800;margin:12px 0 6px}
.contact-carte p{margin:0;max-width:52ch}
@media (max-width:640px){
  .contact-carte{padding:28px 24px;text-align:center;justify-content:center}
  .contact-carte .btn{width:100%}
}