/* ==========================================================================
   ATTYSA INGÉNIERIE — feuille de style unique — version 2026-07-31 · révision I
   Couleurs échantillonnées sur le logo et la plaquette de l'entreprise.
   ========================================================================== */

:root{
  --navy:#00417C;       /* bleu du logo — titres, surfaces sombres */
  --navy-deep:#002A52;  /* bleu profond — pied de page, voiles photo */
  --attysa:#007CA8;     /* bleu des bandeaux de la plaquette — couleur pivot */
  --azur:#0091C2;       /* bleu médian du logo — liens, survols */
  --ciel:#6ECEFB;       /* cyan clair du logo — marqueurs, accents */
  --slate:#8FA4BE;      /* bleu-gris de la couverture — textes secondaires */
  --paper:#F1F5F9;      /* fond froid très clair */
  --line:#D8E2EC;       /* filets */
  --ink:#10243C;        /* texte courant */
  --white:#FFFFFF;

  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;

  --wrap:1180px;
  --gut:clamp(20px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--attysa);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--azur);outline-offset:3px}

/* ---------- Typographie ---------- */
.display,h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"wdth" 112;
  color:var(--navy);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(2.15rem,5.2vw,3.75rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);font-weight:600;letter-spacing:-.005em}
h4{font-size:1.0625rem;font-weight:600;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--navy)}
.lead{font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.62;color:#33506E}

/* Bandeau de rubrique : carré cyan + libellé mono, repris de la plaquette */
.eyebrow{
  display:flex;align-items:center;gap:.65em;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--attysa);
  margin:0 0 1.1em;
}
.eyebrow::before{content:"";flex:0 0 auto;width:11px;height:11px;background:var(--ciel)}
.band--navy .eyebrow{color:var(--ciel)}
.band--navy .eyebrow::before{background:var(--ciel)}

/* Réglette graduée — clin d'œil aux échelles de plan */
.rule{
  height:9px;margin:0 0 1.6em;
  border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 28px);
  background-size:100% 5px;background-repeat:no-repeat;
}
.band--navy .rule{
  border-top-color:rgba(110,206,251,.35);
  background-image:repeating-linear-gradient(to right,rgba(110,206,251,.35) 0 1px,transparent 1px 28px);
}

/* ---------- Structure ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(56px,8vw,104px) 0}
.band--tight{padding:clamp(40px,5vw,64px) 0}
.band--paper{background:var(--paper)}
.band--navy{background:var(--navy);color:#D7E5F2}
.band--navy h2,.band--navy h3,.band--navy h4{color:var(--white)}
.band--navy .lead{color:#BFD5E8}
.band--navy a{color:var(--ciel)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);padding:10px 16px}

/* ---------- En-tête ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{flex:0 0 auto;display:block}
.brand img{height:44px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{
  font-size:.94rem;font-weight:500;color:var(--navy);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--ciel)}
.nav a[aria-current="page"]{border-bottom-color:var(--attysa)}
/* Le sélecteur .nav a est plus spécifique que .btn--solid : il faut le neutraliser
   explicitement, sinon le libellé du bouton reste bleu marine. */
.nav a.btn{border-bottom:0}
.nav a.btn--solid{color:var(--white)}
.nav a.btn--solid:hover{color:var(--white)}
.nav a.btn--light{color:var(--navy)}
.burger{
  margin-left:auto;display:none;background:none;border:1px solid var(--line);
  padding:9px 12px;cursor:pointer;color:var(--navy);font-family:var(--mono);font-size:.8rem;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--body);font-size:.94rem;font-weight:600;
  padding:13px 22px;border:1px solid var(--attysa);border-radius:2px;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,transform .18s;
}
.btn--solid{background:var(--attysa);color:var(--white)}
.btn--solid:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btn--ghost{background:transparent;color:var(--attysa)}
.btn--ghost:hover{background:var(--attysa);color:var(--white)}
.btn--light{background:var(--ciel);border-color:var(--ciel);color:var(--navy)}
.btn--light:hover{background:var(--white);border-color:var(--white);color:var(--navy)}
.btn::after{content:"→";font-family:var(--mono);transition:transform .18s}
.btn:hover::after{transform:translateX(3px)}

/* ---------- Héros ---------- */
.hero{position:relative;background:var(--navy-deep);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,42,82,.94) 0%,rgba(0,42,82,.82) 46%,rgba(0,65,124,.25) 100%);
}
.hero-in{position:relative;z-index:2;padding:clamp(72px,11vw,132px) 0 clamp(56px,8vw,96px);max-width:44rem}
.hero h1{color:var(--white)}
.hero .lead{color:#CBDDEC;max-width:34rem}
.hero .eyebrow{color:var(--ciel)}
.hero .eyebrow::before{background:var(--ciel)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.hero-facts{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid rgba(110,206,251,.3);
}
.hero-facts div{
  flex:1 1 180px;padding:20px 24px 22px;
  border-right:1px solid rgba(110,206,251,.3);
}
.hero-facts div:last-child{border-right:0}
.hero-facts dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ciel);margin-bottom:.4em}
.hero-facts dd{margin:0;font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:600;font-size:1.05rem;color:var(--white);line-height:1.3}

/* Héros secondaire (pages intérieures) */
.subhero{position:relative;background:var(--navy);overflow:hidden}
.subhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.subhero::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(0,42,82,.93),rgba(0,65,124,.62))}
.subhero-in{position:relative;z-index:2;padding:clamp(56px,7vw,92px) 0;max-width:46rem}
.subhero h1{color:var(--white);margin-bottom:.5em}
.subhero .lead{color:#C6D9EA}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ciel);margin-bottom:1.2em}
.crumb a{color:var(--ciel);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:clamp(20px,3vw,34px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.split{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}}
.split--wide-left{}
.figure-offset{position:relative}
.figure-offset img{border-radius:2px}
.figure-offset::after{
  content:"";position:absolute;left:0;top:0;width:54px;height:54px;
  border-top:5px solid var(--ciel);border-left:5px solid var(--ciel);
}
.figure-offset figcaption{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--slate);
  padding-top:.8em;border-top:1px solid var(--line);margin-top:.9em;
}

/* ---------- Pôles de compétence ---------- */
.pole{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--attysa);
  padding:28px 26px 30px;border-radius:2px;height:100%;
  display:flex;flex-direction:column;
}
.band--paper .pole{background:var(--white)}
.pole h3{margin-bottom:.55em}
.pole p{font-size:1rem;color:#3A5570}
.pole .pole-link{
  margin-top:auto;padding-top:1.2em;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;font-weight:500;
}
.pole .pole-link:hover{text-decoration:underline}
.pole:nth-child(2){border-top-color:var(--navy)}
.pole:nth-child(3){border-top-color:var(--ciel)}

/* ---------- Listes techniques ---------- */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:.42em 0 .42em 1.5em;border-bottom:1px solid var(--line)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{
  content:"";position:absolute;left:0;top:.95em;width:9px;height:9px;background:var(--ciel);
}
.band--navy .ticks li{border-bottom-color:rgba(255,255,255,.14)}

.spec{display:grid;gap:0;margin:0;font-size:1rem}
.spec div{display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:14px;padding:.72em 0;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);padding-top:.22em}
.spec dd{margin:0;color:var(--ink)}
.spec dd strong{color:var(--navy)}

/* ---------- Étapes de la mission ---------- */
.step{background:var(--white);border:1px solid var(--line);padding:26px 24px 28px;border-radius:2px;height:100%}
.step-no{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;color:var(--attysa);
  display:block;margin-bottom:.9em;
}
.step h3{font-size:1.3rem;margin-bottom:.6em}
.step p{font-size:1rem;color:#3A5570}

/* ---------- Logiciels ---------- */
.tools{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.tools li{background:rgba(255,255,255,.06);padding:18px 20px;border-left:2px solid var(--ciel)}
.tools b{display:block;color:var(--white);font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:600;font-size:1.02rem;margin-bottom:.2em}
.tools span{font-size:.94rem;color:#BFD5E8;display:block;
  text-align:justify;text-justify:inter-word;hyphens:auto}

/* ==========================================================================
   PANNEAUX PROJETS — élément signature : le cartouche de plan
   ========================================================================== */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,44px)}
.filtre{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--white);border:1px solid var(--line);color:var(--navy);
  padding:10px 16px;border-radius:2px;cursor:pointer;transition:.16s;
}
.filtre:hover{border-color:var(--attysa);color:var(--attysa)}
.filtre[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}

.projets{display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

/* --zoom : le grossissement au survol. Une seule valeur à changer. */
.projet{
  --zoom:1.15;
  position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.projet.is-hidden{display:none}

/* Équerre bleue en bas à gauche, au survol.
   Elle est en z-index:-1 : elle passe DERRIÈRE le panneau, donc seules
   les deux branches qui dépassent sont visibles — jamais la miniature. */
.projet::before{
  content:"";position:absolute;left:-22px;bottom:-22px;z-index:-1;
  width:56%;height:50%;background:none;
  border-left:22px solid var(--attysa);
  border-bottom:22px solid var(--attysa);
  opacity:0;transform:translate(11px,-11px);transition:.3s cubic-bezier(.2,.7,.3,1);
}

@media (hover:hover) and (min-width:760px){
  .projet:hover,.projet:focus-within{
    transform:scale(var(--zoom));z-index:30;border-color:var(--slate);
    box-shadow:0 34px 64px -32px rgba(0,42,82,.55);
  }
  .projet:hover::before,.projet:focus-within::before{opacity:1;transform:none}
}

/* Le panneau photo : ratio fixe, la photo se recadre toute seule */
/* Le cadre reste au format 3:2 pour que la grille soit régulière, mais
   l'image y est affichée ENTIÈRE : rien n'est jamais coupé. Le vide se
   comble en blanc, ce qui est invisible sur les plans et les coupes,
   dont le fond est déjà blanc. */
.projet-photo{position:relative;aspect-ratio:3/2;background:#fff;overflow:hidden}
.projet-photo > img{width:100%;height:100%;object-fit:contain}

/* Défilement des vues du projet */
.diapos{position:absolute;inset:0}
.diapos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .4s ease;
}
.diapos img.vu{opacity:1}
/* Flèches fines, sans aplat. Le halo blanc les garde lisibles
   aussi bien sur un rendu clair que sur une photo de chantier. */
.fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--attysa);display:grid;place-content:center;
  opacity:0;transition:opacity .22s,color .2s;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.65));
}
.fleche.prec{left:2px}
.fleche.suiv{right:2px}
.fleche.suiv svg{transform:scaleX(-1)}
.fleche:hover{color:var(--navy)}
.projet:hover .fleche,.fleche:focus-visible{opacity:1}
@media (hover:none){.fleche{opacity:.95}}

/* Compteur de vues, encadré en haut à droite */
.compte-vues{
  position:absolute;right:11px;top:11px;z-index:4;
  background:rgba(255,255,255,.92);color:var(--navy);border:1px solid var(--navy);
  font-family:var(--body);font-size:.78rem;font-weight:500;letter-spacing:0;
  padding:3px 10px;line-height:1.35;
}
.projet-photo .vide{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);border:1px dashed var(--line);
}
.projet-tags{position:absolute;left:0;bottom:0;display:flex;flex-wrap:wrap;gap:1px}
.projet-tags span{
  background:rgba(0,42,82,.9);color:var(--ciel);
  font-family:var(--body);font-size:.74rem;font-weight:500;letter-spacing:.02em;
  padding:6px 11px;
}

.projet-corps{padding:22px 22px 8px;flex:1 1 auto}
/* Composition « Sobre » : plus de chasse fixe, plus de capitales. */
.projet-corps h3{
  font-family:var(--body);font-weight:600;font-variation-settings:normal;
  font-size:1.2rem;letter-spacing:-.012em;margin-bottom:.35em;line-height:1.24;
}
.projet-sur{
  font-family:var(--body);font-size:.94rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--attysa);margin:0 0 .9em;
}
.projet-corps p{font-size:.98rem;color:#3A5570;margin-bottom:1em}

/* Cartouche : la bande de données techniques, au bas du panneau */
.cartouche{
  margin:0;padding:14px 22px 18px;border-top:1px solid var(--line);
  font-family:var(--body);font-size:.9rem;line-height:1.55;
  display:grid;grid-template-columns:auto 1fr;gap:3px 14px;
}
.cartouche dt{color:#6C8399;letter-spacing:0;text-transform:none;font-size:.86rem;padding-top:.05em}
.cartouche dd{margin:0;color:var(--navy);font-weight:500}

/* ---------- Galerie illustrée des pages prestations ---------- */
.galerie{display:grid;gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.galerie figure{margin:0}
.galerie img{width:100%;display:block;border:1px solid var(--line);border-radius:2px;background:#fff}
.galerie figcaption{
  font-family:var(--body);font-size:.9rem;color:#4A6885;line-height:1.5;
  padding-top:.75em;border-top:1px solid var(--line);margin-top:.85em;
}
/* Même règle que pour les panneaux : le cadre garde un format constant,
   l'image y est affichée entière et le vide se comble en blanc. */
.galerie--photos img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.galerie--plans img{padding:10px}
.galerie--large{grid-template-columns:1fr}
.galerie--duo{grid-template-columns:1fr}
@media(min-width:820px){.galerie--duo{grid-template-columns:1.35fr 1fr;align-items:start}}

/* ---------- Formulaire ---------- */
.form{display:grid;gap:18px}
.champ{display:grid;gap:7px}
.champ--2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.champ--2{grid-template-columns:1fr 1fr}}
.champ label{
  font-family:var(--body);font-size:.94rem;letter-spacing:0;text-transform:none;
  color:var(--navy);font-weight:600;
}
.champ label .req{color:var(--attysa)}
.champ input,.champ select,.champ textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;width:100%;transition:border-color .16s,box-shadow .16s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--attysa);box-shadow:0 0 0 3px rgba(0,124,168,.14);
}
.champ textarea{min-height:160px;resize:vertical}
.champ .aide{font-size:.86rem;color:var(--slate)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:#3A5570}
.consent input{width:19px;height:19px;flex:0 0 auto;margin-top:3px;accent-color:var(--attysa)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerte{border-left:3px solid var(--attysa);background:var(--paper);padding:14px 18px;font-size:.96rem}

.coord{list-style:none;margin:0;padding:0}
.coord li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:.85em 0;border-bottom:1px solid rgba(255,255,255,.16)}
.coord li:last-child{border-bottom:0}
.coord .k{font-family:var(--body);font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ciel);padding-top:.3em;min-width:96px}
.coord .v{color:var(--white);font-size:1.05rem}
.coord a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(110,206,251,.6)}
.coord a:hover{color:var(--ciel)}

/* ---------- Appel à l'action ---------- */
.cta{background:var(--attysa);color:var(--white)}
.cta h2{color:var(--white)}
.cta p{color:#DDF1FA;max-width:40rem}
.cta-in{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.cta-in{grid-template-columns:1.4fr auto}}

/* ---------- Pied de page ---------- */
.site-foot{background:var(--navy-deep);color:#A8C2DA;padding:clamp(48px,6vw,72px) 0 28px;font-size:.96rem}
.foot-grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-mark{display:flex;align-items:center;gap:12px;margin-bottom:1em}
.foot-mark svg{flex:0 0 auto}
.foot-mark b{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:700;font-size:1.28rem;color:var(--white);letter-spacing:-.01em;display:block;line-height:1.05}
.foot-mark span{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--ciel);display:block}
.site-foot h4{color:var(--white);font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:1em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.55em}
.site-foot a{color:#A8C2DA;text-decoration:none}
.site-foot a:hover{color:var(--white);text-decoration:underline}
.foot-bas{display:flex;flex-wrap:wrap;gap:14px 26px;padding-top:24px;font-size:.86rem;color:#7E9CB8}
.foot-bas p{margin:0}
.foot-bas .sep{margin-left:auto}

/* ---------- Apparition au défilement ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reveal.vu{opacity:1;transform:none}

/* ---------- Adaptatif ---------- */
@media(max-width:860px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--white);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 20px;
  }
  .nav.ouvert{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{color:var(--attysa)}
  .nav .btn{margin-top:14px;justify-content:center}
  .hero-facts div{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(110,206,251,.3)}
  .hero-facts div:last-child{border-bottom:0}
  .spec div{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-head,.site-foot,.filtres,.hero-actions{display:none}
  body{font-size:11pt}
}