/* Suricate Agency - design system (repris tel quel de la maquette validee) */
body{margin:0;background:#F3EADB;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#241811;}
*{box-sizing:border-box;}
a{color:#C07C3C;text-decoration:none;}
a:hover{color:#241811;}
html{scroll-behavior:smooth;overflow-x:hidden;}
input,textarea,select{font-family:inherit;}
img{max-width:100%;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes podfloat{0%,100%{transform:scale(1.06) translateY(1.4%)}50%{transform:scale(1.06) translateY(-1.8%)}}
@keyframes podglow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}
@keyframes reveal{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}

.podframe .expert{opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);}
.podframe:hover .expert{opacity:1;transform:none;}

html[data-motion="off"] [data-pod]{animation:none!important;transform:none!important;}
@media (prefers-reduced-motion: reduce){[data-pod]{animation:none!important;transform:none!important;}}
html[data-motion="off"] [data-reveal]{animation:none!important;opacity:1!important;transform:none!important;}
@media (prefers-reduced-motion: reduce){[data-reveal]{animation:none!important;opacity:1!important;transform:none!important;}}

#om-menu{opacity:0;visibility:hidden;transition:opacity .4s ease, visibility .4s;}
#om-menu[data-open="true"]{opacity:1;visibility:visible;}
#om-menu .mi{opacity:0;transform:translateY(22px);transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), color .2s;}
#om-menu[data-open="true"] .mi{opacity:1;transform:none;}
#om-menu[data-open="true"] .mi:nth-child(1){transition-delay:.10s}
#om-menu[data-open="true"] .mi:nth-child(2){transition-delay:.17s}
#om-menu[data-open="true"] .mi:nth-child(3){transition-delay:.24s}
#om-menu[data-open="true"] .mi:nth-child(4){transition-delay:.31s}
#om-menu[data-open="true"] .mi:nth-child(5){transition-delay:.32s}
#om-menu[data-open="true"] .mi:nth-child(6){transition-delay:.38s}
#om-menu .mi:hover{color:var(--accent,#C07C3C);}
#om-menu .mi:hover svg{transform:translateX(6px);}
#om-menu .mi svg{transition:transform .3s;}

/* Responsive : la maquette bascule les grilles en 1 colonne sous 900px */
@media (max-width:900px){
  .sur-hero-grid,.sur-pole-row,.sur-why-grid,.sur-contact-grid{grid-template-columns:1fr!important;}
  /* le sommaire des pages legales gardait 300px, ne laissant que 6px au texte */
  #legal-grid{grid-template-columns:1fr!important;}
  /* sans min-width:0, un enfant de grille impose sa largeur minimale et deborde */
  .sur-contact-grid > *,#legal-grid > *{min-width:0!important;}
  .sur-pole-row .sur-order2{order:0!important;}
  nav{padding:16px 22px!important;}
  header,section,footer > div{padding-left:22px!important;padding-right:22px!important;}
}

/* Barre de navigation : adaptation aux petits ecrans.
   La maquette d origine ne prevoyait aucune regle pour le header, et l ajout du
   selecteur de langue portait la barre a quatre elements. Sur mobile, le libelle
   du bouton de contact est masque et le bouton devient une pastille avec la seule
   icone : le logo n est plus comprime et plus aucun libelle ne passe a la ligne. */
@media (max-width:760px){
  nav{gap:10px;}
  nav > div{gap:8px!important;}
  .sur-nav-cta-label{display:none;}
  .sur-nav-cta{padding:11px!important;}
  .sur-nav-logo img{height:34px!important;}
}
@media (max-width:420px){
  nav{padding:12px 16px!important;}
  .sur-nav-menu{padding:10px 14px 10px 16px!important;gap:9px!important;}
}

/* Champs de formulaire cote a cote : empiles sur mobile, sinon le formulaire
   garde une largeur minimale de 521px et fait deborder la page. */
@media (max-width:700px){
  .sur-field-row{grid-template-columns:1fr!important;}
}

/* Halos decoratifs a largeur fixe (440px et 400px) : ils depassaient l ecran.
   Bornes a la largeur du viewport, l effet visuel est conserve. */
.sur-halo{max-width:92vw;max-height:92vw;}

/* reCAPTCHA v2 : le widget Google fait 302px de large et ne se redimensionne pas.
   Sur mobile, on le remet a l echelle pour qu il tienne dans le formulaire. */
[data-recaptcha-slot]:empty{display:none;}
@media (max-width:420px){
  [data-recaptcha-slot]{transform:scale(.85);transform-origin:0 0;height:65px;}
}