/* ==========================================================================
   Media Pay - Coup de jeune (juillet 2026)
   --------------------------------------------------------------------------
   Fichier volontairement separe de style.css : il ne fait que RAFFINER
   l'existant. Pour tout annuler, il suffit de retirer la ligne
   <link rel="stylesheet" href="css/modernisation.css"> des pages.
   Aucune couleur de marque n'est modifiee : l'orange #ffb426 et le bleu
   profond #091d3a restent les deux seules teintes.
   ========================================================================== */

:root{
  --mp-bleu: #091d3a;
  --mp-orange: #ffb426;
  --mp-texte: #2b3444;
  --mp-texte-doux: #5b6675;
  --mp-bordure: #e6eaf0;
  --mp-rayon: 6px;
  --mp-rayon-lg: 12px;
  --mp-ombre: 0 2px 8px rgba(9, 29, 58, 0.06);
  --mp-ombre-forte: 0 8px 24px rgba(9, 29, 58, 0.10);
  --mp-transition: 0.25s ease;
}

/* --- 1. Typographie -------------------------------------------------------
   On remplace Roboto / Open Sans par la pile systeme : Segoe UI sur Windows,
   San Francisco sur Mac. Rendu plus actuel, aucune requete reseau, et surtout
   plus d'appel a fonts.googleapis.com (les deux @import correspondants ont ete
   retires de style.css : ils transmettaient l'IP des visiteurs a Google). */
body,
.slide-content-box p,
p, li, td, span, label, input, textarea, button, select{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.sec-title h1, .sec-title h2,
.rev_slider_wrapper .slide-content-box h1,
.rev_slider_wrapper .slide-content-box h2{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.015em;   /* les grands titres respirent mieux resserres */
}

/* Le corps de texte etait a 1,43 d'interligne : trop serre pour du paragraphe.
   1,65 est le confort de lecture standard aujourd'hui. */
body{
  line-height: 1.65;
  color: var(--mp-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content-box p,
.service-text p,
.text p{
  line-height: 1.7;
  color: var(--mp-texte-doux);
}

/* --- 2. Angles et profondeur ---------------------------------------------
   Les angles parfaitement droits datent la page. Un rayon discret suffit :
   on reste tres loin de l'effet "bouton pilule" generique. */
.thm-btn,
.form-control,
input[type="text"], input[type="email"], input[type="tel"], textarea{
  border-radius: var(--mp-rayon);
}
.single-service-item,
.image-box,
.inner-box{
  border-radius: var(--mp-rayon-lg);
  overflow: hidden;
}

/* --- 3. Cartes de service -------------------------------------------------
   Bordures dures remplacees par une ombre douce, avec un survol qui souleve
   legerement la carte. C'est le geste qui modernise le plus a lui seul. */
.single-service-item{
  background: #ffffff;
  box-shadow: var(--mp-ombre);
  border: 1px solid var(--mp-bordure);
  transition: box-shadow var(--mp-transition), transform var(--mp-transition);
}
.single-service-item:hover{
  box-shadow: var(--mp-ombre-forte);
  transform: translateY(-3px);
}
.single-service-item .service-icon img{
  transition: transform var(--mp-transition);
}
.single-service-item:hover .service-icon img{
  transform: scale(1.06);
}

/* --- 4. Transitions -------------------------------------------------------
   L'original utilisait 0,5s avec une courbe brutale (cubic-bezier(.4,0,1,1)),
   ce qui donnait un effet mou puis sec. On raccourcit et on adoucit. */
/* Proprietes listees explicitement plutot que "all" : "all" anime aussi des
   proprietes qu'on ne veut pas voir bouger (outline de focus, notamment). */
.thm-btn,
.thm-btn:hover,
a, .social-list a{
  transition: color var(--mp-transition), background-color var(--mp-transition),
              border-color var(--mp-transition), transform var(--mp-transition),
              box-shadow var(--mp-transition);
}
.thm-btn{
  letter-spacing: 0.02em;
}
.thm-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(9, 29, 58, 0.18);
}

/* --- 5. Champs de formulaire ---------------------------------------------
   Un champ sans etat de focus visible est un probleme d'accessibilite :
   la personne qui navigue au clavier ne sait plus ou elle se trouve. */
.form-control,
input[type="text"], input[type="email"], input[type="tel"], textarea{
  border: 1px solid var(--mp-bordure);
  transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
}
.form-control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, textarea:focus{
  border-color: var(--mp-orange);
  box-shadow: 0 0 0 3px rgba(255, 180, 38, 0.22);
  outline: none;
}
/* Repere clavier sur les liens et boutons, sans gener la navigation souris. */
a:focus-visible,
button:focus-visible,
.thm-btn:focus-visible{
  outline: 3px solid rgba(255, 180, 38, 0.55);
  outline-offset: 2px;
}

/* --- 6. Liens du menu -----------------------------------------------------
   Pas de soulignement ajoute ici : le theme en dessine deja un sous l'element
   actif, et en superposer un second donnait un double trait. On se contente
   d'adoucir le passage de couleur au survol. */
.navigation > li > a{
  transition: color var(--mp-transition);
}

/* --- 7. Garde-fous images -------------------------------------------------
   Empeche toute image trop large de provoquer un debordement horizontal. */
img{
  max-width: 100%;
  height: auto;
}
/* Le slider gere ses propres dimensions : on ne le contraint pas. */
.rev_slider_wrapper img,
.rev_slider img{
  max-width: none;
}

/* --- 7 bis. Accordeon de la FAQ -------------------------------------------
   Chaque question est un vrai <button> : accessible au clavier, annonce son
   etat ouvert/ferme aux lecteurs d'ecran. Les reponses restent dans le HTML
   (attribut hidden), donc indexables par Google. */
.mp-faq-intro{
  margin-bottom: 26px;
  font-size: 16px;
}
.mp-faq{
  border-top: 1px solid var(--mp-bordure);
}
.mp-faq-item{
  border-bottom: 1px solid var(--mp-bordure);
}
.mp-faq-titre{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.mp-faq-q{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 18px 44px 18px 0;
  position: relative;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mp-bleu);
  cursor: pointer;
  transition: color var(--mp-transition);
}
.mp-faq-q:hover{
  color: #14487f;
}
/* Chevron dessine en CSS : pas d'icone supplementaire a charger. */
.mp-faq-q:after{
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--mp-orange);
  border-bottom: 2px solid var(--mp-orange);
  transform: rotate(45deg);
  transition: transform var(--mp-transition);
}
.mp-faq-q[aria-expanded="true"]:after{
  transform: rotate(-135deg);
  margin-top: -2px;
}
.mp-faq-r{
  padding: 0 0 20px;
}
.mp-faq-r p{
  margin: 0;
  line-height: 1.7;
  color: var(--mp-texte-doux);
}
.mp-faq-r a{
  color: #14487f;
  text-decoration: underline;
}

@media (max-width: 767px){
  .mp-faq-q{ font-size: 15px; padding-right: 36px; }
}

/* --- 8. Pied de page ------------------------------------------------------ */
/* Logo Media Technologies : fond blanc discret pour qu'il se detache du pied
   de page sombre, sans l'encadrer lourdement. */
.footer-logo img{
  max-width: 200px;
  height: auto;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: var(--mp-rayon);
}
.footer-form p{
  margin-bottom: 14px;
  line-height: 1.6;
}
.social-list a:hover{
  transform: translateY(-2px);
}

/* --- 8 bis. Les trois etapes du premier slide -----------------------------
   Numero en pastille orange, libelle blanc, description en retrait.
   Le message vient de l'ancienne image "creez / installez / gagnez" : il est
   desormais en texte, donc lisible par Google et par les lecteurs d'ecran. */
.mp-etapes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 34px;
  max-width: 1000px;
}
.mp-etapes > li{
  flex: 1 1 0;
  min-width: 0;
  padding-left: 46px;
  position: relative;
  color: #ffffff;
}
.mp-etapes .mp-num{
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  line-height: 30px;
  text-align: center;
  border: 2px solid var(--mp-orange);
  border-radius: 50%;
  color: var(--mp-orange);
  font-size: 16px;
  font-weight: 700;
}
.mp-etapes strong{
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 5px;
  color: #ffffff;
}
.mp-etapes .mp-desc{
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1024px){
  .mp-etapes{ gap: 22px; max-width: 700px; }
  .mp-etapes strong{ font-size: 15px; }
  .mp-etapes .mp-desc{ font-size: 12px; }
}
/* Sur mobile la hauteur du slide est limitee : on garde les intitules,
   qui portent le message, et on retire les descriptions. */
@media (max-width: 767px){
  .mp-etapes{ gap: 12px; max-width: 100%; }
  .mp-etapes > li{ padding-left: 0; padding-top: 34px; text-align: center; }
  .mp-etapes .mp-num{ left: 50%; transform: translateX(-50%); width: 28px; height: 28px; line-height: 24px; font-size: 13px; }
  .mp-etapes strong{ font-size: 12.5px; margin-bottom: 0; }
  .mp-etapes .mp-desc{ display: none; }
}

/* --- 8 ter. Apparition au defilement --------------------------------------
   La classe .mp-anim est posee par js/animations.js, .mp-visible quand le bloc
   entre dans la fenetre. Mouvement volontairement court (16px) et rapide :
   sur un site de paiement, l'animation doit accompagner la lecture, pas la
   retarder. Si le JavaScript ne s'execute pas, rien n'est masque. */
.mp-anim{
  opacity: 0;
  /* 22px et non 16 : en dessous, le mouvement passe sous le seuil de
     perception et l'animation ne se remarque tout simplement pas. */
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.mp-anim.mp-visible{
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Leger decalage entre cartes voisines : l'oeil suit le mouvement. */
.single-service-item.mp-anim{ transition-delay: 0s; }
.item:nth-child(2) .single-service-item.mp-anim{ transition-delay: 0.09s; }
.item:nth-child(3) .single-service-item.mp-anim{ transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce){
  .mp-anim{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 9. Slider : garde-fou au chargement ----------------------------------
   Avant l'initialisation de Revolution, l'image brute s'affiche a sa hauteur
   naturelle, ce qui provoque un saut de mise en page d'environ une seconde. */
#slider1:not(.revslider-initialised){
  max-height: 520px;
  overflow: hidden;
}

/* --- 10. Mouvement reduit -------------------------------------------------
   Certaines personnes desactivent les animations au niveau du systeme
   (troubles vestibulaires, sensibilite au mouvement). On respecte ce choix. */
@media (prefers-reduced-motion: reduce){
  .single-service-item:hover,
  .thm-btn:hover,
  .social-list a:hover{
    transform: none;
  }
  .single-service-item:hover .service-icon img{
    transform: none;
  }
}

/* --- 11. Mobile ----------------------------------------------------------- */
/* Revolution met le slider a l'echelle proportionnellement a la largeur.
   En passant la grille de 700 a 520, le hero mobile tombait a 167px avec un
   titre de 14px : illisible. On lui redonne une hauteur utile. */
@media (max-width: 767px){
  .rev_slider_wrapper,
  #slider1,
  #slider1 .tp-revslider-mainul,
  #slider1 .tp-revslider-slidesli,
  #slider1 .slotholder{
    min-height: 300px !important;
  }
  .rev_slider_wrapper .slide-content-box h1,
  .rev_slider_wrapper .slide-content-box h2.slide-title{
    font-size: 22px !important;
    line-height: 30px !important;
  }
}

@media (max-width: 768px){
  body{ line-height: 1.6; }
  .single-service-item{ margin-bottom: 18px; }
  /* Zone tactile confortable : 44px est le minimum recommande. */
  .thm-btn{
    min-height: 44px;
    line-height: 40px;
  }
  .social-list a{
    min-width: 40px;
    min-height: 40px;
  }
}