/* 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: 8px;
  --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;
}

/* Thème sombre : cards unifiées (sauf celles de services.html qui ont un modificateur card--) */
:root[data-theme="dark"] .card:not([class*="card--"]) {
  background-color: #44686d;
  color: #ffffff;
}

:root[data-theme="dark"] .card:not([class*="card--"]) a {
  color: #ffffff;
}

/* Thème sombre : garder un fond clair derrière le logo du header */
:root[data-theme="dark"] .site-header .brand {
  background-color: #E4E9CD;
  border-radius: 4px;
}


@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 {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  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));
  background-attachment: fixed;
  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.45rem, 2.0vw, 1.6rem);
  line-height: 1.12;
}

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

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

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

.hero h1 {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
}

.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: var(--radius);
  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)
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .brand {
    background-color: #E4E9CD;
    border-radius: 0.5rem;
  }
}


.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: 8px;
    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 en thème sombre === */

/* Cas 1 : thème sombre activé via data-theme="dark" */
[data-theme="dark"] .hero {
  background: #526b6e;
}

/* Cas 2 : thème sombre "auto" via prefers-color-scheme: dark
   (quand <html> n'a pas data-theme="light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background: #526b6e;
  }
}

/* === Cartes d'accueil en thème sombre (dans le HERO) === */

/* Thème sombre via data-theme="dark" */
[data-theme="dark"] .hero .card {
  background: #526b6e;
  /* même ton que le héro */
  color: var(--ink-900);
  /* texte clair (palette dark) */
}

/* Thème sombre auto via prefers-color-scheme: dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .card {
    background: #526b6e;
    color: var(--ink-900);
  }
}

.hero-availability {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  display: block;
  font-size: 0.95rem;
  line-height: 1.4;
  border-radius: var(--radius);
  background: #f4b740;
  /* ou #e07a5f #f4b740*/
  color: #1b1b1b;
  font-weight: 600;
}


.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 40px;
  align-items: center
}

/* Hero responsive : texte puis image en pile sur mobile/tablette */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-card {
    max-width: 480px;
    /* optionnel : limite pour ne pas faire “plein écran” */
    margin: 0 auto;
    /* centre la figure */
  }
}


.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: var(--radius);
  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)
}

/* Home uniquement : 3 cards sur toute la largeur en grand écran */
@media (min-width: 1000px) {
  body.home .cards {
    grid-template-columns: repeat(3, 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
}

/* === Cartes de la page d'accueil en thème sombre
   (même fond que le HERO) === */

/* 1) Thème sombre activé via le bouton ◐ */
[data-theme="dark"] body.home .cards .card {
  background: #526b6e;
  /* même ton que le hero */
  color: var(--ink-900);
  /* texte clair de la palette dark */
}

/* 2) Thème sombre automatique (OS en dark, pas de data-theme="light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.home .cards .card {
    background: #526b6e;
    color: var(--ink-900);
  }
}

/* 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: 6px;
  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;
  }
}

/* Nouveaux styles pour la page À propos (v2) */
.highlight-box {
  background-color: var(--muted);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;
}

[data-theme="dark"] .highlight-box {
  background-color: rgba(255, 255, 255, 0.05);
}

.cta-section {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--arc-green);
  color: white;
  border-radius: var(--radius);
  margin-top: 3rem;
}

.cta-section h2 {
  color: white;
  margin-bottom: 1rem;
}

.cta-section p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-section .btn-primary {
  background: white;
  color: var(--arc-green);
}

.cta-section .btn-primary:hover {
  background: var(--arc-beige);
  color: var(--ink-900);
}