/* ==========================================================================
   seract.net — feuille de style unique
   --------------------------------------------------------------------------
   Toutes les valeurs ici ont ete RELEVEES sur le site en production le
   20/10/2026, dans les styles calcules par Chrome. Rien n'est devine.

   Le site d'origine tourne sur le theme JupiterX (Artbees) avec ses widgets
   « Raven », plus Elementor Pro. On remplace tout cela par une feuille et un
   script.
   ========================================================================== */

/* --- 1. Les jetons, mesures sur le rendu -------------------------------- */
:root{
  --navy:      #1C244B;   /* rgb(28,36,75)    — les titres h2 */
  --navy-pied: #160E37;   /* rgb(22,14,55)    — le fond du pied */
  --orange:    #FA4612;   /* rgb(250,70,18)   — les sur-titres h3 et h4 */
  --orange-mot:#F56702;   /* rgb(245,103,2)   — le mot-symbole « SerAct » */
  --gris:      #748494;   /* rgb(116,132,148) — le texte courant */
  --blanc:     #FFFFFF;
  --noir:      #000000;
  --voile-ent: rgba(0,0,0,.29);   /* le bandeau, semi-transparent */

  --poppins:   "Poppins", "Helvetica Neue", Arial, sans-serif;
  --roboto:    "Roboto", Arial, sans-serif;
  --opensans:  "Open Sans", Arial, sans-serif;

  --large:     1140px;    /* largeur de contenu dominante (releve) */
  --entete:    76px;
}

/* --- 2. Les polices, auto-hebergees -------------------------------------
   Le site d'origine en chargeait TROIS depuis fonts.googleapis.com. Les
   auto-heberger evite d'ouvrir deux domaines Google dans la politique de
   securite et de signaler chaque visiteur a Google des le premier octet.
   Sous-ensemble latin : 7,7 a 22 Ko par graisse. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/poppins-400.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/poppins-500.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/poppins-600.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/poppins-700.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/open-sans-400.woff2") format("woff2");}

/* --- 3. Remise a zero ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--blanc); color:var(--noir);
  font-family:var(--poppins); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; border:0; display:block;}
a{color:inherit;}
button,input,select,textarea{font:inherit; color:inherit;}

/* --- 4. Typographie, telle que mesuree -----------------------------------
     h1  Poppins 70/700 blanc, interligne 85
     h2  Poppins 44/700 #1C244B, interligne 44   (et 28/700 pour les petits)
     h3  Poppins 23/600 #FA4612, interligne 28
     h4  Poppins 18/500 blanc   |  20/500 #FA4612 MAJUSCULES
     h5  Poppins 18/500 noir
     p   Poppins 15/400 #748494, interligne 23
   --------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-family:var(--poppins); margin:0; text-wrap:balance;}
h1{font-size:70px; font-weight:700; line-height:1.21; color:var(--blanc);}
h2{font-size:44px; font-weight:700; line-height:1; color:var(--navy);}
h2.petit{font-size:28px; line-height:1.21;}
h3{font-size:23px; font-weight:600; line-height:1.22; color:var(--orange);}
h4{font-size:18px; font-weight:500; line-height:1.22; color:var(--blanc);}
h4.surtitre{font-size:20px; color:var(--orange); text-transform:uppercase;}
h5{font-size:18px; font-weight:500; line-height:1.22; color:var(--noir);}
p{font-size:15px; font-weight:400; line-height:1.53; color:var(--gris);
  margin:0 0 1em;}
p:last-child{margin-bottom:0;}
/* `.intro` est posee sur un DIV qui enveloppe un `<p>`, et le `p` imposait ses
   propres `font-size:15px` et `color:#748494` — la cascade ne passait donc pas
   et le sous-titre du heros s'affichait en petit gris. Il faut cibler le
   paragraphe interne. */
.intro,.intro p{font-size:22px; line-height:1.5; color:rgba(255,255,255,.7);}
.intro{margin:0 0 35px;}
/* Pas de `max-width` : la colonne de 63,509 % contraint deja la largeur.
   Avec 14ch le titre cassait apres « value » au lieu de « to ». */
.heros h1{margin:0 0 30px;}

/* --- 5. Trame ------------------------------------------------------------- */
.bloc{padding:80px 20px;}
.dedans{max-width:var(--large); margin:0 auto;}
/* Les proportions viennent des donnees, par `--g1` et `--g2` posees en style
   en ligne. On les LIT ici plutot que de laisser le style en ligne declarer
   `grid-template-columns` : sinon aucune requete media ne pourrait repasser la
   grille en une seule colonne sur telephone. */
.duo{display:grid; grid-template-columns:calc(var(--g1,1)*1fr) calc(var(--g2,1)*1fr);
  gap:40px; align-items:center;}
.centre{text-align:center;}
.etroit{max-width:660px; margin:0 auto;}

/* --- 6. L'en-tete ---------------------------------------------------------
   Releve : hauteur 76 px, fond `rgba(0,0,0,.29)` — semi-transparent, et non
   opaque. Le mot-symbole « SerAct » est en Roboto 56/700 orange #F56702. */
.entete{
  position:relative; z-index:40; min-height:var(--entete);
  display:flex; align-items:center; padding:10px 20px;
  background:var(--voile-ent);
}
.entete .dedans{display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:24px; max-width:1155px;}
.mot-symbole{
  font-family:var(--roboto); font-size:56px; font-weight:700;
  color:var(--orange-mot); text-decoration:none; line-height:1;
}
.menu{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
/* MESURE sur le rendu : le menu est en MAJUSCULES avec un interlettrage, et
   l'entree de la page courante est en orange. J'avais une casse normale sans
   espacement et aucun etat actif. */
.menu a{color:var(--blanc); text-decoration:none; font-family:var(--opensans);
  font-size:14px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; transition:color .3s ease;}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current="page"]{color:var(--orange-mot);}
.bascule{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.bascule span{display:block; width:24px; height:2px; background:var(--blanc);
  margin:5px 0;}

/* L'en-tete se superpose au heros : sur le site d'origine il est dans le flux
   mais par-dessus l'image, avec son voile sombre pour la lisibilite. */
.entete.sur-image{position:absolute; top:0; left:0; right:0;}

/* --- 7. Le heros ----------------------------------------------------------
   Releve : hauteur 735 px, remplissage 365 px en haut et 370 en bas, image de
   fond avec un voile noir. La colonne de texte fait 63,509 %. */
.heros{
  position:relative; background-position:center; background-size:cover;
  /* MESURE : sur l'original le titre commence a environ 210 px du haut et la
     section fait 735 px. Un remplissage de 365 px en haut le poussait bien trop
     bas — les 365/370 d'Elementor portent sur un conteneur interne, pas sur la
     section. On reproduit le RESULTAT : le titre a la bonne hauteur, et la
     section a la bonne hauteur totale. */
  background-repeat:no-repeat; padding:135px 20px 120px; min-height:735px;
  display:flex; align-items:center; color:var(--blanc);
}
.heros::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);}
.heros > .dedans{position:relative; z-index:2;}
.heros .colonnes{display:grid; grid-template-columns:63.509fr 36.447fr; gap:30px;
  align-items:center;}
.heros .duo{align-items:center;}

/* --- 8. Les boutons -------------------------------------------------------
   Releve : Open Sans 18/400 blanc, fond blanc translucide, rayon 50 px
   (pilule), remplissage 12px 24px, 169 x 50 px. Le bouton de formulaire, lui,
   est en Poppins 13/600. */
.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:169px; min-height:50px; padding:12px 24px; border-radius:50px;
  font-family:var(--opensans); font-size:18px; font-weight:400;
  color:var(--blanc); text-decoration:none; cursor:pointer;
  /* MESURE : fond BLANC PLEIN, texte navy, libelle en majuscules espacees.
     J'avais fait un bouton translucide — rien a voir. */
  background:var(--blanc); color:var(--navy); border:0;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  transition:background-color .3s ease, color .3s ease;
}
.bouton:hover,.bouton:focus-visible{background:var(--orange-mot); color:var(--blanc);}
.formulaire .bouton{
  font-family:var(--poppins); font-size:13px; font-weight:600;
  background:var(--orange); border-color:var(--orange);
}
.formulaire .bouton:hover{background:var(--navy); border-color:var(--navy);
  color:var(--blanc);}

/* --- 9. Les six « valeurs » (icon-box) ------------------------------------
   Releve : cartes blanches, coins arrondis de 20 px, trois par rangee, sur un
   fond d'image `home-bg-08.png` en `contain`. */
.valeurs{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.valeur{
  background:var(--blanc); border-radius:20px; padding:34px 28px;
  text-align:center; box-shadow:0 6px 28px rgba(28,36,75,.07);
}
.valeur img{width:54px; height:54px; margin:0 auto 18px;}
.valeur h5{margin:0 0 10px;}
.valeur p{font-size:15px;}

/* --- 10. Les trois axes (« Outcome Focused ») ----------------------------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.trio h3{margin:0 0 6px;}
.trio h4{color:var(--navy); margin:0 0 12px;}

/* --- 11. L'equipe ---------------------------------------------------------- */
.equipe{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  text-align:center;}
.equipe img{width:170px; height:170px; border-radius:50%; margin:0 auto 16px;
  object-fit:cover;}
.equipe h5{margin:0 0 4px;}
.equipe .role{font-size:15px; color:var(--orange); margin:0 0 10px;}

/* --- 12. Le pied ----------------------------------------------------------
   Releve : hauteur 74 px, fond #160E37, aucun remplissage, le texte
   « © 2023 SerAct. All Rights Reserved. » en Open Sans 18 #748494. */
.pied{
  background:var(--navy-pied); color:var(--gris); min-height:74px;
  display:flex; align-items:center; padding:0 20px;
  font-family:var(--opensans); font-size:18px;
}
.pied .dedans{display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:20px; flex-wrap:wrap;}
.pied a{color:var(--blanc); text-decoration:none; font-size:12px;}
.pied a:hover{text-decoration:underline;}
.pied .reseaux{display:flex; gap:10px; list-style:none; margin:0; padding:0;}
.pied .reseaux a{display:inline-flex; width:34px; height:34px;
  align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--blanc);}
.pied .reseaux svg{width:16px; height:16px; fill:currentColor;}

/* --- 13. Le formulaire ----------------------------------------------------- */
.formulaire{display:grid; gap:14px; max-width:620px;}
.formulaire label{display:block; font-size:14px; margin:0 0 4px;
  color:var(--navy);}
.formulaire input,.formulaire textarea{
  width:100%; padding:12px 14px; border:1px solid #d8dde4; border-radius:6px;
  background:var(--blanc); transition:border-color .3s ease;
}
.formulaire input:focus,.formulaire textarea:focus{
  outline:0; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(250,70,18,.15);
}
.formulaire textarea{min-height:130px; resize:vertical;}
.formulaire .message{font-size:15px; min-height:1.5em;}
.formulaire .message.ok{color:#15803d;}
.formulaire .message.ko{color:#b91c1c;}
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;}
.visuellement-cache{position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* --- 13bis. LA VISIBILITE PAR FORMAT -------------------------------------
   LE DEFAUT : le generateur emettait bien `sans-bureau`, `sans-tablette` et
   `sans-mobile` — mais AUCUNE REGLE ne leur correspondait ici. Les classes
   etaient donc decoratives, et le second bouton « MEET US » du heros, masque
   sur bureau dans l'original, s'affichait quand meme.
   Les points de rupture suivent ceux d'Elementor : 1025 et 768. */
@media (min-width:1025px){ .sans-bureau{display:none!important;} }
@media (min-width:768px) and (max-width:1024px){ .sans-tablette{display:none!important;} }
@media (max-width:767px){ .sans-mobile{display:none!important;} }

/* --- 14. L'apparition au defilement ---------------------------------------- */
.apparait{opacity:0;}
.apparait.vu{animation:apparition .9s ease forwards;}
@keyframes apparition{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .apparait,.apparait.vu{opacity:1; animation:none;}
  *{transition-duration:.01ms!important; animation-duration:.01ms!important;}
}

/* --- 15. Vue etroite ------------------------------------------------------- */
@media (max-width:1024px){
  .valeurs{grid-template-columns:repeat(2,1fr);}
  .trio,.equipe{grid-template-columns:1fr; gap:34px;}
  .heros .colonnes{grid-template-columns:1fr;}
}
@media (max-width:767px){
  h1{font-size:38px; line-height:1.2;}
  h2{font-size:28px; line-height:1.2;}
  h2.petit{font-size:24px;}
  h3{font-size:20px;}
  .intro{font-size:16px;}
  .heros{padding:160px 20px 120px;}
  .bloc{padding:50px 20px;}
  .duo{grid-template-columns:1fr!important;}
  .valeurs{grid-template-columns:1fr;}
  .mot-symbole{font-size:34px;}
  .menu{display:none; position:absolute; top:var(--entete); left:0; right:0;
    flex-direction:column; gap:0; background:rgba(0,0,0,.92); padding:10px 20px;}
  .menu.ouvert{display:flex;}
  .menu li{padding:10px 0;}
  .bascule{display:block;}
  .pied .dedans{flex-direction:column; text-align:center;}
}