/* =====================================================================
   ENID GROUP — FEUILLE DE STYLE PRINCIPALE
   =====================================================================
   Ce fichier est partagé par TOUTES les pages du site.
   Les réglages spécifiques à une page (quelle image de hero, quelle
   opacité, quel cadrage) se font DANS CHAQUE PAGE HTML, dans la balise
   <style> tout en haut du <head> — pas ici. Cherche le bloc
   "REGLAGES DE LA PAGE" en haut de chaque fichier .html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES GLOBALES (couleurs, polices, espacements)
   --------------------------------------------------------------------- */
:root{
  /* Couleurs de marque — changer ici pour ajuster TOUT le site d'un coup */
  --bg:            #FAFAF9;   /* fond général des pages (blanc cassé) */
  --bg-alt:        #F0F2F4;   /* fond gris clair pour sections alternées */
  --ink:           #0A1628;   /* texte principal / fond sombre (footer, bandes) */
  --ink-soft:      #4A5568;   /* texte secondaire, paragraphes */
  --blue:          #123258;   /* bleu signature ENID (boutons, liens, accents) */
  --blue-bright:   #2C5C9E;   /* bleu plus clair (survol / accents secondaires) */
  --line:          #D8DCE1;   /* couleur des bordures fines / séparateurs */
  --line-on-dark:  rgba(255,255,255,0.14); /* bordures sur fond sombre */
  --paper:         #FFFFFF;   /* blanc pur (texte sur fond sombre, cartes) */
  --max:           1240px;    /* largeur maximale du contenu — augmenter pour un site plus "large" */
  --fp-image:      none;      /* image parallax pied de page — à définir dans chaque page HTML */

  /* Police — Helvetica réelle sur Mac/iPhone, Arial (visuellement quasi
     identique) sur Windows/Android. Aucun fichier à charger, rapide. */
  --font-main: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", monospace; /* utilisé pour les petits labels/majuscules type "data" */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-main);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-main); font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 40px; }

/* Petit label majuscule espacé */
.eyebrow-label{
  font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: -0.2px;
word-spacing: -0.2px;
color: var(--blue);
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------------------------------------------------------------------
   2. NAVIGATION (identique sur toutes les pages)
   --------------------------------------------------------------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(250,250,249,0.94);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
nav{ display:flex; align-items:center; justify-content:space-between; }

/* Logo : deux fichiers différents pour fond clair / fond sombre.
   Le hero est sombre en haut de page -> logo clair (blanc).
   Une fois qu'on scrolle, le fond du header devient blanc -> logo sombre.
   Remplace les fichiers dans /assets/images/brand/ :
     - logo-light.svg  (version blanche, pour fond sombre / hero)
     - logo-dark.svg   (version sombre, pour fond blanc / header scrollé) */
.logo-light, .logo-dark{ height:40px; width:auto; transition:opacity .3s ease; }
.logo-dark{ display:none; }
header.scrolled .logo-light{ display:none; }
header.scrolled .logo-dark{ display:block; }

.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
  font-size:0.86rem; font-weight:600; color:rgba(255,255,255,0.88);
  position:relative; padding-bottom:4px; transition:color .35s ease;
}
header.scrolled .nav-links a{ color:var(--ink-soft); }
.nav-links a.active{ color:var(--paper); }
header.scrolled .nav-links a.active{ color:var(--blue); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .3s ease;
}
.nav-links a:hover::after{ width:100%; }

.lang-switch{ display:flex; gap:10px; }
header.scrolled .lang-switch{ color:#9AA5B1; }
.lang-switch a{ cursor:pointer; color:inherit; transition:color .25s ease; }
.lang-switch a:hover{ color:var(--paper); }
header.scrolled .lang-switch a:hover{ color:var(--blue); }
.lang-switch a.active{ color:var(--paper); font-weight:700; }
header.scrolled .lang-switch a.active{ color:var(--blue); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }

/* ---------------------------------------------------------------------
   3. HERO — grande photo pleine largeur en haut de chaque page
   ---------------------------------------------------------------------
   Toutes les valeurs ci-dessous sont des VARIABLES CSS que tu peux
   surcharger PAGE PAR PAGE. Va voir le <style> en haut de chaque .html,
   tu y trouveras un bloc comme :

     .hero{
       --hero-image: url('assets/images/hero/hero-home.webp');
       --hero-overlay-opacity: 0.45;
       --hero-image-position: center 40%;
       --hero-height: 92vh;
     }

   Explication de chaque variable :
   --hero-image            : chemin vers la photo (mets le fichier dans
                              /assets/images/hero/ et référence-le ici)
   --hero-overlay-opacity  : 0 = photo brute, sans assombrissement
                              1 = totalement noir. 0.35 à 0.55 = zone
                              confortable pour que le texte blanc reste lisible
   --hero-image-position   : quelle partie de la photo est cadrée/visible.
                              "center" = centre, "top" = haut, "center 30%"
                              = 30% depuis le haut. Utile si le sujet
                              important (bateau, panneau solaire) n'est
                              pas au centre de ta photo.
   --hero-image-size       : "cover" (remplit tout l'espace, peut rogner
                              les bords - RECOMMANDÉ) ou "contain" (montre
                              toute l'image, peut laisser des bandes vides)
   --hero-height            : hauteur du bandeau. "100vh" = plein écran,
                              "60vh" = plus compact. Pour les pages
                              secondaires (About, Contact...) on utilise
                              souvent une hauteur plus petite (55-70vh).
   ----------------------------------------------------------------------- */
.hero{
  /* valeurs par défaut si une page ne les définit pas */
  --hero-image: none;
  --hero-overlay-opacity: 0.45;
  --hero-image-position: center;
  --hero-image-size: cover;
  --hero-height: 90vh;

  position:relative;
  min-height:var(--hero-height);
  display:flex;
  align-items:flex-end; /* le texte est ancré en bas du hero, comme sur la maquette validée */
  color:var(--paper);
  overflow:hidden;
  background-color:var(--ink); /* couleur de secours tant qu'il n'y a pas de photo */
}
.hero-photo{
  position:absolute; inset:0;
  background-size:var(--hero-image-size);
  background-position:var(--hero-image-position);
  background-repeat:no-repeat;
}
.hero-overlay{
  /* Assombrit la photo pour garder le texte lisible.
     Le dégradé est plus sombre en bas (où est le texte) et plus clair
     en haut (pour laisser respirer le ciel/la photo). */
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(10,22,40, calc(var(--hero-overlay-opacity) + 0.25)) 0%,
    rgba(10,22,40, var(--hero-overlay-opacity)) 45%,
    rgba(10,22,40, calc(var(--hero-overlay-opacity) - 0.15)) 100%
  );
}
.hero-content{ position:relative; z-index:2; padding:0 0 80px; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-eyebrow{
  color:#CBD8E8; margin-bottom:22px; display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
}
.hero-eyebrow::before{ content:''; width:28px; height:1px; background:#CBD8E8; display:inline-block; }
.hero h1{
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  line-height:1.12;
  max-width:820px;
  margin:0 auto;
  color:var(--paper);
  font-weight:700;
}
.hero p.hero-sub{
  margin-top:22px; max-width:560px; margin-left:auto; margin-right:auto; font-size:1.05rem;
  color:rgba(255,255,255,0.82);
}
.hero-cta{ margin-top:36px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; }

/* ---------------------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; font-size:0.85rem; font-weight:700;
  border:1px solid rgba(255,255,255,0.4); border-radius:2px;
  transition:all .3s ease;
}
.btn:hover{ background:var(--paper); color:var(--blue); border-color:var(--paper); }
.btn-solid{ background:var(--blue); border-color:var(--blue); color:var(--paper); }
.btn-solid:hover{ background:var(--blue-bright); border-color:var(--blue-bright); color:var(--paper); }
.btn-dark{ border-color:var(--ink); color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--paper); }

/* ---------------------------------------------------------------------
   5. BANDEAU CHIFFRES CLÉS (sous le hero de l'accueil)
   --------------------------------------------------------------------- */
.trustbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.trustbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); padding:44px 40px; }
.trust-item{ border-left:1px solid var(--line); padding-left:26px; }
.trust-item:first-child{ border-left:none; padding-left:0; }
.trust-item .num{ font-size:2.1rem; font-weight:700; color:var(--blue); }
.trust-item .label{ margin-top:6px; color:var(--ink-soft); font-size:0.85rem; }

/* ---------------------------------------------------------------------
   6. SECTIONS GÉNÉRIQUES
   --------------------------------------------------------------------- */
.section{ padding:120px 0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--ink); color:var(--paper); }
.section-dark .sec-head p{ color:rgba(255,255,255,0.62); }
.section-dark .eyebrow-label{ color:#8FB2DA; }
.sec-head{ max-width:640px; margin-bottom:64px; }
.sec-head .eyebrow-label{ margin-bottom:16px; display:block; }
.sec-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
.sec-head p{ margin-top:18px; color:var(--ink-soft); font-size:1.02rem; }

/* ---------------------------------------------------------------------
   7. BOXES — cartes à bordure fine + icône linéaire
   ---------------------------------------------------------------------
   Utilisées pour : activités, valeurs, points forts, étapes...
   Une "box" = bordure 1px + un peu d'espace + une icône SVG en haut.
   Pour changer l'épaisseur de bordure ou l'arrondi, modifie ici. */
.box-grid{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.box-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.box-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.box{
  background:var(--paper); padding:44px 38px; transition:background .3s ease;
}
.box:hover{ background:#F7F9FA; }
.box .box-icon{ height:40px; margin-bottom:26px; }
.box .box-icon svg{ height:100%; width:auto; }
.box h3{ font-size:1.22rem; margin-bottom:12px; }
.box p{ color:var(--ink-soft); font-size:0.95rem; }
.box .box-more{
  margin-top:22px; display:inline-block; font-size:0.82rem; font-weight:700;
  color:var(--blue); border-bottom:1px solid var(--blue); padding-bottom:2px;
}
/* variante "box" avec une petite image au lieu d'une icône seule */
.box-media{ overflow:hidden; }
.box-media .box-media-img{
  height:200px; background-size:cover; background-position:center;
  margin:-44px -38px 26px; /* l'image déborde jusqu'aux bords de la box */
  transition:transform .45s ease;
}
.box-media:hover .box-media-img{ transform:scale(1.04); }

/* ---------------------------------------------------------------------
   8. LISTE PROJETS (bande sombre, style éditorial)
   --------------------------------------------------------------------- */
.project-list{ display:flex; flex-direction:column; }
.project-row{
  display:grid; grid-template-columns:90px 1fr 170px auto;
  align-items:center; gap:26px;
  padding:30px 0; border-top:1px solid var(--line-on-dark);
  transition:padding-left .3s ease;
}
.project-row:last-child{ border-bottom:1px solid var(--line-on-dark); }
.project-row:hover{ padding-left:14px; }
.project-row .yr{ font-family:var(--font-mono); color:#7C8CA0; font-size:0.85rem; }
.project-row h4{ font-size:1.2rem; font-weight:700; }
.project-row .tag{ font-family:var(--font-mono); font-size:0.7rem; color:#8FB2DA; text-transform:uppercase; letter-spacing:0.1em; }
.project-row .arrow{ opacity:0.4; transition:opacity .3s ease, transform .3s ease; }
.project-row:hover .arrow{ opacity:1; transform:translateX(4px); }

/* ---------------------------------------------------------------------
   9. BANDE DE CITATION (photo + citation en grand, réutilisable)
   ---------------------------------------------------------------------
   Même logique que le hero : personnalise --quote-image et
   --quote-overlay-opacity dans le <style> de la page qui l'utilise. */
.quote-band{
  --quote-image: none;
  --quote-overlay-opacity: 0.55;
  position:relative; min-height:60vh; display:flex; align-items:center;
  color:var(--paper); overflow:hidden;
}
.quote-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.quote-overlay{ position:absolute; inset:0; background:rgba(10,22,40, var(--quote-overlay-opacity)); }
.quote-content{ position:relative; z-index:2; }
.quote-content blockquote{
  font-size:clamp(1.5rem, 3vw, 2.3rem); font-weight:700; line-height:1.35; max-width:820px;
}
.quote-content cite{ display:block; margin-top:24px; font-style:normal; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:#CBD8E8; }

/* ---------------------------------------------------------------------
   10. BANDE CONTACT / CTA
   --------------------------------------------------------------------- */
.cta-band{ background:var(--blue); color:var(--paper); padding:100px 0; }
.cta-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color:var(--paper); font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:560px; }
.offices{ display:flex; gap:56px; flex-wrap:wrap; }
.office .eyebrow-label{ color:#8FB2DA; margin-bottom:10px; display:block; }
.office div{ color:rgba(255,255,255,0.78); font-size:0.92rem; }

/* ---------------------------------------------------------------------
   11. FORMULAIRE DE CONTACT
   --------------------------------------------------------------------- */
.contact-form{ display:grid; gap:20px; max-width:640px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:0.8rem; font-weight:700; color:var(--ink-soft); }
.form-field input, .form-field textarea{
  border:1px solid var(--line); padding:13px 14px; font-family:var(--font-main);
  font-size:0.95rem; background:var(--paper); color:var(--ink);
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; }

/* ---------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------- */
.foot-parallax{
  position:relative;
  padding:100px 0;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  color:var(--paper);
}
.foot-parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,22,40,0.6);
}
.foot-parallax .wrap{ position:relative; z-index:1; }
.foot-parallax-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  flex-wrap:wrap;
}
.foot-parallax h2{
  color:var(--paper);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  max-width:560px;
  margin-bottom:36px;
}
footer{ background:var(--ink); color:rgba(255,255,255,0.55); padding:46px 0; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.foot-links{ display:flex; gap:26px; font-size:0.85rem; }
.foot-links a:hover{ color:var(--paper); }
.foot-lang{ display:flex; gap:14px; font-family:var(--font-mono); font-size:0.72rem; }
footer .logo-light{ height:30px; }

/* ---------------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 900px){
  header{ padding:16px 0; }
  header.scrolled{ padding:12px 0; }
  .logo-light, .logo-dark{ height:32px; }

  /* cible tactile du burger agrandie sans changer sa taille visuelle */
  .nav-toggle{ display:block; z-index:95; padding:10px; margin:-10px; }
  .nav-toggle svg{ stroke:var(--paper); }
  header.scrolled .nav-toggle svg{ stroke:var(--ink); }

  .nav-links{
    position:fixed; top:0; right:-100%; width:82%; max-width:340px; height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:100px 28px 28px; gap:22px; transition:right .35s ease; z-index:90;
    overflow-y:auto;
  }
  .nav-links.open{ right:0; }
  .nav-links a{ color:var(--paper) !important; font-size:1rem; }

  /* Hero : plus compact, tient sur un écran de smartphone sans être coupé
     par la barre d'adresse (svh = viewport "stable" quand dispo). */
  .hero{ min-height:82vh; min-height:82svh; }
  .hero-content{ padding:0 0 44px; }
  .hero-eyebrow{ margin-bottom:16px; }
  .hero p.hero-sub{ margin-top:16px; font-size:0.98rem; }
  .hero-cta{ margin-top:24px; gap:12px; }

  .trustbar .wrap{ grid-template-columns:repeat(2,1fr); gap:20px 0; padding:28px 22px; }
  .trust-item{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:16px; }
  .trust-item .num{ font-size:1.7rem; }

  .section{ padding:64px 0; }
  .sec-head{ margin-bottom:40px; }

  .box-grid.cols-3, .box-grid.cols-2{ grid-template-columns:1fr; }
  .box{ padding:30px 26px; }

  .project-row{ grid-template-columns:56px 1fr; row-gap:6px; }
  .project-row .tag, .project-row .arrow{ display:none; }

  .quote-band{ min-height:auto; padding:64px 0; }

  .cta-band{ padding:56px 0; }
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:26px; }
  .offices{ gap:18px; flex-direction:column; }

  /* background-attachment:fixed est ignoré/instable sur mobile (Safari iOS) :
     on repasse en scroll normal + on resserre l'espace vertical. */
  .foot-parallax{ padding:56px 0; background-attachment:scroll; }
  .foot-parallax-inner{ flex-direction:column; align-items:flex-start; gap:26px; }
  .foot-parallax h2{ margin-bottom:0; }

  footer{ padding:32px 0; }
  .foot-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .foot-links{ gap:18px; flex-wrap:wrap; }

  .form-row{ grid-template-columns:1fr; }

  .wrap{ padding:0 20px; }
}

/* Réglages supplémentaires pour les petits smartphones (téléphones étroits) */
@media (max-width: 480px){
  .wrap{ padding:0 16px; }
  .hero{ min-height:78vh; min-height:78svh; }
  .hero h1{ font-size:1.85rem; }
  .section{ padding:52px 0; }
  .box{ padding:26px 20px; }
  .trustbar .wrap{ grid-template-columns:1fr; padding:24px 18px; }
  .trust-item{ border-top:1px solid var(--line); padding-top:14px; }
  .trust-item:first-child{ border-top:none; padding-top:0; }
}
