/* ============================================================
   index.css – SUBJECTIL
   CSS autonome et unique — remplace nicepage.css + index.css
   Contient uniquement les règles réellement utilisées dans
   index.html, extraites de nicepage.css + styles custom SUBJECTIL
   ============================================================ */


/* ----------------------------------------------------------
   0. BASE & RESET
   ---------------------------------------------------------- */
html {
  font-size: 16px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   1. NICEPAGE – u-body (base typographique)
   ---------------------------------------------------------- */
.u-body {
  font-size: 1rem;
  line-height: 1.6;
  color: #111111;
  background-color: #ffffff;
}

.u-body h1,
.u-body h2,
.u-body h3,
.u-body h4,
.u-body h5,
.u-body h6 {
  padding: 0;
}


/* ----------------------------------------------------------
   2. NICEPAGE – Layout helpers
   ---------------------------------------------------------- */
section > *,
header > *,
footer > *,
.u-sheet > * {
  position: relative;
}

.u-clearfix::before,
.u-clearfix::after {
  content: '';
  display: table;
}

.u-clearfix::after {
  clear: both;
}

.u-align-center {
  text-align: center;
}

.u-sheet {
  position: relative;
  width: 1140px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .u-sheet { width: 1140px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .u-sheet { width: 940px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .u-sheet { width: 720px; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .u-sheet { width: 540px; }
}

@media (max-width: 575px) {
  .u-sheet { width: 340px; }
}

.u-sheet .u-sheet {
  width: 100%;
}

.u-expanded-width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* valign helpers — section layout via flex */
.u-valign-middle    { justify-content: center; }
.u-valign-middle-lg { justify-content: center; }
.u-valign-middle-md { justify-content: center; }
.u-valign-middle-sm { justify-content: center; }
.u-valign-middle-xs { justify-content: center; }

@media (min-width: 992px) and (max-width: 1199px) {
  .u-valign-middle-lg { justify-content: center; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .u-valign-middle-md { justify-content: center; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .u-valign-middle-sm { justify-content: center; }
}
@media (max-width: 575px) {
  .u-valign-middle-xs { justify-content: center; }
}


/* ----------------------------------------------------------
   3. NICEPAGE – Sections (u-black background)
   ---------------------------------------------------------- */
.u-black {
  background-color: #000000;
  color: #ffffff;
}


/* ----------------------------------------------------------
   4. NICEPAGE – Texte
   ---------------------------------------------------------- */
.u-text {
  word-wrap: break-word;
  position: relative;
}

.u-text a,
.u-text a:hover {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  color: inherit;
}

.u-text-default {
  display: table;
  align-self: flex-start;
}

.u-text-default:empty {
  display: block;
  width: 15px;
}

ul.u-text li:last-child {
  margin-bottom: 0;
}

p.u-large-text {
  font-weight: 400;
  line-height: 1.6;
  font-size: 1rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

p:not(.u-text-variant) {
  line-height: 2;
  font-size: 1.125rem;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Couleurs texte */
.u-text-white,
a.u-button-style.u-text-white,
a.u-button-style.u-text-white[class*="u-border-"] {
  color: #ffffff !important;
}

a.u-button-style.u-text-white:hover,
a.u-button-style.u-text-white:focus,
a.u-button-style.u-button-style.u-text-white:active,
a.u-button-style.u-button-style.u-text-white.active {
  color: #e6e6e6 !important;
}

.u-text-black,
a.u-button-style.u-text-black,
a.u-button-style.u-text-black[class*="u-border-"] {
  color: #000000 !important;
}


/* ----------------------------------------------------------
   5. NICEPAGE – Bouton (u-btn)
   ---------------------------------------------------------- */
.u-btn {
  display: table;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: inherit;
  font-weight: bold;
  text-decoration: none;
  border: 0 none transparent;
  outline-width: 0;
  background-color: transparent;
  margin: 20px 0;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  text-align: center;
  padding: 10px 30px;
  border-radius: 0;
  align-self: flex-start;
}

.u-btn:focus,
.u-btn:active:focus,
.u-btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.u-btn:hover,
.u-btn:focus {
  text-decoration: none;
}

.u-btn:active,
.u-btn.active {
  outline: 0;
  background-image: none;
}

.u-btn.disabled,
.u-btn[disabled] {
  opacity: 0.6;
}

/* Bouton noir */
.u-button-style.u-black,
.u-button-style.u-black[class*="u-border-"] {
  color: #ffffff !important;
  background-color: #000000 !important;
}

.u-button-style.u-black:hover,
.u-button-style.u-black:focus,
.u-button-style.u-black:active {
  color: #ffffff !important;
  background-color: #000000 !important;
}

/* Bouton sans style (lien wrappeur photo contact) */
.u-border-none {
  border-width: 0 !important;
}

.u-active-none:active { background: none; }
.u-hover-none:hover   { background: none; }
.u-none               { background: none; }


/* ----------------------------------------------------------
   6. NICEPAGE – Icônes sociales
   ---------------------------------------------------------- */
.u-icon {
  display: block;
  line-height: 0;
  border-width: 0;
}

.u-svg-link {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.u-svg-content {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
}

.u-social-icons {
  display: flex;
}

.u-social-icons .u-icon {
  display: flex;
  height: 100% !important;
}

.u-social-icons .u-social-url,
.u-social-icons .u-social-url:hover {
  color: currentColor;
}

.u-social-icons a {
  height: 100%;
  display: inline-block;
  flex: 1;
}

.u-social-url {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  border: 0 none transparent;
  outline-width: 0;
  background-color: transparent;
  margin: 0;
}

/* Espacement entre icônes (u-spacing-5) */
.u-spacing-5:not(.u-text) > li:not(:last-child) {
  margin-right: 5px;
}


/* ----------------------------------------------------------
   7. NICEPAGE – Couleur des icônes sociales
      (u-text-black sur les spans — icône colorée en noir)
   ---------------------------------------------------------- */
.u-text-black {
  color: #000000 !important;
}


/* ----------------------------------------------------------
   8. SECTION IDENTITÉ (u-section-1)
   ---------------------------------------------------------- */
.u-section-1 {
  background-image: none;
}

.u-section-1 .u-sheet-1 {
  min-height: 171px;
}


/* ----------------------------------------------------------
   9. SECTION DEMOREEL VIDEO (u-section-3)
   ---------------------------------------------------------- */
.u-section-3 {
  background-image: none;
}

.u-section-3 .u-sheet-1 {
  min-height: 642px;
}

.u-section-3 .u-custom-html-1 {
  margin-bottom: 1px;
  min-height: 641px;
  margin-top: 0;
}

@media (max-width: 1199px) {
  .u-section-3 .u-sheet-1       { min-height: 529px; }
  .u-section-3 .u-custom-html-1 { height: auto; min-height: 529px; margin-bottom: 0; }
}

@media (max-width: 991px) {
  .u-section-3 .u-sheet-1       { min-height: 405px; }
  .u-section-3 .u-custom-html-1 { min-height: 405px; }
}

@media (max-width: 767px) {
  .u-section-3 .u-sheet-1       { min-height: 304px; }
  .u-section-3 .u-custom-html-1 { min-height: 304px; }
}

@media (max-width: 575px) {
  .u-section-3 .u-sheet-1       { min-height: 192px; }
  .u-section-3 .u-custom-html-1 { margin-bottom: 1px; min-height: 191px; margin-top: 1px; }
}


/* ----------------------------------------------------------
   10. SECTION CONTACT / PRÉSENTATION (u-section-5)
   ---------------------------------------------------------- */
.u-section-5 {
  background-image: none;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.u-section-5 .u-sheet-1 {
  min-height: 607px;
}

.u-section-5 .u-text-1 {
  margin: 60px auto;
}

.u-section-5 .u-btn-1 {
  background-image: none;
  padding: 0;
}

@media (max-width: 575px) {
  .u-section-5 .u-sheet-1 { min-height: 750px; }
  .u-section-5 .u-text-1  { width: auto; margin-left: 28px; margin-right: 28px; }
}


/* ----------------------------------------------------------
   11. SECTION RÉSEAUX SOCIAUX (u-section-6)
   ---------------------------------------------------------- */
.u-section-6 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.u-section-6 .u-sheet-1 {
  min-height: 84px;
}

.u-section-6 .u-social-icons-1 {
  min-height: 16px;
  width: 116px;
  min-width: 68px;
  margin: 26px auto;
}

.u-section-6 .u-icon-1,
.u-section-6 .u-icon-2,
.u-section-6 .u-icon-3 {
  height: 100%;
}

@media (max-width: 991px) {
  .u-section-6 .u-sheet-1 { min-height: 148px; }
}

@media (max-width: 767px) {
  .u-section-6 .u-sheet-1        { min-height: 144px; }
  .u-section-6 .u-social-icons-1 { height: 32px; width: 106px; min-width: 58px; margin-top: 56px; margin-bottom: 56px; }
}

@media (max-width: 575px) {
  .u-section-6 .u-sheet-1 { min-height: 170px; }
}


/* ----------------------------------------------------------
   12. SEO HEADER (bloc H1 + intro)
   ---------------------------------------------------------- */
.seo-header {
  background: #000;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2rem 1.5rem 0.75rem;
  font-family: 'Roboto Condensed', sans-serif;
}

.seo-header h1 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.6rem;
  line-height: 1.4;
}

.seo-header p {
  font-size: 0.75rem;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
  opacity: 0.7;
  text-align: center;
}

.seo-header nav ul {
  padding-left: 0 !important;
  list-style: none;
  text-align: center;
}

.seo-header nav p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0.35rem auto 0 !important;
  opacity: 1;
  text-align: center !important;
}

/* Photo GiO dans le header */
.seo-header__photo {
  max-width: 55%;
  height: auto;
  display: block;
  margin: 0 auto 1.25rem auto;
}

/* Texte intro */
.seo-header__intro {
  font-size: 1.15rem !important;
  color: #ffffff;
  line-height: 1.7;
}

.seo-header__intro-country {
  font-size: 1.35rem;
}


/* ----------------------------------------------------------
   13. NAVIGATION SERVICES (liste principale)
   ---------------------------------------------------------- */
.services-nav {
  font-size: 2.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.services-nav li {
  margin-top: 7.8rem;
}

.services-nav li:first-child {
  margin-top: 7rem;
}

/* Espace supplémentaire au-dessus des titres qui suivent une iframe */
.services-nav li + li {
  margin-top: 10rem;
}

.services-nav li a {
  color: #0077ff;
  text-decoration: none;
  transition: color 0.2s;
}

.services-nav li a:hover {
  color: #44aaff;
}

/* Description sous chaque service */
.services-nav__desc {
  display: block;
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
  margin: 0.35rem auto 0;
  font-weight: 400;
  text-align: center;
  max-width: 620px;
}

/* iframes slideshow */
.services-nav__iframe {
  display: block;
  width: 100%;
  height: 840px;
  border: none;
  margin-top: 1rem;
  margin-bottom: 4rem;
}


/* ----------------------------------------------------------
   14. NAVIGATION ANCRAGES (mini nav en bas du seo-header)
   ---------------------------------------------------------- */
.seo-nav {
  background: #000;
  padding: 0.75rem 1.5rem 1.25rem;
  text-align: center;
}

.seo-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 580px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
}

.seo-nav ul li a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.2s;
}

.seo-nav ul li a:hover     { color: #f66363; }
.seo-nav ul li a::before   { content: "— "; color: #f66363; }


/* ----------------------------------------------------------
   15. SECTION CONTACT – éléments internes
   ---------------------------------------------------------- */
/* Photo contact */
.contact-photo {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 0 auto 0.75rem auto;
}

/* Baseline freelance */
.contact-baseline {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  display: block;
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

/* Coordonnées */
.contact-coords {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.15rem;
}

.contact-coords__line {
  font-size: 1.45rem;
}

/* Lien wrappeur du bloc contact — pas de curseur pointeur */
.u-section-5 .u-btn-1 {
  cursor: default;
}


/* ----------------------------------------------------------
   16. FOOTER SÉMANTIQUE
   ---------------------------------------------------------- */
.seo-footer {
  background: #000;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
  padding: 1.25rem 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.seo-footer address {
  font-style: normal;
  margin-bottom: 0.35rem;
}

.seo-footer a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.seo-footer a:hover { color: #f66363; }

.seo-footer__name {
  color: rgba(255, 255, 255, 0.55);
}