/* ArcTan° multipage — palette validée */
:root{
  --arc-green:#1C8F79;
  --arc-beige:#E4E9CD;
  --ink-900:#0A1516;
  --ink-800:#112325;
  --ink-700:#193336;
  --ink-600:#254549;
  --ink-400:#5A6D70;
  --ink-200:#A6B4B6;
  --paper:#efefeb;
  --muted:#F2F5F3;
  --link-color:#0B4F63;   /* bleu-vert lisible sur fond clair */
  --link-hover:#06333E;   /* survol un peu plus sombre */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --paper:#0F515F;
  --muted:#0B3A45;
  --ink-900:#E9F2F1;
  --ink-800:#D7E6E4;
  --ink-700:#C4D6D4;
  --ink-600:#AFC3C1;
  --ink-400:#7D8E8C;
  --ink-200:#5F6E6C;
  --link-color:#E4E9CD;  /* beige très lisible sur ton bleu */
  --link-hover:#FFFFFF;  /* survol = blanc franc */
}
/* Cartes "claires" : garder un texte foncé même en thème sombre */
[data-theme="dark"] .card{
  color:#0A1516; /* noir/anthracite lisible sur fond pastel */
}

/* Et garder aussi les couleurs de liens de la version claire */
[data-theme="dark"] .card a{
  color:#0B4F63;
}
[data-theme="dark"] .card a:hover{
  color:#06333E;
}


@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F515F;
    --muted:#0B3A45;
    --ink-900:#E9F2F1;
    --ink-800:#D7E6E4;
    --ink-700:#C4D6D4;
    --ink-600:#AFC3C1;
    --ink-400:#7D8E8C;
    --ink-200:#5F6E6C;
    --link-color:#E4E9CD;  /* beige très lisible sur ton bleu */
    --link-hover:#FFFFFF;  /* survol = blanc franc */
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink-900); background:linear-gradient(180deg,var(--paper),var(--muted)); line-height:1.55; letter-spacing:.01em}

a{
  color:var(--link-color);
  text-decoration:underline;
  text-decoration-thickness:0.06em;
  text-underline-offset:0.15em;
}

a:hover{
  color:var(--link-hover);
}


h1,
h2,
h3,
h4{
  font-family:"DM Sans", Manrope, system-ui, sans-serif;
  margin:0 0 .5rem;
}

/* H1 plus discret, surtout sur desktop */
h1{
  font-size:clamp(1.6rem, 2.2vw, 2.1rem);
  line-height:1.12;
}

/* H2 en soutien du H1, sans prendre toute la place */
h2{
  font-size:clamp(1.3rem, 1.9vw, 1.7rem);
}

/* H3 pour les sous-sections */
h3{
  font-size:clamp(1.1rem, 1.6vw, 1.4rem);
}

/* H4 légèrement au-dessus du texte courant */
h4{
  font-size:1rem;
  font-weight:600;
}

.hero h1{
  font-size:clamp(1.9rem, 2.8vw, 2.5rem);
}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-700)}
.micro{font-size:.85rem; color:var(--ink-400)}

.container{max-width:1100px; margin:0 auto; padding:0 20px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:999px; text-decoration:none; border:1px solid transparent; font-weight:700; transition:.2s}
.btn-primary{background:var(--arc-green); color:white; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{border-color:var(--ink-200); color:var(--ink-800); background:transparent}
.btn-outline:hover{background:var(--arc-beige)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-600)}
.btn-ghost:hover{background:rgba(0,0,0,.05)}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid rgba(0,0,0,.06)}
@media (prefers-color-scheme: dark){
  .site-header{background:rgba(15,28,29,.75); border-color:rgba(255,255,255,.06)}
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; color:var(--ink-900); text-decoration:none}
.nav-toggle{display:none; background:transparent; border:0; color:var(--ink-900)}
.nav-toggle svg{
  width:24px;
  height:24px;
}
.nav-menu{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0}
.nav-menu a{color:var(--ink-800); text-decoration:none; padding:.55rem .8rem; border-radius:999px}
.nav-menu a.active{background:var(--arc-beige)}
.nav-menu a:hover{background:var(--arc-beige)}

@media (max-width:880px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.4rem;
  }

  .nav-menu{
    position:absolute;
    right:16px;
    top:64px;
    background:var(--paper);
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:min(90vw,280px);
    display:none;              /* caché par défaut */
    box-shadow:var(--shadow);
    z-index:60;                /* au-dessus du header */
  }

  .nav-menu a,
  .nav-menu .btn{
    width:100%;
    text-align:left;
  }

  .nav-menu .btn-primary{
    justify-content:center;
  }

  .nav-menu.show{
    display:flex;              /* affiché quand on ajoute .show */
  }
}


.hero{
  position: relative;                      /* référence pour le carrousel */
  padding: clamp(50px,7vw,90px) 0;
  overflow: hidden;                        /* coupe tout ce qui dépasse */
  min-height: 60vh;
  background: #E4E9CD;  /* section héro vraiment claire */                        /* optionnel : donne de la hauteur à la section */
}

.hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:40px; align-items:center}
.hero-text .cta{display:flex; gap:12px; margin:18px 0 8px}
.badges{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:14px 0 0}
.badges li{background:var(--arc-beige); padding:.35rem .6rem; border-radius:999px; font-weight:600; color:#2c3b3d}
.hero-card{margin:0; background:linear-gradient(160deg,var(--arc-beige),#fff); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.hero-card figcaption{padding:10px 14px; color:var(--ink-400); font-size:.85rem}
.hero-card img{display:block; width:100%; height:auto}

.section{padding:clamp(42px,6vw,72px) 0}
.section.alt{background:linear-gradient(180deg,var(--arc-beige),transparent)}
.grid{display:grid; gap:20px}
.cards{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.card{background:var(--paper); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card .icon{width:40px; height:40px; display:grid; place-items:center; margin-bottom:10px; background:var(--arc-beige); border-radius:8px}

/* Variantes de couleur par service (page Services) */
.card--photo {
  background:#D3E4E8; 
  color: #0f515f;  /*  */
}
.card--photo .icon {
  background:#42abbd;   /*  */
}

.card--montages {
  background:#FDE7B4;   
  color: #453b24;  /*  */
}
.card--montages .icon{
  background:#F3B340;   
}

.card--zvi {	
  background:#f5ddd5;
  color: #452f28;  /*  */   
}
.card--zvi .icon{
  background:#E5785C;  
}

.card--ombres {
  background:#DFE7EA;
  color: #415359;  /*  */   
}
.card--ombres .icon{
  background:#91AAB0;  
}

.card--model3d {
  background:#CBE7E0;
  color: #36544d;  /*  */     
}
.card--model3d .icon{
  background:#39bda3;   
}
.card--visites {
  background:#F5FBF8;
  color: #1b613e;  /*  */    
}
.card--visites .icon{
  background:#1C8F79;
      
}
.card--qgis {
  background:#F7F8EA;
  color: #58594b;  /*  */      
}
.card--qgis .icon{
  background:#58594b;  
}
.card--expertise {
  background:#FBE4EA;
  color: #415359;  /*  */      
}
.card--expertise .icon{
  background:#91AAB0;   
}

.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0; list-style:none}
.timeline li{background:var(--paper); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:18px}
.timeline h4{margin:0 0 .2rem; font-size:1.05rem}
@media (max-width:920px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.timeline{grid-template-columns:1fr}}

.gallery{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.gallery .shot{
  margin:0;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}

.gallery img{
  display:block;
  width:100%;
  height:auto;
}

.gallery figcaption{
  padding:10px 12px;
  font-size:.92rem;
  color:var(--ink-600);
}

/* Adaptation responsive */
@media (max-width:960px){
  .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .gallery{
    grid-template-columns:1fr;
  }
}


.contact-form{background:var(--paper); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.form-grid{grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1 / -1}
label{display:grid; gap:6px; font-weight:700; color:var(--ink-700)}
input, textarea{width:100%; border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:.85rem .9rem; font:inherit; background:linear-gradient(180deg,#fff,#fafcfa); color:inherit}
input:focus, textarea:focus{outline:2px solid color-mix(in hsl, var(--arc-green) 60%, white 40%); outline-offset:2px}

.site-footer{padding:38px 0; border-top:1px solid rgba(0,0,0,.08); background:var(--paper)}
.footer-grid{display:grid; grid-template-columns:2fr 2fr 1fr; gap:18px; align-items:center}
.brandline{display:flex; align-items:center; gap:10px}
.foot-links{display:flex; gap:10px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.foot-links a{color:var(--ink-700); text-decoration:none; padding:.35rem .7rem; border-radius:999px}
.foot-links a:hover{background:var(--arc-beige)}

.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}

/* 0) Carrousel masqué par défaut (mobile & pages non-home) */
.bg-carousel {
  display: none;
}

/* 1) Activer ET contraindre le carrousel dans .hero uniquement en ≥ 768px */
@media (min-width: 768px){
  body.home .hero .bg-carousel,
  body[data-page="home"] .hero .bg-carousel{
    position: absolute;   /* reste dans .hero */
    inset: 0;             /* colle aux bords internes de .hero */
    z-index: 0;           /* passe derrière le contenu */
    display: block;
    overflow: hidden;
    pointer-events: none; /* ne capte aucun clic */
  }

  .hero .bg-carousel .slide{
    position: absolute;
    inset: -2%; 
    opacity: 0;
    animation: bgfade 32s infinite; /* 4 images × 8s */
  }
  .hero .bg-carousel .slide:nth-child(1){ animation-delay: 0s;  }
  .hero .bg-carousel .slide:nth-child(2){ animation-delay: 8s;  }
  .hero .bg-carousel .slide:nth-child(3){ animation-delay: 16s; }
  .hero .bg-carousel .slide:nth-child(4){ animation-delay: 24s; }

  .hero .bg-carousel .slide > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    opacity: 0.5;
    transform: scale(1.05);   /* “zoom” léger pour être sûr de ne voir aucun bord */ 
  }

  .hero .bg-carousel .bg-gradient{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,143,121,.15), rgba(0,0,0,.35));
  }
}

/* 2) Assurer que le contenu passe bien devant */
.hero > :not(.bg-carousel){
  position: relative;
  z-index: 1;
}

/* 3) Animation de fondu */
@keyframes bgfade {
  /* fade in ~1.28s, visible ~6s, fade out ~1.28s (sur 8s) */
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Footer : mise en colonne sur smartphone */
@media (max-width: 880px){
  .site-footer{
    padding:24px 0 32px;
  }

  .footer-grid{
    grid-template-columns:1fr;   /* une seule colonne */
    gap:10px;
    text-align:center;
    justify-items:center;        /* centre les éléments dans la grille */
  }

  .brandline{
    justify-content:center;
    flex-wrap:wrap;
    text-align:center;
  }

  .brandline img{
    margin-bottom:4px;
  }

  .foot-links{
    justify-content:center;      /* boutons centrés */
  }

  .foot-links li{
    margin-bottom:4px;
  }

  .micro{
    text-align:center;
  }
}

/* Header et menu en mode sombre (forcé par le bouton ◐) */
[data-theme="dark"] .site-header{
  background:rgba(15,81,95,.9);         /* fond vraiment sombre */
  border-bottom-color:rgba(255,255,255,.08);
}

/* Couleur des liens du menu en mode sombre (grand écran) */
[data-theme="dark"] .nav-menu a{
  color:var(--ink-900);                 /* texte clair issu de la palette dark */
}

/* État survol / actif : fond plus sombre pour garder du contraste */
[data-theme="dark"] .nav-menu a.active,
[data-theme="dark"] .nav-menu a:hover{
  background:rgba(28,143,121,.35);      /* halo vert ArcTan° transparent */
}

/* ===== Page "carte de visite" ===== */

.cv-hero{
  padding:clamp(50px,6vw,80px) 0 40px;
  background:linear-gradient(135deg, var(--arc-beige), #ffffff);
}

.cv-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:32px;
  align-items:flex-start;
}

.cv-intro p{
  max-width:38rem;
}

.cv-actions{
  background:var(--paper);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}

.cv-actions h2{
  margin-top:0;
  margin-bottom:.4rem;
}

.cv-actions-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.cv-actions .btn{
  width:100%;
}

.cv-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  align-items:flex-start;
}

.cv-block{
  background:var(--paper);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
}

.cv-block ul{
  padding-left:1.2rem;
  margin:0;
}

.cv-block li{
  margin-bottom:4px;
}

.cv-meta{
  font-size:.92rem;
  color:var(--ink-600);
}

/* Responsive */
@media (max-width:880px){
  .cv-layout{
    grid-template-columns:1fr;
  }

  .cv-columns{
    grid-template-columns:1fr;
  }

  .cv-actions{
    order:-1; /* le bloc contact passe au-dessus sur mobile */
  }
}