/* Raven Development — feuille de style partagée par toutes les langues */

/* ---- Police Nunito (auto-hébergée) ----
   Seul le sous-ensemble latin est embarqué : il couvre tous les caractères
   accentués du FR/EN/IT/DE/ES. Les sous-ensembles cyrillique, vietnamien et
   latin-ext sont volontairement absents (jamais téléchargés par nos langues).
   Pour ajouter une langue qui en aurait besoin (polonais, turc…), récupérer
   le fichier correspondant sur Google Fonts et déclarer son unicode-range. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/nunito-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Écran de chargement ---- */
#page-loader { position: fixed; inset: 0; z-index: 9999; background: #62cffc; display: none; align-items: center; justify-content: center; opacity: 1; transition: opacity .5s ease; }
#page-loader.is-active { display: flex; }
#page-loader.is-hidden { opacity: 0; pointer-events: none; }
#page-loader .loader-spinner { width: 56px; height: 56px; border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: loaderSpin .8s linear infinite; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #page-loader .loader-spinner { animation-duration: 1.6s; }
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; color: #2b2b3a; background: #fff; line-height: 1.6; }
a { color: #1e88c9; }
a:hover { color: #136aa0; }
img { max-width: 100%; }

/* ---- Animations ---- */
@keyframes floating { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, 0); } }
@keyframes floating2 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -12px) rotate(2deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes floating3 { 0% { transform: translate(0, 0); } 50% { transform: translate(-8px, 10px); } 100% { transform: translate(0, 0); } }
@keyframes floating4 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(0, -18px) rotate(-3deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes blink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes wordIn { to { opacity: 1; transform: none; } }

/* ---- Fade-in on scroll ---- */
.fade { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade.in { opacity: 1; transform: none; }

/* ---- Nav ---- */
.navbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e6edf3; }
.navbar-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #2b2b3a; }
.brand-mascot { width: 40px; height: 40px; border-radius: 50%; transition: transform .3s ease; }
.brand:hover .brand-mascot { transform: rotate(-12deg) scale(1.1); }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.brand-name .accent { color: #1e88c9; }
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 700; font-size: 15px; }
.nav-links a { color: #55606c; text-decoration: none; }
.nav-links a:hover { color: #1e88c9; }
.nav-lang { display: flex; gap: 8px; font-weight: 800; font-size: 12px; }
.nav-lang a { color: #9aa6b2; text-decoration: none; padding: 2px 4px; }
.nav-lang a:hover { color: #1e88c9; }
.nav-lang a[aria-current="page"] { color: #1e88c9; }
.nav-cta { background: #f8b333; color: #2b2b3a; text-decoration: none; font-weight: 800; font-size: 14px; padding: 10px 20px; border-radius: 30px; box-shadow: 0 3px 0 #d99a1c; transition: transform .15s ease; }
.nav-cta:hover { transform: translateY(-1px); color: #2b2b3a; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  /* Marque + bouton sur une ligne, langues sur une seconde ligne centrée :
     sinon les 5 langues et le bouton débordent de l'écran. */
  .navbar-inner { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .brand-mascot { width: 34px; height: 34px; }
  .brand-name { font-size: 16px; }
  .nav-cta { font-size: 13px; padding: 9px 16px; }
  .nav-lang { order: 3; width: 100%; justify-content: center; gap: 14px; font-size: 13px; }
}

/* ---- Hero ---- */
.hero { background: #62cffc; color: #fff; position: relative; overflow: hidden; }

/* Nuages décoratifs en images de fond plutôt qu'en <img> : les quatre grands
   (.cloud-lg) ne sont déclarés qu'au-dessus de 860px, donc un mobile ne les
   télécharge jamais. background-size:contain garantit qu'aucun nuage ne peut
   être déformé, quelle que soit sa largeur. */
.cloud { position: absolute; pointer-events: none; user-select: none; z-index: 2; background-repeat: no-repeat; background-size: contain; }
.cloud-1 { left: 34%; top: 4%; width: clamp(100px, 11vw, 170px); aspect-ratio: 340 / 265; animation: floating 3s ease-in-out infinite; }
.cloud-2 { left: 44%; top: 56%; width: clamp(60px, 6vw, 95px); aspect-ratio: 190 / 133; animation: floating3 4.2s ease-in-out infinite -1s; background-image: url("clouds/cloud2.webp"); }
.cloud-3 { right: 2%; top: 8%; width: clamp(100px, 11vw, 170px); aspect-ratio: 340 / 230; animation: floating2 3.6s ease-in-out infinite -.6s; }
.cloud-4 { left: 48%; top: 4%; width: clamp(60px, 6.5vw, 100px); aspect-ratio: 200 / 139; animation: floating4 5s ease-in-out infinite -2s; background-image: url("clouds/cloud4.webp"); }
.cloud-5 { left: 5%; bottom: 13%; width: clamp(90px, 10vw, 150px); aspect-ratio: 300 / 193; animation: floating4 4.4s ease-in-out infinite -1.5s; }
.cloud-6 { left: 30%; bottom: 15%; width: clamp(60px, 7vw, 105px); aspect-ratio: 210 / 141; animation: floating 3.4s ease-in-out infinite -2.2s; background-image: url("clouds/cloud6.webp"); }
.cloud-7 { right: 2%; top: 34%; width: clamp(70px, 7.5vw, 110px); aspect-ratio: 220 / 145; animation: floating3 3.8s ease-in-out infinite -.4s; }

@media (max-width: 860px) { .cloud-lg { display: none; } }
@media (min-width: 861px) {
  .cloud-1 { background-image: url("clouds/cloud1.webp"); }
  .cloud-3 { background-image: url("clouds/cloud3.webp"); }
  .cloud-5 { background-image: url("clouds/cloud5.webp"); }
  .cloud-7 { background-image: url("clouds/cloud7.webp"); }
}

/* Animations du hero mises en pause quand il quitte l'écran (voir script.js) :
   évite de faire tourner le compositeur en continu pendant la lecture. */
.hero.is-paused .cloud,
.hero.is-paused .scroll-dot { animation-play-state: paused; }
.hero-grid { position: relative; max-width: 1120px; margin: 0 auto; padding: 70px 24px 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-main { position: relative; z-index: 3; }
.hero-title { font-size: clamp(38px, 5.4vw, 60px); font-weight: 800; line-height: 1.1; margin: 0 0 18px; color: #fff; text-shadow: 0 2px 0 rgba(22, 84, 120, .25); }
.hero-word { display: inline-block; opacity: 0; transform: translateY(14px); animation: wordIn .5s ease forwards; }
.hero-word--1 { animation-delay: .1s; }
.hero-word--2 { animation-delay: .3s; }
.hero-p { font-size: clamp(17px, 1.6vw, 21px); margin: 0 0 30px; color: #eaf8ff; max-width: 46ch; font-weight: 600; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 70px; }

.btn { text-decoration: none; font-weight: 800; border-radius: 30px; transition: transform .15s ease; display: inline-block; font-size: 16px; }
.btn-primary { background: #f8b333; color: #2b2b3a; padding: 15px 30px; box-shadow: 0 4px 0 #d99a1c; }
.btn-primary:hover { transform: translateY(-2px); color: #2b2b3a; }
.btn-outline { background: rgba(255, 255, 255, .18); border: 2px solid #fff; color: #fff; padding: 13px 28px; transition: background .2s ease, transform .15s ease; }
.btn-outline:hover { background: rgba(255, 255, 255, .3); color: #fff; }

.hero-image-wrap { position: relative; justify-self: end; width: 100%; max-width: 320px; margin-right: clamp(30px, 7vw, 110px); }
/* height:auto est indispensable : sans lui, l'attribut height="320" du HTML
   s'applique comme une hauteur fixe et la mascotte s'étire dès que son
   conteneur devient plus étroit que 320px (cas de tous les mobiles). */
.hero-img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.hero-img:hover { animation: wiggle .6s ease; }

.scroll-indicator { position: absolute; z-index: 3; left: 50%; bottom: 78px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; text-decoration: none; }
.scroll-dot { width: 4px; height: 8px; background: #fff; border-radius: 2px; display: block; animation: blink 1.6s ease-in-out infinite; }
.hero-wave { display: block; width: 100%; height: 70px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-btns { justify-content: center; }
  .hero-image-wrap { order: -1; max-width: 260px; margin: 0 auto; }

  /* Sur mobile la mise en page passe sur une colonne : les positions en %
     (calées sur les deux colonnes du desktop) feraient tomber les nuages sur
     le texte, qui devient illisible (blanc sur blanc). On les recale en pixels
     dans la bande occupée par la mascotte, seule zone sans texte quelle que
     soit la langue. */
  .cloud-2 { left: 1%; top: 96px; }
  .cloud-4 { left: auto; right: 2%; top: 62px; }
  .cloud-6 { left: 4%; top: 286px; bottom: auto; }
}

/* ---- Sections communes ---- */
.section { max-width: 1120px; margin: 0 auto; padding: 60px 24px 80px; }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto 46px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; margin: 0 0 10px; color: #2b2b3a; }
.section-head p { margin: 0; color: #6b7683; font-size: 17px; }

/* ---- Services ---- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.service-card { background: #fff; border: 1px solid #e6edf3; border-radius: 12px; padding: 30px 26px; box-shadow: 0 6px 18px rgba(30, 60, 90, .06); transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(30, 60, 90, .12); }
.service-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; font-weight: 800; font-size: 20px; color: #fff; transition: transform .25s ease; }
.service-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); }
.service-icon--blue { background: #1e88c9; }
.service-icon--yellow { background: #f8b333; }
.service-icon--pink { background: #c2185b; }
.service-icon--dark { background: #2b2b3a; }
.service-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.service-card p { margin: 0; color: #6b7683; font-size: 15px; }

/* ---- Réalisations ---- */
.realisations { background: #f3f9fd; padding: 80px 24px; }
.realisations-inner { max-width: 1120px; margin: 0 auto; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.project-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(30, 60, 90, .08); transition: transform .2s ease; }
.project-card:hover { transform: translateY(-4px); }
.project-banner { display: flex; align-items: center; justify-content: center; width: 100%; height: 190px; font-size: 42px; font-weight: 800; color: #fff; }
.project-banner--game { background: linear-gradient(135deg, #f8b333, #d99a1c); }
.project-banner--bot { background: linear-gradient(135deg, #2b2b3a, #494962); }
.project-banner--web { background: linear-gradient(135deg, #1e88c9, #136aa0); }
.project-body { padding: 20px 22px 24px; }
.project-tag { display: inline-block; background: #e3f4fd; color: #1e88c9; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.project-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.project-card p { margin: 0; color: #6b7683; font-size: 14.5px; }

/* ---- Contact ---- */
/* L'email est le seul point de contact : il est donc traité comme un bouton
   d'action bien visible, dans une colonne centrée. */
.contact-center { max-width: 620px; margin: 0 auto; text-align: center; }
.contact-center h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; margin: 0 0 12px; }
.contact-lead { margin: 0 0 28px; color: #6b7683; font-size: 17px; }
.contact-email { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #1e88c9; color: #fff; font-weight: 800; font-size: clamp(15px, 2vw, 18px); text-decoration: none; padding: 15px 30px; border-radius: 30px; box-shadow: 0 4px 0 #136aa0; transition: transform .15s ease; overflow-wrap: anywhere; }
.contact-email:hover { transform: translateY(-2px); color: #fff; }
.contact-email-icon { font-size: 17px; }
.contact-location { margin: 22px 0 0; color: #6b7683; font-size: 15px; }

/* ---- Footer ---- */
.site-footer { background: #2b2b3a; color: #b9c2cc; padding: 30px 24px; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.site-footer a { color: #fff; font-weight: 700; text-decoration: none; }
.site-footer a:hover { color: #62cffc; }

/* ---- Très petits écrans (iPhone SE et assimilés) ---- */
@media (max-width: 400px) {
  .navbar-inner { padding: 10px 12px; }
  .brand-name { font-size: 15px; }
  .nav-cta { font-size: 12px; padding: 8px 13px; }
  .contact-email { padding: 14px 20px; gap: 9px; }
  .contact-email-icon { flex: 0 0 auto; }
  .section, .realisations { padding-left: 16px; padding-right: 16px; }
}

/* ---- Accessibilité : mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  .scroll-dot { animation: none !important; }
  .hero-word { animation: none !important; opacity: 1 !important; transform: none !important; }
}