/* ==========================================================================
   GEOAÏKI — Composants transverses : en-tête, pied de page, boutons, icônes, blocs réutilisables
   ========================================================================== */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand span {
  font-family: 'Sora',sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .06em;
  color: #fff;
}

/* ----- Section « Pourquoi GEOAÏKI » : liste de raisons ----- */
.raisons {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 26px 44px;
}

.raisons li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.raisons li svg {
  flex: none;
  margin-top: 2px;
}

.raisons strong {
  display: block;
  color: #142B4C;
  font-family: 'Sora',sans-serif;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.raisons span {
  display: block;
  color: #5B6472;
  font-size: 15px;
  line-height: 1.65;
}

/* ----- Logo GEOAÏKI ----- */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand__marque {
  height: 34px;
  width: auto;
  display: block;
}

.brand__texte {
  font-family: 'Sora',sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .06em;
  color: #fff;
  line-height: 1;
}

.brand__texte span {
  color: #E8623D;
}

.duo__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 56px;
  align-items: center;
}

.duo--inverse .duo__grid {
  direction: rtl;
}

.duo--inverse .duo__grid>* {
  direction: ltr;
}

.duo__media {
  border-radius: 16px;
  overflow: hidden;
  background: #0E1F38;
  box-shadow: 0 14px 40px rgba(20,43,76,.16);
  aspect-ratio: 4/3;
}

.duo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

/* Visuel sur fond clair : on affiche l'objet entier plutot que de le rogner */
.duo__media--entier {
  background: #fff;
  border: 1px solid #E3E7EC;
}

.duo__media--entier img {
  object-fit: contain;
  padding: 26px;
}

.duo__media:hover img {
  transform: scale(1.04);
}

.duo__texte .kicker {
  color: #E8623D;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.duo__texte h2 {
  font-family: 'Sora',sans-serif;
  font-weight: 700;
  color: #142B4C;
  font-size: clamp(22px,2.5vw,31px);
  line-height: 1.22;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

.duo__texte p {
  color: #5B6472;
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 15px;
}

.duo__liste {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
}

.duo__liste li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  color: #142B4C;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 500;
}

.duo__liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E8623D;
}

.duo__lien {
  display: inline-block;
  color: #E8623D;
  font-weight: 600;
  font-size: 15.5px;
  border-bottom: 2px solid #E8623D;
  padding-bottom: 3px;
  transition: color .2s,border-color .2s;
}

.duo__lien:hover {
  color: #CF5230;
  border-bottom-color: #CF5230;
}

/* ----- Sélecteur de langue ----- */
/* ==========================================================================
   Classes utilitaires — remplacent les styles en ligne
   ========================================================================== */
/* ----- Section « Pourquoi GEOAÏKI » : liste de raisons ----- */
.raisons {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap: 0 56px;
  max-width: 1000px;
}

.raisons__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid #E4E8EE;
}

.raisons__icone {
  flex: none;
  margin-top: 1px;
  color: #E8623D;
  font-size: 20px;
  line-height: 1;
}

.raisons__titre {
  display: block;
  font-family: 'Sora',sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #142B4C;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.raisons__texte {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: #5B6472;
}

/* ----- Formulaires ----- */
.champ-cache {
  position: absolute;
  left: -9999px;
}

.champ-rgpd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
}

.champ-bloc {
  margin-top: 14px;
  display: block;
}

/* ----- Fond blanc explicite (sections alternées) ----- */
.fond-blanc {
  background: #fff;
}

/* ----- Média : logo du pied de page, images contraintes ----- */
.logo-pied {
  height: 30px;
  width: auto;
  display: block;
}

.img-souple {
  max-width: 480px;
  height: auto;
}

.img-pleine {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 32px;
}

/* ----- Animations de l'illustration du hero ----- */
.anim-rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: rotorBlur .3s linear infinite;
}

.anim-rotor--decale {
  animation-delay: .08s;
}

.anim-rotor--lent {
  animation-duration: .35s;
}

.anim-rotor--lent-decale {
  animation-duration: .35s;
  animation-delay: .1s;
}

.anim-globe {
  animation: spinGlobe 14s linear infinite;
}

.anim-globe--inverse {
  animation: spinGlobe 7s linear infinite reverse;
}

.anim-point {
  animation: pulseDot 2.4s ease-in-out infinite;
}

.anim-point--d5 {
  animation-delay: .5s;
}

.anim-point--d1 {
  animation-delay: 1s;
}

.anim-drone {
  animation: droneFly 7s ease-in-out infinite;
}

/* ----- Espacements ponctuels ----- */
.mt-s {
  margin-top: 14px;
}

.mt-m {
  margin-top: 22px;
}

.mt-l {
  margin-top: 40px;
}

.max-760 {
  max-width: 760px;
}

.max-780 {
  max-width: 780px;
}

/* ----- Pied de page : bloc identité ----- */
.pied-marque {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pied-marque__texte {
  font-family: 'Sora',sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .06em;
}

.pied-marque__accent {
  color: #E8623D;
}

.pied-baseline {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 280px;
}

.lien-long {
  word-break: break-all;
}

.gap-14 {
  gap: 14px;
}

.sans-espace-haut {
  padding-top: 0;
}

/* ----- Grille : message occupant toute la largeur ----- */
.grille-pleine {
  grid-column: 1/-1;
}

/* ==========================================================================
   Icônes Font Awesome
   ========================================================================== */
/* Pastille de validation, dans les listes de bénéfices et d'objectifs */
.ico-check {
  color: #E8623D;
  font-size: 19px;
  line-height: 1;
  flex: none;
  margin-top: 2px;
}

/* Grande icône thématique, dans les blocs de service et les fiches */
.ico-service {
  color: #E8623D;
  font-size: 30px;
  line-height: 1;
}

/* ----- Bandeau d'appel à l'action, commun à plusieurs pages ----- */
.ctaband {
  background: #E8623D;
  color: #fff;
  padding: clamp(56px,7vw,80px) 0;
}

.ctaband .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.ctaband h2 {
  margin: 0;
  font-family: 'Sora',sans-serif;
  font-weight: 700;
  font-size: clamp(26px,3.2vw,38px);
  line-height: 1.25;
}

/* ----- Sélecteur de langue : deux liens, langue active mise en évidence ----- */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  padding: 3px;
}

.lang__actif,
.lang__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-decoration: none!important;
  transition: background .18s,color .18s;
}

.lang__actif {
  background: #E8623D;
  color: #fff;
}

.lang__lien {
  color: rgba(255,255,255,.7)!important;
}

.lang__lien:hover {
  background: rgba(255,255,255,.14);
  color: #fff!important;
}

@media (max-width:900px) {
  .lang {
    margin-left: auto;
    margin-right: 10px;
  }
}

/* ==========================================================================
   Barre supérieure sur petits écrans
   Le logo, le sélecteur de langue et le bouton menu doivent tenir
   sur une seule ligne, même sur un écran de 320 px.
   ========================================================================== */
/* ==========================================================================
   Adaptations aux petits écrans — composants transverses
   (doit rester dans ce fichier : les règles de bureau y sont définies)
   ========================================================================== */
@media (max-width:900px) {
  .raisons {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width:600px) {
  .brand__marque {
    height: 28px;
  }

  .brand__texte {
    font-size: 18px;
  }
}

@media (max-width:900px) {
  .duo {
    padding: 56px 0;
  }

  .duo__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .duo--inverse .duo__grid {
    direction: ltr;
  }

  .duo__media {
    aspect-ratio: 16/9;
  }
}

@media (max-width:900px) {
  .lang {
    margin: 14px 0 0;
  }

  .lang select {
    width: 100%;
    padding: 11px 26px 11px 13px;
  }
}

@media (max-width:900px) {
  .raisons {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   Bouton « retour en haut »
   Masqué en haut de page, il apparaît en fondu après quelques défilements.
   ========================================================================== */
.haut {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #142B4C;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(20,43,76,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s ease,transform .28s ease,visibility .28s,background .2s;
}

.haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.haut:hover {
  background: #E8623D;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(232,98,61,.4);
}

.haut:focus-visible {
  outline: 2px solid #E8623D;
  outline-offset: 3px;
}

.haut i {
  font-size: 17px;
  line-height: 1;
}

@media (max-width:640px) {
  .haut {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  .haut i {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .haut {
    transition: opacity .01ms,visibility .01ms;
  }

  .haut:hover {
    transform: none;
  }
}

/* ==========================================================================
   En-tête sur petits écrans
   - le logo se réduit à son symbole
   - le sélecteur de langue rejoint le menu déroulant
   ========================================================================== */
/* Par défaut : sélecteur dans la barre, masqué dans le menu */
.lang--menu {
  display: none;
}

@media (max-width:919px) {
  /* Le texte « GEOAÏKI » disparaît : le symbole suffit à identifier le site */
  .brand__texte {
    display: none;
  }

  .brand__marque {
    height: 32px;
  }

  /* Le sélecteur quitte la barre pour rejoindre le menu */
  .lang--barre {
    display: none;
  }

  .lang--menu {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 6px;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
  }

  .lang--menu .lang__actif,
  .lang--menu .lang__lien {
    min-width: 46px;
    height: 34px;
    font-size: 13px;
  }

  .hbar {
    gap: 12px;
  }
}

/* Le menu mobile applique une bordure et une taille à tous ses liens :
   on les neutralise pour les pastilles de langue (spécificité renforcée). */
#mobileMenu .lang--menu {
  border-radius: 9px;
  padding: 3px;
}

#mobileMenu .lang--menu .lang__lien,
#mobileMenu .lang--menu .lang__actif {
  border-bottom: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#mobileMenu .lang--menu .lang__lien {
  color: rgba(255,255,255,.7)!important;
}

#mobileMenu .lang--menu .lang__actif {
  background: #E8623D;
  color: #fff!important;
}

/* ==========================================================================
   Barre de navigation : occuper toute la largeur utile
   Le conteneur du site est limité à 1180 px, ce qui resserre exagérément
   l'en-tête sur les grands écrans. On lui donne plus d'air, tout en
   conservant des marges latérales confortables.
   ========================================================================== */
header > .container.hbar {
  max-width: 1560px;
  padding-left: clamp(24px,3.5vw,56px);
  padding-right: clamp(24px,3.5vw,56px);
}

/* La navigation se rapproche du bord droit, près du bouton de devis */
header .hbar nav.desktop {
  margin-left: auto;
  gap: clamp(18px,1.9vw,32px);
}

/* Le sélecteur de langue reste collé à droite, après le bouton */
header .hbar .lang--barre {
  margin-left: clamp(14px,1.6vw,26px);
}

/* ==========================================================================
   VERSION 1 — Sélecteur de langue masqué
   --------------------------------------------------------------------------
   Le site est bilingue côté interface, mais les contenus (formations,
   articles, services) ne sont pas encore traduits. Le sélecteur est donc
   masqué à l'affichage pour la première mise en ligne.

   POUR LE RÉACTIVER : supprimer ce bloc, rien d'autre.
   Les pages anglaises restent accessibles par leur adresse (/en/...) et les
   balises hreflang continuent d'indiquer les deux versions aux moteurs.
   ========================================================================== */
.lang,
.lang--barre,
.lang--menu {
  display: none !important;
}