/* ==========================================================================
   ESDIIS — Feuille de styles production
   Identité : navy #001744 · magenta #EF39A7 · turquoise #01D2B4
   Typographie : Space Grotesk (titres) + Archivo (corps)
   NB : la mise en page fine reste en styles inline dans le HTML (fidèle à la
   maquette validée). Ce fichier gère : resets, états (hover/focus),
   animations et adaptation responsive.
   ========================================================================== */

:root{
  --navy:#001744;
  --navy-deep:#001033;
  --magenta:#EF39A7;
  --turquoise:#01D2B4;
  --paper:#F4F6FA;
  --ink:#3A4763;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--navy);}
body{
  font-family:'Archivo',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;}
a{color:var(--turquoise);text-decoration:none;}
a:hover{color:var(--magenta);}
a:focus-visible,button:focus-visible{outline:2px solid var(--turquoise);outline-offset:3px;border-radius:2px;}
::selection{background:var(--magenta);color:#fff;}

/* Défilement des flux d'air stylisés (calque plan technique) */
@keyframes flowdash{to{stroke-dashoffset:-160;}}

/* Reveal au scroll : état initial posé par le JS (data-reveal) */

/* ==========================================================================
   NAVIGATION MOBILE (hamburger + overlay plein écran)
   ========================================================================== */
.nav-burger{
  display:none;
  background:none;border:none;cursor:pointer;
  width:48px;height:48px;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;padding:0 2px;
}
.nav-burger span{display:block;width:26px;height:2px;background:#fff;}
.nav-burger span:nth-child(2){width:18px;background:var(--turquoise);}

.mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:120;background:var(--navy-deep);
  flex-direction:column;padding:0 0 34px;
}
.mobile-menu.open{display:flex;animation:menuIn .3s ease both;}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
.mobile-menu__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;height:88px;border-bottom:1px solid rgba(255,255,255,.09);flex-shrink:0;
}
.mobile-menu__links{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 30px;gap:2px;}
.mobile-menu__links a{
  font-family:'Space Grotesk',Archivo,sans-serif;
  color:rgba(255,255,255,.82);font-size:30px;font-weight:700;letter-spacing:-.01em;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu__links a[aria-current="true"]{color:#fff;}
.mobile-menu__foot{padding:0 30px;display:flex;flex-direction:column;gap:16px;flex-shrink:0;}
.mobile-menu__foot .cta{
  background:var(--magenta);color:#fff;font-size:16px;font-weight:700;
  padding:16px;border-radius:3px;text-align:center;
}
.mobile-menu__close{
  background:none;border:none;cursor:pointer;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   RESPONSIVE — la maquette est conçue en 1360 px ; on adapte proprement.
   Les grilles inline se replient, les titres et marges se réduisent.
   ========================================================================== */
@media (max-width:1024px){
  /* wrappers pleine largeur */
  [style*="min-width:1180px"]{min-width:0 !important;}
  /* toutes les grilles passent en une colonne */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  /* les colonnes fusionnées reprennent toute la largeur */
  [style*="grid-column:span 2"]{grid-column:auto !important;}
  /* header : nav desktop masquée, hamburger visible */
  .nav-desktop{display:none !important;}
  .nav-burger{display:flex !important;}
}

@media (max-width:1024px){
  /* réduction des grands paddings de section */
  [style*="padding:150px 44px 110px"]{padding:120px 24px 72px !important;}
  [style*="padding:120px 44px"]{padding:72px 24px !important;}
  [style*="padding:110px 44px"]{padding:72px 24px !important;}
  [style*="padding:74px 44px 42px"]{padding:56px 24px 36px !important;}
  [style*="padding:0 44px"]{padding-left:22px !important;padding-right:22px !important;}
  /* écarts de grille resserrés */
  [style*="gap:80px"]{gap:44px !important;}
  [style*="gap:76px"]{gap:40px !important;}
  [style*="gap:70px"]{gap:40px !important;}
  [style*="gap:60px"]{gap:36px !important;}
}

@media (max-width:640px){
  /* échelle typographique */
  h1[style]{font-size:38px !important;}
  h2[style]{font-size:30px !important;}
  /* héros plus compact */
  [style*="min-height:92vh"]{min-height:auto !important;}
  [style*="padding:120px 24px 72px"]{padding:104px 20px 60px !important;}
  /* boutons empilés pleine largeur */
  .btn-row{flex-direction:column !important;align-items:stretch !important;}
  .btn-row a{text-align:center;}
  /* footer bas en colonne */
  .footer-bottom{flex-direction:column !important;gap:14px !important;}
}

/* ==========================================================================
   AJOUTS PRODUCTION — accessibilité, formulaire, reduced-motion
   ========================================================================== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--turquoise);color:var(--navy);
  font-weight:700;font-size:15px;padding:12px 22px;border-radius:0 0 3px 0;
}
.skip-link:focus{left:0;}

/* Honeypot anti-spam : masqué pour les humains, visible pour les bots */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}

/* Statut du formulaire */
.form-status.is-ok{display:block !important;background:rgba(1,210,180,.12);color:#0A7A6C;border:1px solid rgba(1,210,180,.45);}
.form-status.is-err{display:block !important;background:rgba(239,57,167,.08);color:#B31C77;border:1px solid rgba(239,57,167,.35);}
button[disabled]{opacity:.65;cursor:wait;}

/* Animations décoratives coupées si l'utilisateur préfère réduire le mouvement */
@media (prefers-reduced-motion: reduce){
  [style*="animation:flowdash"]{animation:none !important;}
  .mobile-menu.open{animation:none;}
}


/* ==========================================================================
   CORRECTIFS MOBILE — passe production 2026-07-08
   ========================================================================== */
/* Filet de sécurité : aucun défilement horizontal (clip ne casse pas sticky) */
html, body { overflow-x: clip; }

@media (max-width:1024px){
  /* Les rangées flex (CTA pleine largeur, en-têtes de section) passent à la ligne
     au lieu d'être rognées par overflow:hidden */
  [style*="display:flex"][style*="justify-content:space-between"][style*="gap:40px"]{flex-wrap:wrap !important;}
  [style*="display:flex"][style*="align-items:flex-end"][style*="gap:40px"]{flex-wrap:wrap !important;}
  [style*="white-space:nowrap"]{white-space:normal !important;}
  /* Paddings de section restants non couverts par la première passe */
  [style*="padding:130px 44px 84px"]{padding:104px 24px 60px !important;}
  [style*="padding:100px 44px"]{padding:64px 24px !important;}
  [style*="padding:96px 44px"]{padding:64px 24px !important;}
  [style*="padding:90px 44px"]{padding:64px 24px !important;}
  [style*="padding:0 44px 110px"]{padding:0 24px 72px !important;}
}

@media (max-width:640px){
  /* Carte formulaire : padding adapté aux petits écrans */
  form[id="contact-form"]{padding:26px 18px !important;}
  /* Compteurs légèrement réduits pour respirer à 390 px */
  [style*="font-size:62px"]{font-size:48px !important;}
  [style*="font-size:56px"][style*="font-weight:800"]{font-size:44px !important;}
  /* Badges de légende photo : autorisés à passer à la ligne */
  [style*="letter-spacing:.16em"]{letter-spacing:.08em !important;}
}