/* ==========================================================
   Restructuration de l'affichage — grille commune à toutes les sections
   (chargé en dernier : prend le pas sur les fichiers précédents)
   ========================================================== */

:root{--gutter:72px;--section-y:96px}

/* 1. Rythme vertical homogène entre les sections */
.section{padding:var(--section-y) 0}
.section.compact{padding-top:0}

/* 2. Une seule grille à deux colonnes (5/12 – 7/12) pour toutes les sections texte */
.intro,.about,.two-cols,.method,.sectors-head{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter)
}
.intro{align-items:end;padding-bottom:48px}
.about,.two-cols,.method{align-items:start}
.two-cols.section{padding-top:var(--section-y)}
.about{padding-bottom:0}
.method.section{padding-top:var(--section-y)}

/* 3. Titres de section : même taille partout, sans débordement */
.intro h2,.two-cols h2,.expertise h2,.audit h2,.sectors h2,.about-head h2,.method-intro h2{
  font-size:clamp(2.1rem,3.6vw,3.4rem);letter-spacing:-.04em;line-height:1.08;margin-top:14px;overflow-wrap:break-word
}
.about-head h2 .nowrap{white-space:nowrap}
.about-head h2{font-size:clamp(2.1rem,3.1vw,3rem)}
.intro>p{margin:0;max-width:560px}

/* 4. Bandeau d'accueil + bandeau des capacités : plus de chevauchement */
.hero-proof{padding-top:24px;padding-bottom:24px}
@media(min-width:621px){.hero-proof{padding-bottom:24px}}
.capability-strip{margin:0 auto;box-shadow:none;border:1px solid var(--line);border-top:0}
.capability-strip div:last-child{border-right:0}

/* 5. Grille des solutions : plus de bloc gris vide en dessous */
.solutions-grid.section{padding:0;margin-bottom:var(--section-y)}
.solutions-grid article{min-height:280px}

/* 6. Blocs photo alignés sur la même largeur */
.visual-solutions.section{padding-top:0}

/* 7. Pied de page : les colonnes vides ne laissent plus de trou */
.footer-cols{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* 8. Menu : la rubrique sélectionnée reste allumée en orange */
.topbar nav a{position:relative;padding:6px 0;transition:color .2s}
.topbar nav a:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.topbar nav a:hover:after{transform:scaleX(.4)}
.topbar nav a.is-active{color:var(--amber)}
.topbar nav a.is-active:after{transform:scaleX(1)}

/* Portables compacts */
@media(min-width:1001px) and (max-width:1180px){
  :root{--gutter:48px}
}

/* Tablette */
@media(max-width:1000px){
  :root{--gutter:28px;--section-y:80px}
  .intro,.about,.two-cols,.method,.sectors-head{grid-template-columns:1fr}
  .intro{padding-bottom:36px}
  .topbar nav{gap:4px}
  .topbar nav a{padding:12px 0 12px 14px;border-left:3px solid transparent}
  .topbar nav a:after{display:none}
  .topbar nav a.is-active{color:var(--amber);border-left-color:var(--amber);background:rgba(245,185,66,.08);padding-left:14px}
}

/* Mobile */
@media(max-width:620px){
  :root{--section-y:64px}
  .hero-shade{background:linear-gradient(180deg,rgba(4,18,31,.88) 0%,rgba(4,18,31,.82) 60%,rgba(4,18,31,.92) 100%)}
  .hero-proof{padding:18px 22px}
  .capability-strip{width:100%;border-left:0;border-right:0}
  .capability-strip div{border-right:0;border-bottom:1px solid var(--line)}
  .capability-strip div:last-child{border-bottom:0}
  .solutions-grid.section{width:calc(100% - 44px)}
  .solutions-grid article{min-height:0}
  .solutions-grid h3{margin-top:18px}
}

/* ==========================================================
   Formats ordinateur : l'accueil occupe exactement l'écran
   et la largeur du contenu s'adapte à la taille de l'écran
   ========================================================== */
@media(min-width:1001px){
  :root{--max:min(1440px,calc(100vw - 120px))}
  .hero{min-height:0;height:100vh;height:100svh;min-height:640px;align-items:stretch}
  .hero-content{display:flex;flex-direction:column;justify-content:center;margin-top:0;margin-bottom:0;padding:98px 0 120px}
  .hero h1{font-size:clamp(2.9rem,min(5.4vw,9.5vh),6rem)}
  .hero p{margin:clamp(14px,2.4vh,25px) 0 clamp(18px,3vh,30px)}
}
/* Grands écrans : texte légèrement agrandi pour garder les proportions */
@media(min-width:1700px){html{font-size:17px}}
@media(min-width:2200px){html{font-size:18.5px}:root{--max:1600px}}
/* Écrans d'ordinateur peu hauts (1280×720, 1366×768) */
@media(min-width:1001px) and (max-height:820px){
  .hero-content{padding:90px 0 104px}
  .eyebrow{margin-bottom:0}
  .hero p{font-size:1.02rem}
  .hero .btn{min-height:46px}
}

/* ==========================================================
   Correctifs du 28/09 (soir)
   ========================================================== */
/* Section audit : marges identiques au reste du site (texte et formulaire alignés) */
.audit.section{width:100%;padding:var(--section-y) max(22px,calc((100vw - var(--max))/2))}
@media(max-width:620px){.audit.section{padding-left:22px;padding-right:22px}}

/* Section Contact dédiée (le menu « Contact » arrive ici) */
.contact-section{background:var(--navy);color:#fff}
.contact-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter);align-items:center}
.contact-head h2{font-size:clamp(2.1rem,3.6vw,3.4rem);letter-spacing:-.04em;line-height:1.08;margin:14px 0 16px}
.contact-head p{margin:0;color:#bdc9d2;font-size:1.05rem;max-width:460px}
.contact-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.contact-cards li{display:flex;flex-direction:column;gap:10px;padding:24px 22px;background:#0d2940;border:1px solid #1d3a52;border-top:3px solid var(--amber);min-height:130px}
.contact-cards span{font-size:.74rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8ea3b3}
.contact-cards a,.contact-cards strong{font-weight:700;font-size:.98rem;line-height:1.4;color:#fff;overflow-wrap:anywhere}
.contact-cards a{color:var(--amber)}
.contact-cards a:hover{text-decoration:underline}
footer.site-footer{border-top:1px solid #1d3a52}
@media(max-width:1180px){.contact-cards{grid-template-columns:1fr}}
@media(max-width:1000px){.contact-inner{grid-template-columns:1fr}.contact-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.contact-cards{grid-template-columns:1fr}.contact-cards li{min-height:0}}
/* L'ancre s'arrête pile sous le menu : plus de bande de la section précédente */
section[id],footer[id]{scroll-margin-top:78px}
@media(max-width:1000px){section[id],footer[id]{scroll-margin-top:68px}}
.contact-cards{grid-template-columns:1.45fr 1fr 1fr}
.contact-cards a,.contact-cards strong{overflow-wrap:normal;font-size:.95rem}
.contact-cards a{white-space:nowrap}
@media(max-width:1180px) and (min-width:1001px){.contact-cards{grid-template-columns:1fr}}
@media(max-width:760px){.contact-cards{grid-template-columns:1fr}}

/* ==========================================================
   Police identique sur tous les ordinateurs + Expertise alignée
   ========================================================== */
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Titres moins serrés (lettres qui ne se touchent plus) */
.hero h1{letter-spacing:-.035em}
.intro h2,.two-cols h2,.expertise h2,.audit h2,.sectors h2,.about-head h2,.method-intro h2,.contact-head h2,.solution-dialog h2{letter-spacing:-.025em}

/* Notre expertise : même grille à gauche que les autres sections (plus de titre centré) */
.expertise .section{text-align:left;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);row-gap:48px;align-items:end}
.expertise .expertise-head h2{margin-top:14px}
.expertise .section>p{margin:0;max-width:560px}
.expertise .metrics{grid-column:1 / -1}
@media(max-width:1000px){.expertise .section{grid-template-columns:1fr;row-gap:24px}.expertise .metrics{margin-top:12px}}

/* ==========================================================
   Alignement vertical : dans toutes les sections à deux colonnes,
   le texte de droite démarre à la hauteur du titre de gauche
   ========================================================== */
@media(min-width:1001px){
  .intro,.about,.two-cols,.method,.sectors-head,.expertise .section,.contact-inner,.audit{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start
  }
  /* 40px = hauteur de la petite étiquette orange (NOS SOLUTIONS, À PROPOS…) + son espacement */
  .intro>p,.sectors-head>p,.about-body,.two-cols .checklist,.method-steps,.expertise .section>p,.contact-cards,.audit-form{margin-top:40px}
  .about-body .about-lead{margin-top:0}
  .two-cols .checklist li:first-child{padding-top:0}
  .intro{padding-bottom:48px}
  .expertise .section{row-gap:40px}
}
/* Cartes de contact : une par ligne (libellé à gauche, valeur à droite) — rien ne déborde */
.contact-cards,.contact-cards[class]{grid-template-columns:1fr!important;gap:10px}
.contact-cards li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);align-items:center;gap:16px;min-height:0;padding:18px 22px;border-top:1px solid #1d3a52;border-left:3px solid var(--amber)}
.contact-cards a{white-space:normal;overflow-wrap:anywhere}
@media(max-width:520px){.contact-cards li{grid-template-columns:1fr;gap:6px}}

/* ==========================================================
   Solutions : titre remonté + les 8 cartes tiennent dans l'écran
   ========================================================== */
@media(min-width:1001px){
  .intro.section{padding-top:36px;padding-bottom:28px}
  .intro h2{font-size:clamp(2rem,3.1vw,3rem)}
  .solutions-grid article{min-height:0;padding:22px 24px}
  .solutions-grid h3{font-size:1.14rem;margin:12px 0 8px}
  .solutions-grid p{font-size:.9rem;line-height:1.5;margin:0 0 14px}
  .solutions-grid .solution-open{padding-top:0}
}
/* Contact : deux cartes (e-mail, étude de votre site) */
.contact-cards li{min-height:64px}
/* Écrans peu hauts (portables 11-13 pouces) : on resserre encore */
@media(min-width:1001px) and (max-height:760px){
  .intro.section{padding-top:24px;padding-bottom:20px}
  .intro h2{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-top:8px}
  .intro>p{margin-top:30px;font-size:.95rem}
  .solutions-grid article{padding:16px 20px}
  .solutions-grid h3{font-size:1.05rem;margin:8px 0 6px}
  .solutions-grid p{font-size:.85rem;margin-bottom:10px}
}

/* ==========================================================
   Pied de page : liens de navigation sur une seule ligne,
   même taille et même couleur que la colonne Contact
   ========================================================== */
.footer-cols{align-items:start}
.footer-cols h2{margin:0 0 16px;line-height:1.4}
.footer-cols nav ul{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:10px}
.footer-cols li,.footer-cols address,.footer-cols a{font-size:.95rem;font-weight:400;line-height:1.6}
.footer-cols nav a,.footer-cols address li{color:#c7d2da}
.footer-cols nav a:hover{color:var(--amber)}

/* Message « Adresse e-mail copiée » */
.copy-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:1000;background:var(--navy);color:#fff;border:1px solid #2b4a63;border-left:3px solid var(--amber);padding:14px 20px;font-size:.95rem;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 44px);text-align:center}
.copy-toast.is-visible{opacity:1;transform:translate(-50%,0)}
a[href^="mailto:"]{cursor:copy}