/* ==========================================================================
   NAPSE-OI — feuille de style unique.

   Charte officielle (Z:\NAPSE-OI\ASSETS GRAPHIQUES) :
     NAVY #120137 · ATHENA #63E1FF · AZURE #359FFF · MIDNIGHT #4A09C4 · BLANC
   Dominante noire, accent unique ATHENA, police Raleway.

   Deux verrous tenus sur tout le site :
     - un seul accent (ATHENA). Aucune autre couleur vive nulle part.
     - un seul rayon d'angle : 0. Tout est net, rien n'est arrondi.
   ========================================================================== */

@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway.woff2') format('woff2-variations');
  font-weight: 100 900;          /* police variable : un seul fichier, toutes les graisses */
  font-display: swap;
  font-style: normal;
}

:root {
  /* Fonds : du noir vers le navy de marque. Jamais de noir pur, qui aplatit. */
  --noir:        #050308;
  --noir-2:      #0a0714;
  --navy:        #120137;

  --athena:      #63e1ff;        /* accent unique */
  --blanc:       #ffffff;
  --texte:       rgba(255, 255, 255, .74);
  --texte-faible:rgba(255, 255, 255, .52);
  --trait:       rgba(255, 255, 255, .12);

  --largeur:     1240px;
  --marge:       clamp(1.25rem, 4vw, 3rem);
  --rythme:      clamp(5rem, 11vw, 10rem);   /* densite visuelle basse : les sections respirent */

  /* Hauteur cumulee de la barre haute et de l'en-tete. Le hero la soustrait
     pour tenir exactement dans le premier ecran, bouton d'action compris. */
  --entete-h:    114px;
}
@media (max-width: 560px) { :root { --entete-h: 140px; } }   /* la barre haute passe sur deux lignes */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font: 400 clamp(1rem, .95rem + .3vw, 1.125rem)/1.65 'Raleway', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: var(--athena); }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); text-transform: uppercase; }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); letter-spacing: -.01em; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }

.conteneur { width: min(100% - (2 * var(--marge)), var(--largeur)); margin-inline: auto; }
.mesure    { max-width: 62ch; }

/* Lien d'evitement : visible uniquement au clavier. */
.saut-contenu {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--athena); color: var(--navy); padding: .8rem 1.2rem; font-weight: 700;
}
.saut-contenu:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--athena); outline-offset: 4px; }

/* --- Boutons ------------------------------------------------------------ */

.bouton {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 2.2rem;
  background: var(--athena);
  color: var(--navy);                       /* contraste 11:1, largement au-dessus de AA */
  font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: background .25s, transform .12s;
}
.bouton:hover { background: var(--blanc); }
.bouton:active { transform: translateY(1px); }

.bouton--ligne {
  background: transparent; color: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.bouton--ligne:hover { background: var(--blanc); color: var(--navy); box-shadow: none; }

.bouton--petit { padding: .6rem 1.3rem; font-size: .72rem; }

/* --- En-tete ------------------------------------------------------------ */

.barre-haute { border-bottom: 1px solid var(--trait); font-size: .78rem; }
.barre-haute__inner {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  align-items: center; justify-content: flex-end; padding: .6rem 0;
}
.barre-haute a { color: var(--texte-faible); text-decoration: none; white-space: nowrap; letter-spacing: .04em; }
.barre-haute a:hover { color: var(--athena); }

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 3, 8, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.entete__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: 72px;                              /* plafond a 80px : la nav ne mange pas la page */
}
.entete__logo { display: block; }
.entete__logo svg, .entete__logo img { width: clamp(130px, 14vw, 175px); height: auto; }

.nav ul { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .3rem 0;
  color: var(--blanc); text-decoration: none;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--athena); border-bottom-color: var(--athena); }

/* Menu mobile : une case a cocher masquee, aucun JavaScript. */
.nav-burger { display: none; width: 44px; height: 44px; position: relative; cursor: pointer; }
.nav-burger span, .nav-burger::before, .nav-burger::after {
  content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--blanc);
  transition: transform .25s, opacity .25s, top .25s;
}
.nav-burger::before { top: 15px; }
.nav-burger span    { top: 21px; }
.nav-burger::after  { top: 27px; }

@media (max-width: 900px) {
  .nav-burger { display: block; }
  .entete__inner { position: relative; }
  .nav {
    position: absolute; top: 100%; left: calc(-1 * var(--marge)); right: calc(-1 * var(--marge));
    background: var(--noir-2); border-bottom: 1px solid var(--trait);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav ul { flex-direction: column; gap: 0; padding: 0 var(--marge) 1rem; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--trait); font-size: .9rem; }
  .nav-bascule:checked ~ .nav { max-height: 70vh; overflow-y: auto; }
  .nav-bascule:checked ~ .nav-burger span   { opacity: 0; }
  .nav-bascule:checked ~ .nav-burger::before{ top: 21px; transform: rotate(45deg); }
  .nav-bascule:checked ~ .nav-burger::after { top: 21px; transform: rotate(-45deg); }
}

/* --- 1. Hero : video plein cadre ---------------------------------------- */

.hero {
  position: relative;
  /* dvh et non vh : pas de saut quand la barre d'adresse d'iOS se retracte. */
  min-height: min(calc(100dvh - var(--entete-h)), 880px);
  display: grid; align-items: end;
  background: var(--navy);
  overflow: hidden;
}
/* Les deux lecteurs sont superposes. Seul celui marque data-actif est visible :
   le fondu croise se fait par la transition d'opacite. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s ease;
}
.hero__video[data-actif] { opacity: .55; }
/* Le voile part du bas : le texte reste lisible, le haut de l'image reste net. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,3,8,.55) 0%, rgba(5,3,8,.15) 38%, rgba(5,3,8,.94) 100%);
}
.hero__contenu { position: relative; z-index: 1; padding-block: var(--rythme) clamp(3rem, 7vw, 5rem); }
.hero h1 { max-width: 16ch; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--athena); }
.hero__accroche { max-width: 46ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--texte); margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --- 2. Bandeau de references (sous le hero, logos seuls) ---------------- */

.refs { border-block: 1px solid var(--trait); padding-block: clamp(2rem, 4vw, 3rem); }
.refs__titre {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--texte-faible); margin-bottom: 1.75rem;
}
.refs__bandes { display: grid; gap: 1rem; }
.refs__bandes img { width: 100%; opacity: .9; }

/* --- 3. Triptyque : trois promesses, largeurs inegales ------------------- */

.triptyque { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .triptyque { grid-template-columns: 1.4fr 1fr 1fr; } }
.promesse { border-top: 2px solid var(--athena); padding-top: 1.5rem; }
.promesse h3 { text-transform: uppercase; letter-spacing: .06em; }
.promesse p  { color: var(--texte); margin-bottom: 0; font-size: .97rem; }

/* --- 4. Realisations : grille bento, tuiles de tailles variees ----------- */

.bento { display: grid; gap: 1px; background: var(--trait); }
@media (min-width: 800px) { .bento { grid-template-columns: repeat(6, 1fr); } }
.travail { position: relative; margin: 0; background: var(--noir); }
/* Deux tuiles larges en tete, quatre tuiles normales ensuite : 6 elements, 6 cellules. */
@media (min-width: 800px) {
  .travail             { grid-column: span 2; }
  .travail:nth-child(1),
  .travail:nth-child(2){ grid-column: span 3; }
}
.travail__cadre { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
.travail__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.travail figcaption {
  padding: 1rem 1.25rem 1.4rem;
  font-size: .92rem; color: var(--texte); line-height: 1.4;
}

/* --- 5. Dispositif : defilement horizontal a l'aimant -------------------- */

.dispositif {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem; margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge);
  scrollbar-width: thin; scrollbar-color: var(--trait) transparent;
}
.outil { scroll-snap-align: start; }
.outil img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; filter: grayscale(1); transition: filter .4s; }
.outil:hover img { filter: grayscale(0); }
.outil h3 { margin-top: 1.25rem; text-transform: uppercase; letter-spacing: .06em; }
.outil p  { color: var(--texte); font-size: .95rem; margin-bottom: 0; }

/* --- 6. Declaration : photo plein cadre, texte court -------------------- */

.declaration { position: relative; display: grid; align-items: center; min-height: 70vh; overflow: hidden; }
.declaration img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.declaration::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,3,8,.94) 0%, rgba(5,3,8,.72) 55%, rgba(5,3,8,.35) 100%);
}
.declaration > .conteneur { position: relative; z-index: 1; padding-block: var(--rythme); }
.declaration p { color: var(--texte); }

/* --- 7. Devis ----------------------------------------------------------- */

.section { padding-block: var(--rythme); }
.section--navy { background: var(--navy); }

.section__entete { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__entete p { color: var(--texte); max-width: 58ch; margin-bottom: 0; }
.section__action { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* --- FAQ ---------------------------------------------------------------- */

.question { padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--trait); }
.question:first-of-type { border-top: 0; }
.question h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); }
.question p { color: var(--texte); }
.question p:last-child { margin-bottom: 0; }

.formulaire { display: grid; gap: 1.5rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.champ { display: flex; flex-direction: column; gap: .5rem; }
.champ--large { grid-column: 1 / -1; }
.champ label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-faible);
}
.champ input, .champ select, .champ textarea {
  font: inherit; width: 100%; padding: .9rem 0;
  color: var(--blanc); background: transparent;
  border: 0; border-bottom: 1px solid var(--trait); border-radius: 0;
  transition: border-color .2s;
}
.champ select option { background: var(--navy); color: var(--blanc); }
.champ textarea { min-height: 130px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-faible); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-bottom-color: var(--athena);
}
.formulaire__envoi { grid-column: 1 / -1; margin-top: 1rem; }

/* Piege a robots : hors ecran pour les humains, rempli par les aspirateurs. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message { padding: 1.1rem 1.4rem; margin-bottom: 2.5rem; max-width: 65ch; }
.message--ok     { background: rgba(99, 225, 255, .1);  box-shadow: inset 3px 0 0 var(--athena); }
.message--erreur { background: rgba(255, 96, 96, .1);   box-shadow: inset 3px 0 0 #ff6060; }
.message ul { margin: .6rem 0 0; padding-left: 1.1rem; }

/* --- Espace client ------------------------------------------------------ */

.connexion {
  max-width: 400px; margin: clamp(4rem, 10vw, 8rem) auto;
  padding: clamp(2rem, 4vw, 3rem); background: var(--navy);
}
.connexion h1 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); text-align: center; }
.connexion .formulaire { grid-template-columns: 1fr; }
.connexion__aide { margin: 1.75rem 0 0; text-align: center; font-size: .85rem; color: var(--texte-faible); }

.client-entete {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: baseline; justify-content: space-between;
  padding-bottom: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--trait);
}
.camera { margin: 0 0 var(--rythme); }
.camera h2 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.6rem); }
.camera__cadre { aspect-ratio: 16 / 10; background: var(--navy); border: 1px solid var(--trait); }
.camera__cadre iframe { width: 100%; height: 100%; border: 0; }

/* --- Pied de page ------------------------------------------------------- */

.pied { border-top: 1px solid var(--trait); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; font-size: .88rem; color: var(--texte); }
.pied__inner { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pied__logo { width: 165px; }
.pied strong { color: var(--blanc); font-weight: 700; }
.pied__mentions { font-size: .78rem; color: var(--texte-faible); }
.pied__reseaux { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pied__reseaux a { color: var(--blanc); text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.pied__reseaux a:hover { color: var(--athena); }
.pied__europe {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.75rem; border-top: 1px solid var(--trait);
  font-size: .76rem; color: var(--texte-faible); max-width: 80ch;
}

/* --- Apparition au defilement -------------------------------------------
   Animation pilotee par le defilement, native CSS : aucune bibliotheque,
   aucun ecouteur scroll. Sans support, le contenu s'affiche normalement.  */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apparait {
      animation: monter both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes monter {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}