/* Réinitialisation des marges et paddings par défaut */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --nav-h: 80px;

  /* Couleurs des sections sous le header */
  --blue: #12263f;
  --yellow: #f2c230;
  --paper: #f7f5ef;
  --muted: #4a5a6e;
  --line: #d8d4c8;
  --font-title: "Archivo", "Arial Narrow", sans-serif;
  --font-text: "Atkinson Hyperlegible", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

/* Style global du body */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f5f5f5;
  color: #4a90e2;
  overflow-x: hidden;
}
/* __________________________________________________________________________________________ */

/* Header avec vidéo */
.main-header {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 30px) 20px 60px;
  overflow: hidden;
}

/* Vidéo de fond : limitée au header pour laisser la place aux sections dessous */
#background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Couvre toute la zone sans déformation */
  z-index: -1;
}

#background-video::-webkit-media-controls {
  display: none !important; /* Masque les contrôles spécifiques à Webkit */
}

#background-video::-moz-media-controls {
  display: none !important; /* Masque les contrôles spécifiques à Firefox */
}

/* Style pour le gradient au-dessus de la vidéo */
.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    50deg,
    #00000072,
    #264fd5ba
  ); /* Gradient semi-transparent */
  z-index: 0; /* Gradient entre la vidéo et le contenu */
}

/* Barre de navigation */
header nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--nav-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  /* Bleu marine légèrement transparent pour que le flou de fond se voie */
  background: rgba(18, 38, 63, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}
/* Logo horizontal (globe + nom), version claire pour fond foncé */
.logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.nav-links {
  display: flex; /* Liens visibles en grand écran */
  list-style: none;
}

.nav-links li {
  margin: 0 10px;
}

.nav-links a {
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--yellow);
}

/* Style initial des barres du burger */
.burger {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  background: none;
  border: 0;
  z-index: 10;
}

.burger div {
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.burger div:nth-child(1) {
  top: 0; /* Première barre */
}

.burger div:nth-child(2) {
  top: 10px; /* Barre du milieu */
}

.burger div:nth-child(3) {
  top: 20px; /* Dernière barre */
}

/* Animation lorsque le menu est actif */
.burger.active div:nth-child(1) {
  transform: rotate(45deg);
  top: 10px; /* Place au centre */
}

.burger.active div:nth-child(2) {
  opacity: 0; /* Cache la barre du milieu */
}

.burger.active div:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px; /* Place au centre */
}

/* -------------------------------------------MÉdia query nav---------------- */
/* Media queries pour mobile et petite tablette (4 liens + logo : burger sous 900px) */
@media (max-width: 900px) {
  .nav-links {
    display: none; /* Cacher le menu par défaut sur mobile */
    flex-direction: column;
    position: absolute;
    top: 100%; /* Juste sous la barre, sans la chevaucher */
    right: 20px;
    width: 180px;
    padding: 10px;
    border-radius: 5px;
  }

  .nav-links.nav-active {
    display: flex; /* Afficher le menu lorsqu'il est activé */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background-color: rgba(18, 38, 63, 0.97); /* Même bleu marine que la barre */
  }

  .nav-links li {
    margin: 0;
  }

  .nav-links a {
    display: block;
    padding: 10px; /* Zone de clic confortable au doigt */
  }
}

/* Liens toujours visibles sur grand écran */
@media (min-width: 901px) {
  .burger {
    display: none;
  }
}
/* -------------------------------------------MÉdia query nav fin---------------- */

/* *************************titre***************************** */

.header-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  text-align: center;
  color: #fff;
}

/* Taille proportionnelle à la largeur de l'écran : le titre garde
   les mêmes proportions du mobile au grand écran */
#animated-title {
  display: flex;
  flex-wrap: nowrap; /* Une seule ligne sur PC et tablette */
  justify-content: center;
  /* Le titre fait environ 11 fois la taille de police : 7vw ≈ 77 % de l'écran,
     et le maximum (7.5rem) reste sous la largeur max du bloc (1400px) */
  font-size: clamp(2.5rem, 7vw, 7.5rem);
  font-family: var(--font-title); /* Archivo, comme les titres du site */
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}

.title-word {
  display: inline-flex;
  white-space: nowrap; /* On ne coupe jamais au milieu d'un mot */
}

.animate-letter {
  display: inline-block;
  text-shadow: 2px 2px 10px #53c4e4;
  opacity: 0;
  transform: scale(0.1);
  animation: scaleInFromBackground 1s ease-out forwards;
}

/* "-GLOBE" en jaune, avec une lueur jaune douce (même réglage que la lueur de WEBMASTER) */
.title-word--accent .animate-letter {
  color: var(--yellow); /* Même jaune que les mots animés (.random-word) */
  text-shadow: 2px 2px 10px rgba(242, 194, 48, 0.6);
}

@keyframes scaleInFromBackground {
  0% {
    opacity: 0;
    transform: scale(0.1); /* Les lettres apparaissent très petites */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Taille normale */
  }
}

/* Espacements du hero : valeur cible sur grand écran, un peu plus serrée sur mobile */

/* "Création de sites internet pour artisans" : plus visible, 28px sous elle */
#pup {
  font-size: clamp(1.4rem, 2.2vw, 1.6rem);
  margin: 0 0 clamp(18px, 3vw, 28px);
}

/* Slogan : 36px au-dessus (depuis le titre), 18px en dessous */
#pdown {
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin: clamp(24px, 4vw, 36px) 0 clamp(12px, 2vw, 18px);
}

/* Ligne discrète sous le slogan, 40px au-dessus du bouton */
.hero-badges {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #b9c9dc;
  margin: 0 0 clamp(24px, 4vw, 40px);
}

#pup {
  animation: slideInFromLeft 1s ease-out;
}

#pdown {
  animation: slideInFromRight 1s ease-out;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.cta-button {
  --cta-px: clamp(26px, 5vw, 36px); /* Padding horizontal, réutilisé pour placer la flèche */
  position: relative;
  overflow: hidden; /* Garde la brillance à l'intérieur du bouton */
  display: inline-block;
  padding: clamp(13px, 2vw, 16px) var(--cta-px);
  background: var(--yellow);
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  font-family: Arial, sans-serif; /* Identique dans le hero et dans les sections */
  font-size: 1.1rem;
  /* Au repos : pulsation douce de lueur */
  animation: ctaPulse 3s ease-out infinite;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

/* Brillance qui traverse le bouton toutes les 6s */
.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: ctaShine 6s ease-in-out infinite;
}

/* Flèche qui apparaît au survol, dans le padding de droite (taille du bouton inchangée) */
.cta-button::after {
  content: "→";
  content: "→" / ""; /* Texte alternatif vide : ignorée par les lecteurs d'écran */
  position: absolute;
  top: 50%;
  right: calc(var(--cta-px) / 2 - 0.5em);
  opacity: 0;
  transform: translate(-6px, -50%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  animation: none; /* La pulsation s'arrête, l'ombre de survol prend le relais */
  transform: translateY(-3px);
  background: #f5cf55; /* Jaune un peu plus clair */
  box-shadow: 0 10px 28px rgba(242, 194, 48, 0.45);
}

.cta-button:hover::after,
.cta-button:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.cta-button:active {
  transform: translateY(0) scale(0.98);
}

@keyframes ctaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 194, 48, 0.55);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(242, 194, 48, 0);
  }
}

@keyframes ctaShine {
  0% {
    left: -75%;
  }
  15% {
    left: 125%; /* Traversée en ~0,9s, puis pause jusqu'à la suivante */
  }
  100% {
    left: 125%;
  }
}

/* Style de base pour les mots */
.random-word {
  position: absolute;
  font-size: 1.2rem;
  color: var(--yellow); /* Même jaune que "-GLOBE" dans le titre */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); /* Lisible sur la vidéo */
  opacity: 0;
  transform: scale(0.1);
  animation: scaleAndDisappear 5s forwards;
}

/* Animation Scale : arrivée 3s (comme avant), affiché 5s, puis repart vers l'avant en 1s.
   Si vous changez la taille finale (1.5), changez aussi EXIT_SCALE dans script.js */
@keyframes scaleAndDisappear {
  0% {
    opacity: 0;
    transform: scale(0.1);
    animation-timing-function: ease-out;
  }
  40% {
    /* 3s / 9s : fin de l'arrivée */
    opacity: 1;
    transform: scale(1);
  }
  90% {
    /* 8s / 9s : fin des 5s d'affichage */
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* -------------------------------------------Header responsive---------------- */
@media (max-width: 640px) {
  :root {
    --nav-h: 66px;
  }

  .logo img {
    height: 32px;
  }

  /* Titre sur deux lignes : WEBMASTER / -GLOBE, toujours en grand */
  #animated-title {
    flex-wrap: wrap; /* "-GLOBE" passe à la ligne sur mobile */
    font-size: 12.5vw;
    letter-spacing: 0.02em;
  }

  .random-word {
    font-size: 0.95rem; /* Taille minimale lisible */
  }
}

/* Accessibilité : pas d'animation si l'utilisateur les a désactivées */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animate-letter,
  #pup,
  #pdown {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .random-word {
    display: none;
  }

  /* Parcours : vu-mètre fixe, étapes visibles tout de suite */
  .parcours__meter span {
    animation: none !important;
    transform: none !important;
  }
  .parcours.js-reveal .parcours__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .parcours__intro.js-reveal {
    opacity: 1;
    transition: none;
  }

  /* Bouton : seulement le changement de couleur au survol */
  .cta-button {
    animation: none;
    transition: background-color 0.25s ease;
  }
  .cta-button::before,
  .cta-button::after {
    display: none;
  }
  .cta-button:hover,
  .cta-button:focus-visible,
  .cta-button:active {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================
   Sections sous le header
   ========================================================== */

.site-main,
.site-footer {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  color: var(--blue);
  background: var(--paper);
}

.site-main h2,
.site-main h3 {
  font-family: var(--font-title);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.site-main h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 2rem;
}

.site-main h3 {
  font-size: 1.5rem;
}

.site-main ul,
.site-main ol {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.section--blue {
  background: var(--blue);
  color: #fff;
}

.section--yellow {
  background: var(--yellow);
  color: var(--blue);
}

.kicker {
  font-family: var(--font-title);
  font-weight: 800;
  font-stretch: 85%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  padding-left: 14px;
  border-left: 4px solid var(--yellow);
}
.kicker--yellow {
  color: var(--yellow);
}

/* ---------- Parcours « Ma méthode » ---------- */
/* 4 étapes : scène dessinée (scripts/parcours.js), titre, texte.
   Paysage : en ligne, avec sous chaque scène 14 barres d'une progression en escalier
   (56 au total, de plus en plus hautes, orange → jaune → vert).
   Portrait : empilées, reliées par une ligne verticale avec les numéros (sans barres). */
/* Titre de la section et ligne des délais en dessous */
.site-main .parcours__intro h2 {
  margin-bottom: 0.75rem;
}
.parcours__delays {
  font-size: 1.1rem;
  color: #b9c9dc; /* Couleur secondaire, comme les textes des étapes */
}
/* Seconde ligne, plus discrète */
.parcours__note {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: rgba(185, 201, 220, 0.75);
}
/* Apparition en fondu (classes ajoutées par parcours.js) */
.parcours__intro.js-reveal {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.parcours__intro.js-reveal.is-visible {
  opacity: 1;
}

.parcours {
  counter-reset: etape;
  display: grid;
  gap: 2.5rem 0;
  margin-top: 3rem;
}

.parcours__step {
  counter-increment: etape;
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.parcours__scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* Laisse dépasser l'ombre et les petits éléments en bord de scène */
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.28));
}

/* Progression en escalier : barres verticales arrondies, hauteur --h (%), couleur --c (calculées dans parcours.js) */
.parcours__meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  height: 46px; /* Hauteur maximale d'une barre */
}
.parcours__meter span {
  flex: 1 1 0;
  height: calc(var(--h) * 1%);
  background: var(--c);
  border-radius: 3px;
  transform-origin: bottom;
}

/* Animation (classes ajoutées par parcours.js) : barres à zéro jusqu'à l'arrivée de la section,
   puis apparition une à une de gauche à droite (0,05s d'écart, 0,5s chacune), puis fixes */
.parcours.meter-anim .parcours__meter span {
  transform: scaleY(0);
}
.parcours.meter-anim.meter-on .parcours__meter span {
  animation: meterRise 0.5s ease-out var(--delay) both;
}
@keyframes meterRise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.site-main .parcours__step h3 {
  font-stretch: 85%;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.1;
  text-transform: none;
  color: var(--yellow);
}

.parcours__step p {
  color: #b9c9dc;
  max-width: 30ch;
}

/* Numéro dans un rond : visible seulement en disposition verticale */
.parcours__step::before {
  content: counter(etape);
  display: none;
}

/* Apparition douce au défilement (classes ajoutées par scripts/parcours.js) */
.parcours.js-reveal .parcours__step {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.parcours.js-reveal .parcours__step.is-visible {
  opacity: 1;
  transform: none;
}

/* Écran horizontal : les 4 étapes sur une ligne */
@media (orientation: landscape) and (min-width: 700px) {
  .parcours {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .parcours__step {
    padding-inline: 10px;
  }
}

/* Ordinateur : le parcours prend plus de largeur (jusqu'à 1400px), étapes espacées, textes plus grands */
@media (orientation: landscape) and (min-width: 1100px) {
  .parcours {
    --parcours-w: min(1400px, calc(100vw - 48px));
    width: var(--parcours-w);
    margin-left: calc(50% - var(--parcours-w) / 2); /* Centré, en débordant du conteneur */
    column-gap: clamp(32px, 3vw, 48px);
  }
  .parcours__step {
    padding-inline: 0;
    gap: 18px;
  }
  .site-main .parcours__step h3 {
    font-size: clamp(1.75rem, 1.2vw + 1rem, 2.1rem);
  }
  .parcours__step p {
    font-size: clamp(1.1rem, 0.4vw + 0.9rem, 1.25rem);
    line-height: 1.55;
  }
}

/* Téléphone en paysage : 2 colonnes pour limiter la hauteur */
@media (orientation: landscape) and (max-height: 499px) {
  .parcours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Scènes plus petites : une étape entière tient dans la hauteur de l'écran */
  .parcours__scene,
  .parcours__meter {
    width: min(100%, 260px);
  }
}

/* Écran vertical (tablette, téléphone) : une étape par ligne, reliées par une ligne verticale */
@media (orientation: portrait), (max-width: 699px) and (min-height: 500px) {
  .parcours {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }
  .parcours__step {
    width: 100%;
    max-width: 320px;
    text-align: center;
    justify-items: center;
  }
  .parcours__step + .parcours__step {
    padding-top: 64px;
    margin-top: 1.5rem;
  }
  .parcours__step p {
    margin-inline: auto;
  }
  /* Pas de barres de progression en vertical : la ligne pointillée relie les étapes */
  .parcours__meter {
    display: none;
  }
  .parcours__step::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 3px solid var(--yellow);
    border-radius: 50%;
    background: var(--blue);
    color: var(--yellow);
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
  }
  /* Ligne pointillée qui part de l'étape précédente jusqu'au numéro */
  .parcours__step + .parcours__step::after {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 50%;
    height: calc(64px + 1.5rem);
    border-left: 5px dotted var(--yellow);
    transform: translateX(-50%);
  }
}

/* ---------- Offres ---------- */
.offer-list {
  border-top: 2px solid var(--blue);
}

.offer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.offer h3 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  margin-bottom: 0.35rem;
}

.offer p {
  color: var(--muted);
  max-width: 36rem;
}

.offer .offer__price {
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-title);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--blue);
}
.offer__price small {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.offers__maintenance {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 6px solid var(--yellow);
  background: #fff;
}

.offers__promise {
  margin-top: 1.5rem;
  color: var(--blue);
}

/* Apparition des offres au défilement (environ 2s au total).
   Réglages : décalage entre deux offres, durée du glissement, durée du fondu, distance. */
#services {
  --offers-stagger: 0.3s;
  --offers-slide: 0.5s;
  --offers-fade: 0.4s;
  --offers-shift: 40px;
  /* La maintenance arrive en même temps que la dernière description, la phrase juste après */
  --offers-maint-delay: calc(3 * var(--offers-stagger) + var(--offers-slide));
  --offers-promise-delay: calc(var(--offers-maint-delay) + var(--offers-stagger));
}

/* État caché seulement si le JS a ajouté .offers-anim (sans JS, tout reste visible) */
.offers-anim .offer h3 {
  opacity: 0;
  transform: translateX(calc(-1 * var(--offers-shift)));
}
.offers-anim .offer .offer__price {
  opacity: 0;
  transform: translateX(var(--offers-shift));
}
.offers-anim .offer__desc,
.offers-anim .offers__maintenance,
.offers-anim .offers__promise {
  opacity: 0;
}

/* Nom et prix glissent ensemble, offre après offre (--i dans le HTML) */
.offers-anim.is-visible .offer h3,
.offers-anim.is-visible .offer .offer__price {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--offers-slide) ease-out,
    transform var(--offers-slide) ease-out;
  transition-delay: calc(var(--i) * var(--offers-stagger));
}
/* Puis la description apparaît en fondu */
.offers-anim.is-visible .offer__desc {
  opacity: 1;
  transition: opacity var(--offers-fade) ease-out;
  transition-delay: calc(var(--i) * var(--offers-stagger) + var(--offers-slide));
}
.offers-anim.is-visible .offers__maintenance {
  opacity: 1;
  transition: opacity var(--offers-fade) ease-out;
  transition-delay: var(--offers-maint-delay);
}
.offers-anim.is-visible .offers__promise {
  opacity: 1;
  transition: opacity var(--offers-fade) ease-out;
  transition-delay: var(--offers-promise-delay);
}

@media (max-width: 640px) {
  #services {
    --offers-shift: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offers-anim .offer h3,
  .offers-anim .offer .offer__price,
  .offers-anim .offer__desc,
  .offers-anim .offers__maintenance,
  .offers-anim .offers__promise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Qui je suis ---------- */
/* Section sur fond bleu : photo encadrée à gauche, texte, chiffres clés et bouton à droite */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* Colonne du personnage élargie (avant : 1fr 1.5fr) */
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* Personnage sans cadre, aussi large que sa colonne, calé en haut :
   son sommet arrive au niveau du petit titre « Qui je suis » */
.about__visual {
  position: relative;
  width: 100%;
  margin: 0;
  align-self: start;
}

.about__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Étiquette posée en bas à gauche de la photo */
.about__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 0.4rem 0.8rem;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--yellow);
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Grands écrans horizontaux : étiquette centrée sous le personnage, ~12px sous l'ombre.
   L'image a une bande transparente sous l'ombre (5/116 de sa largeur ≈ 4,31 %),
   d'où la marge négative ; ici l'image est aussi large que son conteneur. */
@media (min-width: 861px) and (orientation: landscape) {
  .about__tag {
    position: static;
    display: none; /* Étiquette masquée sur ces écrans (avant : display: table), visible sur tablette et téléphone */
    margin: calc(12px - 4.31%) auto 0;
  }
  /* Personnage agrandi de 20 % (largeur et donc hauteur × 1,2), centré sur sa colonne
     (avant : 110 % / -5 %). Sur les écrans plus étroits (~861 à 1200px), l'agrandissement
     est limité pour rester à 8px au moins du bord gauche de l'écran et 16px du texte. */
  .about__photo {
    /* Place disponible à gauche (marge de la page) et à droite (espace entre les colonnes) */
    --room-left: min(10%, calc(max(20px, (100vw - 1160px) / 2 + 20px) - 8px));
    --room-right: calc(clamp(2.5rem, 6vw, 5rem) - 16px);
    width: min(120%, calc(100% + var(--room-left) + var(--room-right)));
    max-width: none;
    margin-left: calc(-1 * var(--room-left));
    margin-right: 0;
  }
}

/* Écrans verticaux plus larges qu'un téléphone (481 à 860px, ex. tablette en portrait) :
   personnage réduit et centré, étiquette centrée ~12px sous l'ombre */
@media (orientation: portrait) and (min-width: 481px) and (max-width: 860px) {
  .about__photo {
    width: auto;
    height: auto;
    max-height: 320px;
    max-width: 60%;
    margin-inline: auto;
  }
  .about__tag {
    position: static;
    display: table;
    margin: 2px auto 0; /* 12px moins la bande transparente sous l'ombre (≈ 10px à 320px de haut) */
  }
}

.about .about__copy h2 {
  hyphens: manual; /* Pas de coupure automatique au milieu des mots */
  text-wrap: balance;
}

.about__copy > p:not(.kicker) {
  color: rgba(255, 255, 255, 0.85);
  max-width: 40rem;
}
.about__copy > p + p {
  margin-top: 1rem;
}
.about__copy > .about__lead {
  color: #fff;
}

/* Trois chiffres clés côte à côte, séparés par de fines lignes */
.site-main .about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.about__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem clamp(0.75rem, 2vw, 1.5rem);
}
.about__stats li:first-child {
  padding-left: 0;
}
.about__stats li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.about__num {
  font-family: var(--font-title);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  color: var(--yellow);
  white-space: nowrap;
}
.about__label {
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--paper); /* Blanc cassé */
}

/* Apparition au défilement : photo, texte, chiffres, bouton (--r dans le HTML) */
.about.js-reveal .about__reveal {
  opacity: 0;
  transform: translateY(24px);
}
.about.js-reveal.is-visible .about__reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  transition-delay: calc(var(--r) * 0.25s);
}

@media (prefers-reduced-motion: reduce) {
  .about.js-reveal .about__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Avantages ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--yellow);
}

.benefits li {
  padding: 2rem 1.75rem 0 0;
}
.benefits li + li {
  padding-left: 1.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.benefits__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 2.5rem;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 1rem;
}

.benefits h3 {
  margin-bottom: 0.75rem;
}

.benefits p {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Réalisations ---------- */
.project {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.mockup {
  border: 2px solid var(--blue);
  background: #fff;
}
.mockup__bar {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: var(--blue);
}
.mockup__bar span {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
}
.mockup__screen {
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.mockup__brand {
  font-family: var(--font-title);
  font-weight: 900;
  font-stretch: 75%;
  text-transform: uppercase;
  color: #1f6fb2;
  margin-bottom: 1rem;
}
.mockup__title {
  font-family: var(--font-title);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.mockup__cta {
  display: inline-block;
  background: #1f6fb2;
  color: #fff;
  font-weight: 700;
  padding: 0.5em 1em;
  margin-bottom: 1.5rem;
}
.mockup__rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mockup__rows span {
  height: 56px;
  background: #e8eef4;
  border-top: 3px solid #1f6fb2;
}

/* Mention sous la maquette */
.project__caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.project__text h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}
.project__text > p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.project__facts li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.project__facts strong {
  display: inline-block;
  min-width: 6.5rem;
  font-family: var(--font-title);
  font-stretch: 85%;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* ---------- Contact ---------- */
.contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
}
.contact h2 {
  margin-bottom: 0.5rem;
}
.contact__mail {
  font-family: var(--font-title);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.4rem, 4.5vw, 2.5rem);
  color: var(--blue);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
.contact__mail:hover {
  text-decoration-color: #fff;
}

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--blue);
  color: rgba(255, 255, 255, 0.8);
  padding: 1.75rem 0;
  font-size: 0.95rem;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}
.site-footer a {
  color: #fff;
}

/* ---------- Page mentions légales ---------- */
.legal {
  padding: calc(var(--nav-h) + 3rem) 0 5rem;
}
.legal .container {
  max-width: 760px;
}
.legal h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 2px solid var(--blue);
}
.legal p + p {
  margin-top: 0.75rem;
}
.legal a {
  color: var(--blue);
}

/* ---------- Sections responsive ---------- */
@media (max-width: 860px) {
  .benefits {
    grid-template-columns: 1fr;
  }
  .benefits li,
  .benefits li + li {
    padding: 1.75rem 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .project,
  .about {
    grid-template-columns: 1fr;
  }
  /* Photo d'abord, à 80 % de la largeur, centrée */
  .about__visual {
    width: 80%;
    margin-inline: auto;
  }
  /* Bouton en pleine largeur */
  .about__action .cta-button {
    display: block;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
  .offer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .offer .offer__price {
    text-align: left;
  }
}