/* Jean Gallay SA — style.css
   Palette dérivée du site existant (bleu #0068B3), typographie Barlow Condensed / Inter / IBM Plex Mono. */

:root{
  --ink:#0B2A43;
  --brand:#0068B3;
  --brand-deep:#004A80;
  --brand-bright:#1C86D6;
  --sky:#EAF3FA;
  --surface:#FFFFFF;
  --muted:#54677A;
  --line:#D7E1EA;
  --warm:#C97A2B;
  --warm-bright:#E0954A;
  --focus:#1C86D6;
  --shadow: 0 1px 2px rgba(11,42,67,.04), 0 8px 24px rgba(11,42,67,.06);
  /* Ne s'inverse jamais avec le thème : garde le bleu de marque constant sur les boutons pleins */
  --brand-fixed:#0068B3;
  --brand-fixed-deep:#004A80;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;text-wrap:balance;margin:0;letter-spacing:.01em;}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); font-weight:500;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,48px);}
section{position:relative;}
.band-sky{background:var(--sky);}
.band-navy{background:linear-gradient(175deg,var(--brand-deep),var(--ink));color:#fff;}
.band-navy .eyebrow{color:var(--warm-bright);}
.band-navy .muted{color:#B9D3E8;}

/* Motif "schéma technique" partagé */
.blueprint{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.blueprint::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,104,179,.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(0,104,179,.07) 0 1px, transparent 1px 64px);
  opacity:.5;
}
.turbine{
  position:absolute; width:min(70vw,900px); aspect-ratio:1; border-radius:50%;
  right:clamp(-320px,-12vw,-120px); top:50%; transform:translateY(-50%);
  background:repeating-conic-gradient(from 0deg, rgba(0,104,179,.22) 0deg 4deg, transparent 4deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 34%,transparent 35%,transparent 62%,#000 63%,#000 66%,transparent 67%);
          mask:radial-gradient(circle,#000 34%,transparent 35%,transparent 62%,#000 63%,#000 66%,transparent 67%);
  opacity:.6;
}
@media (max-width:820px){ .turbine{width:130vw; right:-55vw;} }

/* Header */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px;}
.logo{display:flex; align-items:center; text-decoration:none;}
.logo img{height:28px; width:auto; display:block;}
nav.primary{display:flex; gap:2px;}
nav.primary a{position:relative; font-size:.86rem; font-weight:500; text-decoration:none; color:var(--muted); padding:8px 14px; border-radius:100px; transition:background .15s, color .15s;}
nav.primary a:hover{background:var(--sky); color:var(--brand-deep);}
.cta{background:var(--brand-fixed); color:#fff; border:none; font-weight:600; font-size:.86rem; padding:10px 20px; border-radius:100px; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); transition:background .15s, transform .15s;}
.cta:hover{background:var(--brand-fixed-deep); transform:translateY(-1px);}
.cta.warm{background:var(--warm);} .cta.warm:hover{background:var(--warm-bright);}
.cta.outline{background:transparent; color:var(--brand-fixed); border:1.5px solid var(--brand-fixed); box-shadow:none;}
.cta.outline:hover{background:var(--brand-fixed); color:#fff;}
/* nav.primary a a la même spécificité que .cta pour la couleur : sans ceci le texte du bouton
   redevient gris "muted" (couleur des liens de nav) et devient quasi invisible sur le fond bleu. */
nav.primary a.cta{color:#fff; background:var(--brand-fixed);}
nav.primary a.cta:hover{background:var(--brand-fixed-deep); color:#fff;}
/* Sélecteur de langue : hors de nav.primary, donc toujours visible, y compris en mobile */
.nav-right{display:flex; align-items:center; gap:10px;}
.lang-switch{display:flex; align-items:center; gap:1px;}
.lang-switch a{
  font-size:.75rem; font-weight:600; letter-spacing:.05em; text-decoration:none;
  color:var(--muted); padding:6px 8px; border-radius:8px; transition:background .15s, color .15s;
}
.lang-switch a:hover{background:var(--sky); color:var(--brand-deep);}
.lang-switch a[aria-current="true"]{color:var(--brand-fixed); background:var(--sky);}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;}
.burger span, .burger span::before, .burger span::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.2s;}
.burger span::before{position:absolute;top:-6px;} .burger span::after{position:absolute;top:6px;}
@media (max-width:900px){ nav.primary{display:none;} .burger{display:flex;} }
#mobile-nav{display:none; flex-direction:column; padding:8px 0 16px; border-top:1px solid var(--line);}
#mobile-nav a{padding:12px 4px; text-decoration:none; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line);}
#mobile-nav.open{display:flex;}

/* Hero */
.hero{padding-top:clamp(64px,12vw,120px); padding-bottom:clamp(48px,10vw,96px); overflow:hidden;}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.slide-rotator{position:relative; overflow:hidden; font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.02; height:2.2em;}
.slide-rotator span{
  position:absolute; inset:0;
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:inherit; line-height:inherit; letter-spacing:.005em; color:var(--ink);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.slide-rotator span.is-active{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .slide-rotator span{transition:none;}
}
.hero-sub{margin-top:18px; font-size:1.05rem; color:var(--muted); max-width:46ch;}
.hero-actions{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.hero-photo{
  aspect-ratio:3/2; border-radius:20px; position:relative; overflow:hidden; box-shadow:var(--shadow);
  background:var(--ink);
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s ease;
  will-change:transform;
}
.hero-photo img.is-active{opacity:1;}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,25,40,.55), rgba(6,25,40,0) 55%);
}
.kicker-row{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px;}
.kicker-row div{font-size:.82rem; color:var(--muted);}
.kicker-row b{display:block; color:var(--ink); font-family:"Barlow Condensed",sans-serif; font-size:1.3rem; font-weight:700;}

/* Section headings */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; margin-top:8px;}
.section-head p{color:var(--muted); margin-top:10px; font-size:1.02rem;}
.band-navy .section-head p{color:#B9D3E8;}
section > .wrap{padding-block:clamp(56px,9vw,96px);}

/* Activités */
.activity-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
@media (max-width:980px){ .activity-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:700px){ .activity-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:460px){ .activity-grid{grid-template-columns:repeat(2,1fr);} }
.activity-card{background:var(--surface); padding:22px 16px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:14px; transition:background .15s, transform .15s;}
.activity-card:hover{background:var(--sky); transform:translateY(-2px);}
.activity-icon{width:60px; height:60px; border-radius:12px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px var(--line); margin-inline:auto;}
.activity-icon img{width:100%; height:100%; object-fit:contain;}
.activity-card span{font-size:.88rem; font-weight:500; line-height:1.25; text-align:center;}
.expertise-row{display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:28px;}
.expertise-row .pill{border:1px solid var(--line); border-radius:16px; padding:20px 16px; font-size:.86rem; font-weight:500; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; width:150px; background:var(--surface); transition:background .15s, border-color .15s, transform .15s;}
.expertise-row .pill:hover{background:var(--sky); border-color:var(--brand-bright); transform:translateY(-2px);}
.expertise-row .pill span{line-height:1.25;}

/* Chiffres */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
@media (max-width:820px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
.stat{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
/* Bande de valeur de hauteur fixe (= diamètre de l'anneau) : les 4 libellés de la ligne
   s'alignent alors exactement à la même hauteur, chiffres comme anneau. */
.stat > b{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(2.4rem,5vw,3.4rem); color:#fff; font-variant-numeric:tabular-nums; line-height:1; min-height:100px; display:flex; align-items:flex-end;}
.stat span{color:#B9D3E8; font-size:.9rem;}
/* Anneau "90% export" : SVG (le texte est centré par positionnement absolu, indépendamment
   des métriques de police — c'est ce qui garantit un centrage parfait). */
.stat.ring-stat{flex-direction:column; align-items:flex-start; gap:8px;}
.ring-stat .ring-wrap{position:relative; width:100px; height:100px; flex:none;}
.ring-svg{width:100%; height:100%; display:block; transform:rotate(-90deg);}
.ring-svg circle{fill:none; stroke-width:9;}
.ring-track{stroke:rgba(255,255,255,.18);}
.ring-fill{stroke:var(--brand-bright); stroke-linecap:round; stroke-dasharray:326.73; stroke-dashoffset:326.73;}
.ring-value{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.ring-value > span{display:flex; align-items:baseline; gap:1px; font-family:"Barlow Condensed",sans-serif; font-weight:700; color:#fff; line-height:1;}
.ring-stat .ring-value b{font-size:2.3rem; line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.ring-stat .ring-value i{font-style:normal; font-size:1.15rem; font-weight:700;}

/* Logos (certifications / clients) */
/* Flex centré plutôt qu'une grille : une dernière ligne incomplète se centre au lieu
   de laisser des cases vides, quelle que soit la largeur d'écran. */
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.logo-chip{flex:0 0 auto; width:calc((100% - 4 * 14px) / 5);}
#certifications .logo-chip{width:calc((100% - 5 * 14px) / 6);}
@media (max-width:900px){
  .logo-chip, #certifications .logo-chip{width:calc((100% - 2 * 14px) / 3);}
}
@media (max-width:560px){
  .logo-chip, #certifications .logo-chip{width:calc((100% - 14px) / 2);}
}
.logo-chip{
  border:1px solid var(--line); border-radius:14px; padding:18px 16px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; min-height:84px; transition:box-shadow .2s, transform .2s;
}
.logo-chip:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
/* Le nom de la norme est gravé en tout petit dans les badges (images de 120px) et reste
   illisible à l'écran : on l'écrit sous chaque logo. */
#certifications .logo-chip{flex-direction:column; gap:10px; padding:16px 12px; min-height:108px;}
#certifications .logo-chip span{
  font-size:.78rem; font-weight:600; color:var(--ink); letter-spacing:.01em;
  text-align:center; line-height:1.2;
}
/* Hauteur de zone logo identique pour tous (le bandeau environnement est plus plat
   que les badges ronds) : sans ceci les libellés ne s'alignent pas entre eux. */
#certifications .logo-chip img{height:46px; width:auto; max-width:100%; object-fit:contain;}
.logo-chip img{max-height:46px; width:auto; filter:grayscale(1) opacity(.72); transition:filter .25s;}
.logo-chip:hover img{filter:grayscale(0) opacity(1);}

/* Team / photo band */
/* 2/1 = format natif de la photo d'équipe (1142x570) : aucun recadrage */
.photo-band{aspect-ratio:2/1; border-radius:20px; overflow:hidden; position:relative; margin-top:8px;}
.photo-band img{width:100%; height:100%; object-fit:cover;}

/* Produits */
.produits-diagram{border-radius:16px; overflow:hidden; margin-bottom:36px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);}
.produits-diagram img{width:100%; height:auto; display:block;}
.produits-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.12); border-radius:16px; overflow:hidden;}
@media (max-width:720px){.produits-grid{grid-template-columns:1fr;}}
.produits-cat{background:color-mix(in srgb, var(--ink) 55%, var(--brand-deep) 45%); padding:28px 26px; transition:background .2s;}
.produits-cat:hover{background:color-mix(in srgb, var(--ink) 40%, var(--brand-deep) 60%);}
.produits-cat h3{font-size:1.15rem; font-weight:600; color:var(--warm-bright); font-family:"Inter",sans-serif;}
.produits-cat p{font-family:"IBM Plex Mono",monospace; font-size:.82rem; line-height:1.9; color:#D8E7F3; margin-top:14px;}

/* Contact / footer */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{display:flex; flex-direction:column; gap:20px; margin-top:28px;}
.contact-list div{display:flex; gap:14px; align-items:flex-start;}
.contact-list .ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none; font-size:.9rem;}
.contact-list a{text-decoration:none; font-weight:600; transition:color .15s;}
.contact-list a:hover{color:var(--warm-bright);}
.contact-map{border-radius:16px; overflow:hidden; position:relative; min-height:280px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);}
.contact-map iframe{width:100%; height:100%; min-height:280px; border:0; position:absolute; inset:0;}
footer{border-top:1px solid rgba(255,255,255,.14); margin-top:56px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#9FBAD0;}
footer a{text-decoration:underline;}

.swiss{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted);}
.swiss img{width:16px; height:auto;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
.reveal.stagger.in > *{animation:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* Back to top */
#toTop{
  position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff; border:none; box-shadow:var(--shadow); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s;
  z-index:50;
}
#toTop.show{opacity:1; pointer-events:auto; transform:none;}

/* ==========================================================================
   Adaptation mobile / tablette
   ========================================================================== */

/* Le header collant fait 64px : sans ceci, un clic sur un lien du menu place le
   titre de section SOUS le header. */
section[id]{scroll-margin-top:76px;}
/* Garde-fou : aucun élément décoratif ne peut provoquer de défilement horizontal.
   (clip et non hidden : hidden casserait le position:sticky du header) */
body{overflow-x:clip;}

@media (max-width:900px){
  /* Le menu passe en burger : on rend les liens confortables au doigt */
  #mobile-nav a{padding:14px 4px;}
}

@media (max-width:720px){
  .slide-rotator{font-size:2rem; height:2.4em;}
  .hero-sub{font-size:1rem;}
  .kicker-row{gap:20px; margin-top:32px;}
  .section-head{margin-bottom:32px;}
  .contact-grid{gap:36px;}
  .produits-cat{padding:22px 18px;}
  footer{margin-top:36px;}
}

@media (max-width:520px){
  /* Police du bandeau réduite + hauteur qui autorise une 3e ligne : plus aucun
     risque de texte rogné sur les petits écrans. */
  .slide-rotator{font-size:1.85rem; height:2.35em;}
  /* Les plus petits écrans (320px) : police réduite pour que la plus longue phrase
     tienne en 2 lignes, hauteur qui laisse quand même la place à une 3e ligne. */
  /* Boutons pleine largeur : cibles tactiles confortables */
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .cta{text-align:center; padding:14px 20px;}
  .logo img{height:24px;}
  .stats-grid{gap:24px;}
  .stat b{font-size:2rem;}
  .stat > b{min-height:84px;}
  .ring-stat .ring-wrap{width:84px; height:84px;}
  .ring-stat .ring-value b{font-size:1.9rem;}
  .ring-stat .ring-value i{font-size:1rem;}
  .expertise-row .pill{width:calc(50% - 10px);}
  .logo-chip{min-height:72px; padding:14px 12px;}
  .logo-chip img{max-height:38px;}
  .photo-band{aspect-ratio:3/2;}
  .contact-map{min-height:240px;}
  #toTop{right:14px; bottom:14px;}
}

@media (max-width:380px){
  .slide-rotator{font-size:1.6rem; height:3.2em;}
}