:root{
  /* Palette & tokens globaux */
  --brand:#ff7a00;        /* ORANGE accent */
  --accent: var(--brand); /* alias pour focus, etc. */
  --ink:#0d1b2a;          /* BLEU NUIT (texte global) */
  --text: var(--ink);     /* alias utilisé par la section Services */
  --muted:#5b6b7c;        /* texte secondaire */
  --line:#e6eaf0;         /* séparateurs légers */
  --card:#f7f9fc;         /* blocs en contraste doux */
  --white:#ffffff;

  /* Contours/anneaux (lisible sur fond clair) */
  --ring: rgba(13,27,42,.12);

  /* Teintes packs (pour CUSTOM argenté) */
  --silver: #b7c0c9;
  --gold: #e0b959; /* conservé si besoin plus tard */
  --bronze: #c67c48; /* conservé si besoin plus tard */
}

*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
body{margin:0;background:var(--white);color:var(--ink);line-height:1.6}
img{max-width:100%;height:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 1rem}
.skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--white);color:var(--ink);padding:.5rem .75rem;border-radius:.5rem;outline:2px solid var(--brand)}

/* Header (logo combo + nav fine) */
.site-header{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:10}
.brandbar{display:flex;align-items:center;justify-content:center;padding:.6rem 0}
.brandbar img{display:block;height:60px}
@media(min-width:720px){.brandbar img{height:80px}}
.navline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.menu{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;padding:.5rem 0}
.menu a{color:var(--ink);text-decoration:none;padding:.35rem .7rem;border-radius:.5rem}
.menu a[aria-current="page"],.menu a:hover{background:var(--card)}

/* Hero carousel (CSS-only, scroll-snap) */
.carousel{margin:1rem auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.track .slide{min-width:100%;scroll-snap-align:start}
.track .slide img{display:block;width:100%;height:44vh;object-fit:cover}
@media(min-width:900px){.slide img{height:56vh}}
.dots{display:flex;gap:.4rem;justify-content:center;padding:.6rem;background:transparent !important;}
.dots a{width:.5rem;height:.5rem;border-radius:50%;background:var(--line);display:inline-block}
.dots a:focus,.dots a:hover{outline:2px solid var(--brand)}

/* Sections & cards */
.section{padding:1.4rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem}

/* Grilles globales */
.grid{display:grid;gap:1rem}
@media(min-width:720px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}}

/* Typography */
h1{font-size:clamp(1.4rem,3vw,2.2rem);margin:.2rem 0 .6rem}
h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:.2rem 0 .4rem}
.lead{color:var(--muted)}
.pill{display:inline-block;padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem}

/* Forms */
form{display:grid;gap:.6rem}
label{font-weight:600}
input,textarea{width:100%;padding:.7rem;border-radius:.6rem;border:1px solid var(--line);background:#fff;color:var(--ink)}
.hint{font-size:.9rem;color:var(--muted)}

/* Boutons globaux (remplis par défaut) */
.btn{display:inline-block;padding:.6rem .9rem;border-radius:.6rem;background:var(--brand);color:#1a1205;text-decoration:none;font-weight:700;border:0}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:2rem;background:#fff}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 0;color:var(--muted)}

/* Utilities */
.center{text-align:center}
.hide{position:absolute!important;left:-9999px}

/* =========================
   SECTION: Présentation des services
   ========================= */
.services{
  background: var(--bg, var(--white));
  color: var(--text);
  padding: clamp(2rem, 3vw, 4rem) 1rem;
}
.services .container{max-width: 1100px; margin: 0 auto;}
.services .intro{ text-align:center; margin-bottom: clamp(1.25rem, 2.5vw, 2rem);} 
.services .intro h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: .3px; margin: 0 0 .25rem;}
.services .intro .subtitle{ color: var(--muted); margin: 0; }

/* Grille spécifique à la section services */
.services .grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1rem);
  align-items: stretch;
}

.services .plan{
  background: linear-gradient(180deg, var(--card), rgba(0,0,0,.08));
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.services .plan__header{ display:flex; flex-direction: column; align-items:center; text-align:center; gap: .5rem; margin-bottom: .75rem;}
.services .plan__title{ font-size: 1.25rem; margin: .15rem 0 0; letter-spacing: .5px;}
.services .plan__tagline{ color: var(--muted); margin: 0; font-size: .95rem;}

/* ===== Logo: cercle + image ===== */
.services .plan__logo{
  width: 72px; height:72px; border-radius:50%;
  display:grid; place-items:center; position:relative; isolation:isolate;
  background: var(--card); /* valeur par défaut neutre */
}
.services .plan__logo::before{
  content:""; position:absolute; inset:-4px; border-radius: inherit;
  border: 1px solid var(--ring);
  /* simple fallback compatible partout */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Logos toujours naturels (sans filtres), même si un ancien cache traîne */
.services .plan__logo img{
  width: 44px;
  height: auto;
  display:block;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Variantes de cercle :
   - SKYVIEW : blanc pur
   - PRO : bleu nuit (var(--ink))
   - CUSTOM : argenté (var(--silver) + léger relief) */
.services .plan__logo.ring--skyview{
  background: #ffffff;
}
.services .plan__logo.ring--skyview::before{
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

.services .plan__logo.ring--pro{
  /* Fallback simple (plein) */
  background: var(--ink);
  /* Surcouche douce si supportée */
  background:
    radial-gradient(65% 65% at 35% 30%, rgba(255,255,255,.12), transparent 60%),
    var(--ink);
}
.services .plan__logo.ring--pro::before{
  border-color: rgba(255,255,255,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.services .plan__logo.ring--custom{
  /* Fallback simple (argenté) */
  background: var(--silver);
  /* Relief léger si supporté */
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), rgba(0,0,0,.10)),
    var(--silver);
}
.services .plan__logo.ring--custom::before{
  border-color: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Listes */
.services .list{ list-style: none; padding: 0; margin: .25rem 0 0; display:flex; flex-direction: column; gap: .4rem;}
.services .list li{ background: rgba(255,255,255,.02); border: 1px dashed var(--ring); padding: .6rem .7rem; border-radius: 10px; font-size: .97rem;}
.services .list--common{ margin-top: .25rem;}
.services .list--common li{ display:flex; gap:.55rem; align-items: baseline;}
.services .v{ display:inline-grid; place-items:center; width: 1.15rem; height:1.15rem; border-radius: 6px; border: 1px solid var(--ring); font-weight: 700; font-size: .85rem; line-height:1;}

.services .muted{ color: var(--muted); }
.services .small{ font-size: .85rem; }

/* Boutons dans la section services (outline) */
.services .plan__cta{ margin-top: auto; display:flex; justify-content:center; padding-top: .9rem;}
.services .btn{
  appearance:none;
  border:1px solid var(--ring);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.services .btn:focus{ outline: 2px solid var(--accent); outline-offset: 3px;}
.services .btn:hover{ background: rgba(255,255,255,.04); border-color: rgba(0,0,0,.12); transform: translateY(-1px);}

.services .notes{ margin-top: 1rem; }

/* Réactivité (section services) */
@media (max-width: 980px){
  .services .grid{ grid-template-columns: 1fr; }
  .services .plan{ padding: 1rem; }
  .services .plan__logo{ width: 64px; height:64px; }
  .services .plan__logo img{ width: 40px; height:auto; }
}

/* ========================= */


/* ========================= */
/* Portfolio components below */
/* ========================= */

/* Grid + cards (scoped to the portfolio page) */
main[data-portfolio] .cards {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { main[data-portfolio] .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { main[data-portfolio] .cards { grid-template-columns: 1fr 1fr 1fr; } }

main[data-portfolio] .card {
  background: radial-gradient(120% 120% at 100% 0%, var(--card, #f7f9fc), #fff);
  border-radius: 16px;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--ink, #0b1420);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
main[data-portfolio] .card h2 { font-size: 20px; margin: 2px 0 0; color: var(--ink, #0b1420); }
main[data-portfolio] .card p { color: var(--muted, #6c7a89); margin: 0; font-size: 14.5px; }

/* Carousel (generic component) */
.carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000; /* fond neutre si image en cours de chargement */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  user-select: none;
  isolation: isolate;
}
.carousel .slides {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .45s ease;
  gap: 0;
}
.carousel .slide {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0;
  aspect-ratio: 16 / 10;   /* ajuste ici si besoin: 4/3, 3/2, 16/9... */
  overflow: hidden;
}

/* --- Solution 1: images en flux normal, pas d'absolu --- */
.carousel .slide img {
  position: static !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Navigation */
.carousel .nav-btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  border: none; background: rgba(10,14,20,.55);
  backdrop-filter: blur(6px);
  padding: 10px; border-radius: 50%; cursor: pointer; outline: none;
}
.carousel .nav-btn:hover { background: rgba(10,14,20,.72); }
.carousel .nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(92,200,255,.25); }
.carousel .nav-btn svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2.5; stroke-linecap: round; }
.carousel .prev { left: 10px; }
.carousel .next { right: 10px; }

/* Dots */
.carousel .dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px; z-index: 2;
  min-block-size: 24px;
}
.carousel .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer; }
.carousel .dot[aria-current="true"] { background: white; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(92vw, 1600px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0,0,0,.6);
}
.lightbox button { position: absolute; top: 16px; border: none; background: transparent; color: white; cursor: pointer; }
.lightbox .close { right: 16px; font-size: 28px; line-height: 1; padding: 8px 10px; }
.lightbox .arrow { top: 50%; translate: 0 -50%; padding: 12px; background: rgba(255,255,255,.06); border-radius: 999px; }
.lightbox .arrow:hover { background: rgba(255,255,255,.15); }
.lightbox .prev { left: 16px; }
.lightbox .next { right: 16px; }

/* Aides d'intégration */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#contact {
  scroll-margin-top: 110px;
}