/* =========================================================
   NormandieIT — Feuille de style du site normandie-it.fr
   ========================================================= */

:root{
  --bleu-fonce:#061f43;
  --azur:#128aa4;
  --bleu-1:#144568;
  --azur-40:rgba(18,138,164,.40);
  --azur-30:rgba(18,138,164,.30);
  --azur-10:rgba(18,138,164,.10);
  --azur-60:rgba(18,138,164,.60);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:'Montserrat',sans-serif;
  color:#eaf4f8;
  min-height:100vh;
  position:relative;
  background:
    conic-gradient(from 0deg at 30% 20%, var(--bleu-1), #000000 45%, var(--azur) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* Décor fibre en bas à gauche, fixé en fond */
body::after{
  content:"";
  position:fixed;
  left:0;bottom:0;
  width:min(40vw,420px);
  height:min(40vw,420px);
  background:url('asset/bas_gauche_fibre.png') no-repeat left bottom;
  background-size:contain;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}

.wrap{position:relative;z-index:1}

/* ---------- En-tête ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 5vw;
  gap:20px;
  flex-wrap:wrap;
}
.logo{display:block;width:360px;max-width:60vw;height:100px}
.logo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.nav-zone{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
nav{display:flex;gap:26px}
nav a{
  font-family:'Poppins',sans-serif;
  font-weight:500;font-size:30px;
  color:#eaf4f8;text-decoration:none;
  position:relative;padding:4px 2px;
}
/* Animation soulignement dynamique au survol */
nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--bleu-1),var(--azur));
  transition:width .3s ease;
}
nav a:hover::after{width:100%}

.linkedin{display:inline-block;transition:transform .3s ease}
.linkedin img{width:76px;height:76px;display:block}
.linkedin:hover{transform:scale(1.25)} /* Animation zoom dynamique */

/* ---------- Bandeau d'accueil : logo + menu + hero DANS l'image ---------- */
/* Pas d'angle arrondi sur l'image d'accueil */
.topbanner{
  background:url('asset/accueil_arriereplan.png') no-repeat center top;
  background-size:cover;
  position:relative;
}
.topbanner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,31,67,.30), rgba(6,31,67,.62));
}
.topbanner > *{position:relative;z-index:1}
.hero{padding:30px 5vw 28px}
.hero-inner{max-width:760px}
.slogan{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(26px,4vw,44px);
  line-height:1.2;
  background:linear-gradient(90deg,var(--bleu-fonce),var(--azur));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  min-height:1.2em;
}
/* curseur clignotant pendant la frappe */
.slogan .caret{
  -webkit-text-fill-color:var(--azur);color:var(--azur);
  animation:blink .8s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

/* Rectangle d'accueil : pleine largeur, sans angle arrondi */
.accueil-text{
  width:100%;margin:0;
  font-size:26px;line-height:1.45;
  color:#fff;
  background:var(--azur-40);
  padding:22px 5vw;
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease, transform .8s ease;
}
.accueil-text.show{opacity:1;transform:none}

/* ---------- Titres de section ---------- */
section{padding:64px 5vw}
.section-title{
  font-family:'Poppins',sans-serif;
  font-weight:600;font-size:30px;
  text-align:center;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:44px;
}
.section-title::before,
.section-title::after{
  content:"";height:3px;flex:1;max-width:160px;border-radius:3px;
  /* dégradé linéaire 90° — #144568, #128aa4 à 12% */
  background:linear-gradient(90deg,rgba(20,69,104,.12),rgba(18,138,164,.12));
}

/* ---------- Nos services ---------- */
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  max-width:1200px;margin:0 auto;
}
.card{
  background:var(--azur-30);
  border-radius:18px;padding:28px 22px;text-align:center;
  transition:transform .3s ease;
  backdrop-filter:blur(2px);
}
.card:hover{transform:scale(1.06)} /* zoom dynamique au survol */
.card img{width:160px;height:160px;object-fit:contain;margin-bottom:14px}
.card h3{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:20px;color:#fff;margin-bottom:10px;
}
/* Texte aligné à gauche avec une petite puce ronde par ligne */
.card .svc-list{list-style:none;text-align:left;display:inline-block;margin:0}
.card .svc-list li{
  font-size:13px;line-height:1.7;color:#dff0f5;
  position:relative;padding-left:18px;
}
.card .svc-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;
  background:var(--azur);
}

/* ---------- Nos valeurs ---------- */
/* Bandeau pleine largeur azur 10%, sans angle arrondi */
.values-band{
  background:var(--azur-10);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:38px 5vw;
}
.values{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:1320px;margin:0 auto;
  /* Animation bloc : apparition de l'ensemble en un seul bloc */
  opacity:0;transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
}
.values.show{opacity:1;transform:none}
/* Image à gauche ; à droite sous-titre puis texte (alignés à gauche) */
.value{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  padding:16px 12px;position:relative;
}
.value img{width:160px;height:160px;object-fit:contain;flex-shrink:0}
.value-body{display:flex;flex-direction:column;min-width:0}
.value h3{
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:19px;color:#fff;margin-bottom:12px;text-align:left;
}
.value p{
  font-size:12px;line-height:1.6;color:#dff0f5;text-align:left;
}
/* Ligne séparatrice verticale entre les valeurs (dégradé) */
.value:not(:last-child)::after{
  content:"";position:absolute;right:-9px;top:12%;height:76%;width:2px;
  background:linear-gradient(180deg,rgba(20,69,104,.12),rgba(18,138,164,.12));
}

/* ---------- Nous contacter ---------- */
/* Disposition : colonne gauche (titre, texte, infos) + formulaire à droite */
.contact-grid{
  display:flex;gap:48px;align-items:flex-start;
  max-width:1100px;margin:0 auto;
}
.contact-left{flex:1;min-width:0}
.contact-right{flex:1;min-width:0}
.section-title--left{justify-content:flex-start;text-align:left;margin-bottom:22px}
.section-title--left::before{display:none}
.section-title--left::after{max-width:120px}
.contact-intro{text-align:left;font-size:15px;line-height:1.6;margin:0 0 26px;color:#eaf4f8}
.contact-box{
  background:#ffffff;
  border-radius:20px;padding:30px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
/* Nom + Email sur la 1re ligne, Téléphone + Entreprise sur la 2e */
.contact-box form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;min-width:0}
.field.full{grid-column:1 / -1}
/* Entourage coloré permanent (même hors clic) */
.field input,.field textarea{
  width:100%;font-family:'Montserrat',sans-serif;font-size:12px;
  padding:13px 14px;border:2px solid var(--azur);
  border-radius:10px;background:#fff;color:#0a2238;
}
.field input::placeholder,.field textarea::placeholder{color:#6b7d89}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--bleu-fonce);
  box-shadow:0 0 0 3px rgba(18,138,164,.22);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-send{
  grid-column:1 / -1;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:19px;
  color:#fff;cursor:pointer;border:none;border-radius:12px;
  padding:14px 22px;margin-top:6px;
  background:linear-gradient(90deg,var(--bleu-1),var(--azur));
  transition:transform .2s ease,filter .2s ease;
}
.btn-send:hover{transform:translateY(-2px);filter:brightness(1.1)}
.form-msg{padding:13px 16px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:18px}
.form-msg.ok{background:rgba(40,167,69,.92);color:#fff}
.form-msg.ko{background:rgba(200,45,45,.92);color:#fff}

.contact-coord{
  text-align:left;margin-top:28px;font-size:14px;line-height:1.6;color:#eaf4f8;
}
/* Icône à gauche de chaque coordonnée (téléphone, e-mail, adresse) */
.contact-coord p{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.contact-coord svg{width:22px;height:22px;flex-shrink:0;fill:#9fd4e2}
.contact-coord a{color:#bfe6f0;text-decoration:none}
.contact-coord a:hover{text-decoration:underline}

/* ---------- Pied de page ---------- */
footer{
  padding:40px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-logo{display:block;width:360px;max-width:60vw;height:100px}
.footer-logo img{width:100%;height:100%;object-fit:cover;object-position:center}
.footer-meta{font-size:12px;color:#bcd6e0;text-align:right;line-height:1.7}

/* ---------- Responsive tablette ---------- */
@media(max-width:1100px){
  .values{grid-template-columns:repeat(2,1fr)}
  .value:nth-child(2)::after{display:none}
}
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-grid{flex-direction:column;gap:32px}
  header{justify-content:center;text-align:center}
  nav a{font-size:24px}
  .accueil-text{font-size:22px}
}
/* ---------- Responsive mobile ---------- */
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .value::after{display:none!important}
  .contact-box form{grid-template-columns:1fr}
  nav{gap:16px}
  nav a{font-size:20px}
  .accueil-text{font-size:19px}
  .value{gap:14px}
  .value img{width:120px;height:120px}
  footer{flex-direction:column;text-align:center}
  .footer-meta{text-align:center}
}