/* ==========================================================================
   MKLWEB — Feuille de style principale
   ==========================================================================
   Organisation du fichier (utilise Ctrl+F / Cmd+F pour sauter à un bloc) :
   1. Variables globales (couleurs, polices, espacements)
   2. Styles de base (reset, typo, boutons, liens)
   3. Header (menu du haut)
   4. Hero (bannière d'accueil)
   5. Sections génériques (services, collaborations, stats, CTA contact)
   6. Footer
   7. Responsive (version mobile) — bloc 1
   8. Transitions de page (fondu au noir)
   9. Page header (bannière des pages secondaires) + sous-navigation
   10. Prestations (grille d'offres)
   11. Collaborations (liste + détail)
   12. Contact (formulaire)
   13. Biographie (intro, parcours, formation)
   14. Portfolio (galerie + vidéos + lightbox)
   15. Responsive — bloc 2 (réglages fins par composant)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES GLOBALES
   Toutes les couleurs et réglages du site partent d'ici. Si tu changes une
   couleur, change-la UNIQUEMENT ici : elle se répercute partout (c'est tout
   l'intérêt des variables CSS, "var(--nom)" va chercher la valeur ici).
   ========================================================================== */

/* Charge les 2 polices Google Fonts utilisées sur le site */
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* --- Couleurs de marque --- */
  --orange: #FF7F0F;          /* Orange principal : boutons, accents, liens actifs */
  --orange-light: #FF9A40;    /* Orange clair : hover des boutons orange */
  --anthracite: #21242B;      /* Fond sombre principal (header, sections dark, hero) */
  --anthracite-soft: #2C2F38; /* Fond sombre légèrement plus clair (cartes sur fond dark) */
  --ink: #15171C;             /* Le plus sombre : footer, CTA final, fondu de transition */
  --paper: #F5F4F1;           /* Fond clair principal (presque blanc, plus chaud que du blanc pur) */
  --paper-dim: #EAE8E2;       /* Fond clair légèrement grisé (zones d'images en chargement) */

  /* --- Couleurs de texte --- */
  --text-light: #ECECE9;      /* Texte clair, utilisé sur fond sombre */
  --text-muted: #9A9CA3;      /* Texte gris clair, utilisé sur fond sombre (sous-titres, légendes) */
  --text-dark: #1B1D22;       /* Texte sombre, utilisé sur fond clair (titres) */
  --text-dark-muted: #5B5E66; /* Texte gris foncé, utilisé sur fond clair (paragraphes) */

  /* --- Bordures discrètes --- */
  --border-soft: rgba(255,255,255,0.08); /* Bordure quasi invisible sur fond sombre */
  --border-dark: rgba(27,29,34,0.1);     /* Bordure quasi invisible sur fond clair */

  /* --- Typographies --- */
  --font-display: 'Jura', sans-serif;  /* Police "technique" : titres, boutons, labels */
  --font-body: 'Manrope', sans-serif;  /* Police de lecture : paragraphes */

  /* --- Mise en page --- */
  --max-width: 1180px;                       /* Largeur max du contenu (.container) */
  --radius: 6px;                             /* Arrondi standard des coins (boutons, cartes...) */
  --section-pad: clamp(64px, 10vw, 120px);   /* Espacement vertical des sections, qui s'adapte à la taille d'écran */
}


/* ==========================================================================
   2. STYLES DE BASE
   ========================================================================== */

/* box-sizing: border-box partout = les paddings/bordures ne font plus
   gonfler la largeur des éléments. Règle universelle recommandée. */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; /* Défilement doux quand on clique sur une ancre (#section) */
}

/* Respecte les personnes qui ont activé "réduire les animations" dans leur OS */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* Lissage des polices, plus net sur Mac/iOS */
}

img { max-width: 100%; display: block; } /* Les images ne dépassent jamais de leur conteneur */

a {
  color: inherit;        /* Les liens prennent la couleur du texte autour, pas le bleu par défaut */
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* .container = la colonne centrale du site, présente sur CHAQUE section.
   C'est elle qui empêche le contenu de s'étaler sur toute la largeur d'un
   grand écran, et qui ajoute la marge latérale sur mobile. */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Contour orange visible uniquement à la navigation au clavier (accessibilité) */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ---- "Eyebrow" / label au-dessus des titres ----
   C'est la petite étiquette orange façon balise HTML qu'on voit partout
   sur le site (ex: <services>, <collaborations>). Le symbole < et > est
   ajouté automatiquement en CSS (::before / ::after), pas besoin de les
   taper dans le HTML. La classe "closing" inverse en </balise> fermante. */
.tag-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-weight: 600;
}
.tag-label::before { content: "<"; opacity: 0.55; }
.tag-label::after { content: ">"; opacity: 0.55; }
.tag-label.closing::before { content: "</"; }
.tag-label.closing::after { content: ">"; }

/* ---- Boutons ----
   .btn = styles communs (taille, police). Puis .btn-primary (orange plein)
   ou .btn-outline (juste un contour) pour la couleur. */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--orange);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--orange-light);
  transform: translateY(-2px); /* Petit effet de "soulèvement" au survol */
}
.btn-outline {
  border-color: var(--text-muted);
  color: var(--text-light);
}
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}


/* ==========================================================================
   3. HEADER (menu du haut, présent sur toutes les pages via includes/header.php)
   ========================================================================== */
.site-header {
  position: sticky;  /* Reste collé en haut quand on scrolle */
  top: 0;
  z-index: 100;       /* Toujours au-dessus du reste du contenu */
  background: var(--anthracite);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo à gauche, menu à droite */
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo-img {
  height: 30px;
  width: auto; /* La largeur s'ajuste automatiquement pour garder les proportions du logo */
  display: block;
}

.main-nav { display: flex; gap: 32px; align-items: center; }
.main-nav a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative; /* Nécessaire pour positionner le petit trait orange ci-dessous */
}
.main-nav a:hover, .main-nav a.active { color: var(--text-light); }
/* Trait orange sous le lien de la page actuellement affichée
   (la classe "active" est ajoutée automatiquement par includes/header.php) */
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  height: 2px;
  background: var(--orange);
}
.nav-cta {
  background: var(--orange);
  color: var(--ink) !important;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--orange-light) !important; }

.nav-toggle { display: none; } /* Le bouton "burger" mobile, caché par défaut sur desktop */

/* ---- Version mobile du menu ----
   En dessous de 860px, le menu horizontal disparaît et le bouton burger
   apparaît. Le JS (assets/js/main.js) ajoute/retire la classe "nav-open"
   au clic pour afficher le menu déroulant. */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .main-nav.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0; right: 0;
    background: var(--anthracite);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--border-soft);
  }
  .main-nav a.active::after { display: none; } /* Le trait orange n'a pas de sens en colonne */
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.6rem;
    cursor: pointer;
  }
}


/* ==========================================================================
   4. HERO (bannière de l'accueil, section "hero" dans index.php uniquement)
   ==========================================================================
   ASTUCE IMPORTANTE : chaque page définit son image de fond directement
   dans le HTML via un style inline, par exemple :
     <section class="hero" style="--hero-bg: url('/assets/img/hero/hero-accueil.jpg');">
   Cette variable --hero-bg est ensuite réutilisée ici dans background-image.
   Si l'image n'est pas encore là (--hero-bg non défini), la valeur de
   secours "none" s'applique et seul le dégradé sombre + l'arrière-plan
   anthracite restent visibles — donc rien ne casse si l'image manque.

   /!\ PIÈGE CSS À CONNAÎTRE (si tu modifies ces chemins un jour) /!\
   Le chemin dans url(...) DOIT commencer par un "/" (chemin absolu depuis
   la racine du site, ex: /assets/img/hero/hero-accueil.jpg).
   Pourquoi : quand une URL relative est définie dans une variable CSS
   (--hero-bg) depuis le HTML, mais UTILISÉE dans ce fichier .css externe
   (via var(--hero-bg) ci-dessous), le navigateur résout le chemin relatif
   par rapport à l'EMPLACEMENT DU FICHIER .CSS (assets/css/), et non par
   rapport à la page HTML qui l'a définie. Un chemin relatif comme
   "assets/img/hero/hero-accueil.jpg" devient alors, par erreur,
   "assets/css/assets/img/hero/hero-accueil.jpg" (404 garanti). Un chemin
   absolu commençant par "/" évite complètement ce problème, car il ne
   dépend plus d'aucun fichier de référence.
   ========================================================================== */
.hero {
  background-color: var(--anthracite);
  /* 3 couches superposées (la dernière définie est au-dessus à l'écran) :
     1. dégradé sombre diagonal -> garantit la lisibilité du texte blanc
     2. lueur orange en haut à droite -> touche de marque discrète
     3. l'image de fond de la page (--hero-bg), ou rien si absente */
  background-image:
    linear-gradient(135deg, rgba(21,23,28,0.92) 0%, rgba(33,36,43,0.78) 100%),
    radial-gradient(circle at top right, rgba(255,127,15,0.18), transparent 60%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  padding: calc(var(--section-pad) + 20px) 0 var(--section-pad);
  position: relative;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px; /* Empêche le titre/texte de s'étaler sur toute la largeur de l'écran */
}
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem); /* Taille fluide : s'adapte entre mobile et grand écran */
  font-weight: 700;
}
.hero h1 .accent { color: var(--orange); } /* Pour mettre un mot du titre en orange */
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  margin: 22px 0 36px;
  max-width: 560px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Les 2 boutons du hero */

.hero-meta {
  margin-top: 56px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.hero-meta strong { color: var(--text-light); } /* Les chiffres ("25 ans", "10+"...) en plus clair */


/* ==========================================================================
   5. SECTIONS GÉNÉRIQUES (réutilisées sur plusieurs pages)
   ========================================================================== */
.section {
  padding: var(--section-pad) 0; /* Espacement vertical standard entre les blocs de contenu */
}
.section-dark {
  background: var(--anthracite);
  color: var(--text-light);
} /* Ajoute juste cette classe à une .section pour la passer en fond sombre */

.section-header {
  max-width: 640px;
  margin-bottom: 56px;
} /* Le bloc "titre + texte d'intro" en haut de chaque section */
.section-header h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}
.section-header p {
  color: var(--text-dark-muted);
  margin-top: 14px;
  font-size: 1.05rem;
}
.section-dark .section-header p { color: var(--text-muted); } /* Variante texte clair si section sombre */

/* ---- Services (les 3 cartes "Sites web / Graphisme / Réseaux sociaux" de l'accueil) ---- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales sur desktop */
  gap: 28px;
}
.service-card {
  background: #fff;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px); /* La carte "se soulève" légèrement au survol */
  border-color: var(--orange);
  box-shadow: 0 16px 32px -16px rgba(33,36,43,0.18);
}
.service-icon {
  width: 46px; height: 46px;
  color: var(--orange);
  margin-bottom: 20px;
} /* Les petites icônes SVG en haut de chaque carte de service */
.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.service-card p {
  color: var(--text-dark-muted);
  font-size: 0.95rem;
  margin: 0 0 16px;
}
.service-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
} /* Le lien "En savoir plus" en bas de chaque carte */
.service-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.service-card:hover .service-link svg { transform: translateX(3px); } /* La flèche avance un peu au survol */

/* ---- Collaborations (carrousel de cartes sur l'accueil + suggestions en bas de fiche détail) ---- */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur desktop */
  gap: 20px;
}
.collab-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--anthracite-soft);
} /* Carte cliquable = lien <a> qui contient l'image */
.collab-card img {
  width: 100%; height: 100%;
  object-fit: cover; /* L'image remplit toute la carte sans être déformée */
  transition: transform 0.4s ease;
}
.collab-card:hover img { transform: scale(1.06); } /* Léger zoom au survol */
.collab-overlay {
  position: absolute;
  inset: 0; /* Couvre toute la carte */
  background: linear-gradient(180deg, transparent 40%, rgba(21,23,28,0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Le texte reste collé en bas de la carte */
  padding: 18px;
}
.collab-overlay .client-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-light);
}
.collab-overlay .client-tag {
  font-size: 0.78rem;
  color: var(--orange-light);
  margin-top: 2px;
} /* Non utilisé sur la plupart des pages actuellement (tagline retirée), mais garde la classe au cas où */
.collab-footer {
  margin-top: 40px;
  text-align: center;
} /* Conteneur du bouton "Toutes les collaborations" */

/* ---- Section "Pourquoi moi" / chiffres clés de l'accueil ---- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.stat-block {
  border-top: 2px solid var(--orange); /* Le petit trait orange au-dessus de chaque chiffre */
  padding-top: 20px;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}
.stat-label {
  color: var(--text-dark-muted);
  font-size: 0.95rem;
  margin-top: 6px;
}

/* ---- CTA final (bloc "Votre site web, sans usine à gaz. On en parle ?" + formulaire) ---- */
.cta-final {
  background: var(--ink); /* Le fond le plus sombre du site */
  color: var(--text-light);
  padding: var(--section-pad) 0;
}
.cta-final-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.cta-final-head h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
}
.cta-final-head p {
  color: var(--text-muted);
  margin-top: 16px;
}

/* Le formulaire de devis (utilisé sur l'accueil ET sur la page contact —
   sur contact.php, la classe .quote-form-light vient en plus changer les
   couleurs pour un fond clair, voir plus bas dans ce fichier) */
.quote-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--anthracite-soft);
  border-radius: var(--radius);
  padding: 36px;
  border: 1px solid var(--border-soft);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 champs côte à côte (ex: Prénom / Nom) */
  gap: 16px;
}
.quote-form label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  background: var(--anthracite);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--orange);
  outline: none;
}
.quote-form textarea { resize: vertical; min-height: 110px; } /* Empêche d'agrandir en largeur, juste en hauteur */
.quote-form .btn-primary { width: 100%; justify-content: center; } /* Le bouton "Envoyer" prend toute la largeur */


/* ==========================================================================
   6. FOOTER (présent sur toutes les pages via includes/footer.php)
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--text-muted);
  padding: 48px 0 28px;
  border-top: 1px solid var(--border-soft);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-soft);
} /* Ligne du haut : logo + menu + icônes réseaux sociaux */
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a { font-size: 0.9rem; }
.footer-nav a:hover { color: var(--orange); }

/* Icônes LinkedIn / Instagram (SVG en orange plein, pas de cercle ni de
   logo multicolore — voir includes/footer.php pour le code SVG complet) */
.footer-social { display: flex; gap: 16px; align-items: center; }
.footer-social svg {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footer-social a:hover svg { transform: translateY(-2px); opacity: 0.85; }
.footer-social a:hover { color: var(--orange); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 8px;
} /* Ligne du bas : copyright + mention */


/* ==========================================================================
   7. RESPONSIVE — bloc 1 (réglages mobile pour les composants ci-dessus)
   ========================================================================== */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }       /* 3 cartes services -> 1 colonne */
  .collab-grid { grid-template-columns: repeat(2, 1fr); } /* 4 collabs -> 2 colonnes */
  .stats-row { grid-template-columns: 1fr; gap: 24px; }   /* 3 chiffres -> empilés */
  .form-row { grid-template-columns: 1fr; }               /* Champs du formulaire -> empilés */
}


/* ==========================================================================
   8. TRANSITIONS DE PAGE — fondu au noir
   ==========================================================================
   Effet natif du navigateur (View Transitions API), activé sans aucun
   JavaScript par la règle @view-transition ci-dessous. Quand on clique sur
   un lien interne, l'ancienne page s'efface vers le noir, puis la nouvelle
   apparaît depuis le noir. Fonctionne sur Chrome/Edge 126+ et Safari 18.2+ ;
   sur les navigateurs qui ne le supportent pas encore (Firefox), la
   navigation reste simplement normale, sans aucune erreur.

   ATTENTION : l'ancienne syntaxe <meta name="view-transition"> qu'on voit
   parfois dans de vieux tutoriels est dépréciée depuis Chrome 125 et ne
   fait plus rien — c'est bien cette règle CSS @view-transition qui est
   l'opt-in officiel aujourd'hui.
   ========================================================================== */
@view-transition {
  navigation: auto; /* Active la transition sur toute navigation interne classique */
}

/* Fond uni affiché pendant le "trou noir" entre la sortie de l'ancienne
   page et l'entrée de la nouvelle (sinon on verrait la page du dessous
   apparaître en transparence pendant l'animation) */
::view-transition-group(root) {
  background-color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 600ms ease-out both mklweb-fade-out;
  }
  ::view-transition-new(root) {
    animation: 600ms ease-in both mklweb-fade-in;
  }
}
/* L'ancienne page reste visible jusqu'à 45% du temps, puis disparaît :
   ça laisse un court "trou noir" avant que la nouvelle page n'apparaisse
   (de 55% à 100%), plutôt qu'un simple fondu croisé immédiat. */
@keyframes mklweb-fade-out {
  0%   { opacity: 1; }
  45%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes mklweb-fade-in {
  0%   { opacity: 0; }
  55%  { opacity: 0; }
  100% { opacity: 1; }
}


/* ==========================================================================
   9. PAGE HEADER (bannière des pages secondaires : Prestations, Portfolio,
   Collaborations, Biographie, Contact, fiche détail collaboration...)
   ==========================================================================
   Même principe que le .hero de l'accueil : l'image de fond vient de la
   variable --hero-bg définie en style inline dans chaque page PHP.
   ========================================================================== */
.page-header {
  background-color: var(--anthracite);
  background-image:
    linear-gradient(135deg, rgba(21,23,28,0.92) 0%, rgba(33,36,43,0.78) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  padding: calc(var(--section-pad) * 0.6) 0 calc(var(--section-pad) * 0.5);
} /* Padding réduit par rapport au .hero de l'accueil : plus compact, car
     ce n'est "que" un en-tête de page, pas LE hero principal du site */
.page-header h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}
.page-header p {
  color: var(--text-muted);
  max-width: 620px;
  margin-top: 16px;
  font-size: 1.05rem;
}
.page-header .accent { color: var(--orange); }

/* ---- Sous-navigation en pilules (Prestations, Portfolio, Biographie, Collaborations) ----
   Liens d'ancrage qui font défiler la page jusqu'à une section précise
   (ex: #sites-web, #graphisme...), avec un style de "pilule" cliquable. */
.subnav {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.subnav a {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px; /* Forme de pilule */
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  transition: all 0.2s ease;
}
.subnav a:hover, .subnav a.active {
  border-color: var(--orange);
  color: var(--orange);
}


/* ==========================================================================
   10. PRESTATIONS (grille d'offres image + texte, réutilisée 3 fois sur la
   page prestations.php : Sites web / Graphisme / Réseaux sociaux)
   ========================================================================== */
.presta-block {
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--border-dark); /* Sépare visuellement chaque grand bloc */
}
.presta-block:last-child { border-bottom: none; } /* Pas de ligne après le tout dernier bloc */
.presta-block-intro {
  max-width: 680px;
  margin-bottom: 48px;
}
.presta-block-intro p {
  color: var(--text-dark-muted);
  font-size: 1.05rem;
  margin-top: 14px;
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cartes d'offre par ligne sur desktop */
  gap: 28px;
}
.offer-card {
  background: #fff;   /* TOUJOURS blanc, que la section autour soit claire ou sombre (.section-dark) */
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(33,36,43,0.18);
}
.offer-card .offer-img {
  aspect-ratio: 16/9;
  background: var(--paper-dim); /* Couleur visible tant que l'image n'a pas encore chargé/n'existe pas */
  overflow: hidden;
}
.offer-card .offer-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.offer-card .offer-body { padding: 24px 26px; }
.offer-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  /* Couleur fixée en dur ici (texte toujours sombre) car la carte est
     toujours blanche même quand la section qui l'entoure est sombre
     (.section-dark) : sans cette ligne, le titre héritait du texte clair
     de la section et devenait illisible sur fond blanc — bug corrigé. */
  color: var(--text-dark);
}
.offer-card p {
  color: var(--text-dark-muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
}


/* ==========================================================================
   11A. COLLABORATIONS — page liste (portfolio-clients.php)
   ========================================================================== */
.collab-grid-full {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes (demandé explicitement, pas 3) */
  gap: 24px;
}
.collab-grid-full .collab-card { aspect-ratio: 16/10; } /* Cartes plus larges qu'en 3 colonnes */

/* ---- Cartes "propres" : le nom du client est déjà écrit dans l'image
   elle-même, donc pas de texte permanent sur la carte. Seul un bandeau
   "En savoir plus" apparaît au survol (classe collab-card-clean, à ajouter
   en plus de collab-card dans le HTML). ---- */
.collab-card-clean .collab-hover {
  position: absolute;
  inset: 0;
  background: rgba(21,23,28,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                     /* Invisible par défaut */
  transition: opacity 0.25s ease;
}
.collab-card-clean:hover .collab-hover { opacity: 1; } /* Apparaît au survol */
.collab-card-clean .collab-hover span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-light);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 10px 22px;
  border-radius: 999px; /* Pilule, comme un petit bouton */
  transition: border-color 0.2s ease, color 0.2s ease;
}
.collab-card-clean:hover .collab-hover span {
  border-color: var(--orange);
  color: var(--orange-light);
}


/* ==========================================================================
   11B. COLLABORATION — page détail (collaboration.php, fiche d'un seul client)
   ========================================================================== */
.collab-detail-hero {
  aspect-ratio: 21/9; /* Format très large, façon bannière cinéma */
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.collab-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.collab-detail-body {
  max-width: 720px; /* Confort de lecture : le texte ne s'étale pas sur toute la largeur */
}
.collab-detail-body .client-tag {
  color: var(--orange);
}
.collab-detail-body p {
  color: var(--text-dark-muted);
  font-size: 1.05rem;
}
.collab-back {
  margin-top: 48px;
} /* Conteneur du bouton "← Toutes les collaborations" */


/* ==========================================================================
   12. RESPONSIVE — pages secondaires (Prestations / Collaborations)
   ========================================================================== */
@media (max-width: 900px) {
  .offer-grid { grid-template-columns: 1fr; }              /* 2 offres -> empilées */
  .collab-grid-full { grid-template-columns: repeat(2, 1fr); } /* Reste en 2 colonnes même en tablette */
}


/* ==========================================================================
   13. CONTACT (page contact.php)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* Colonne info (gauche) un peu plus étroite que le formulaire (droite) */
  gap: 48px;
  align-items: start;
}
.contact-info h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: var(--text-dark);
}
.contact-info p {
  color: var(--text-dark-muted);
  margin-bottom: 28px;
}
.contact-note p { color: var(--text-dark-muted); }
.contact-note .footer-social a { color: var(--text-dark); }     /* Icônes réutilisées ici sur fond clair */
.contact-note .footer-social a:hover { color: var(--orange); }

/* ---- Variante claire du formulaire de devis ----
   Sur l'accueil, le formulaire est sur fond sombre (.quote-form de base).
   Sur la page contact, la section est claire : on ajoute donc CETTE classe
   .quote-form-light EN PLUS de .quote-form dans le HTML pour inverser les
   couleurs (fond blanc, texte sombre) sans dupliquer tout le composant. */
.quote-form-light {
  background: #fff;
  border: 1px solid var(--border-dark);
}
.quote-form-light label { color: var(--text-dark-muted); }
.quote-form-light input,
.quote-form-light select,
.quote-form-light textarea {
  background: var(--paper);
  border: 1px solid var(--border-dark);
  color: var(--text-dark);
}
.quote-form-light input:focus,
.quote-form-light select:focus,
.quote-form-light textarea:focus {
  border-color: var(--orange);
}

/* Bandeaux de confirmation/erreur affichés après l'envoi du formulaire
   (gérés par contact.php selon ?status=success ou ?status=error dans l'URL) */
.form-alert {
  font-family: var(--font-display);
  font-size: 0.9rem;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.form-alert.success {
  background: rgba(34, 197, 94, 0.08);
  color: #15803D;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.form-alert.error {
  background: rgba(239, 68, 68, 0.08);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.25);
}


/* ==========================================================================
   14. BIOGRAPHIE (biographie.php)
   ========================================================================== */

/* ---- Intro avec photo (utilisée en haut du bloc #hello-world) ---- */
.bio-intro {
  display: grid;
  grid-template-columns: 220px 1fr; /* Photo à gauche (largeur fixe), texte à droite (flexible) */
  gap: 40px;
  align-items: center;
}
.bio-photo {
  width: 100%;
  aspect-ratio: 1/1; /* Toujours carrée, quelle que soit la photo fournie */
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--orange);
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-intro-text p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.bio-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-light);
}
.bio-role {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 0.9rem;
}

/* ---- Timeline du parcours professionnel ----
   La ligne verticale + les petits points orange sont entièrement faits en
   CSS (pas d'image) : .timeline a une bordure à gauche, et chaque
   .timeline-item ajoute un point rond positionné par-dessus avec ::before. */
.timeline {
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--border-dark); /* La ligne verticale de la timeline */
}
.timeline-item {
  position: relative;
  padding-bottom: 48px; /* Espace entre deux expériences */
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  /* Le petit point orange sur la ligne verticale, aligné avec chaque date */
  content: "";
  position: absolute;
  left: -38px;
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--paper); /* Crée un petit "halo" qui détache le point de la ligne */
}
.timeline-date {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 6px;
}
.timeline-item h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
} /* Intitulé du poste */
.timeline-company {
  font-size: 0.95rem;
  color: var(--text-dark-muted);
  margin-bottom: 10px;
} /* Nom de l'entreprise */
.timeline-item ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dark-muted);
} /* Liste à puces des missions, pour chaque expérience */
.timeline-item li { margin-bottom: 6px; font-size: 0.95rem; }

/* ---- Pilules de compétences ----
   Utilisées DANS chaque .timeline-item (sous le nom de l'entreprise, avant
   la liste de missions) pour afficher les compétences/outils liés à cette
   période précise. Ancienne section "Compétences" séparée supprimée :
   tout est maintenant réparti directement dans le parcours pro. */
.skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.skill-chip {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,127,15,0.12);
  color: var(--orange-light);
  border: 1px solid rgba(255,127,15,0.25);
}

/* ---- Formation & Personnel (les 2 colonnes en bas de la biographie) ---- */
.simple-list {
  list-style: none;
  margin: 0;
  padding: 0;
} /* Liste des diplômes/certifications, sans puces, avec un séparateur fin entre chaque ligne */
.simple-list > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-dark-muted);
}
.simple-list > li:first-child { padding-top: 0; }
.simple-list > li:last-child { border-bottom: none; }
.simple-list strong { color: var(--text-dark); font-family: var(--font-display); }
.simple-list ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 0.92rem;
} /* Sous-liste éventuelle (ex: les 2 diplômes du double RNCP III) */

.facts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
} /* Les chips "44 ans", "Anglais B2", etc. dans le bloc "Personnel" */
.fact-chip {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  color: var(--text-dark);
}


/* ==========================================================================
   15. PORTFOLIO (portfolio.php) — galerie défilante + vidéos + lightbox
   ========================================================================== */

/* ---- Galerie horizontale défilante ("Sites web" et "Graphisme") ----
   Plutôt qu'une grille classique (qui ferait 2-3 rangées et donc beaucoup
   de défilement vertical), les vignettes sont alignées en flex et on laisse
   le navigateur gérer le scroll horizontal nativement (overflow-x: auto),
   avec un "magnétisme" doux sur chaque vignette (scroll-snap). */
.gallery-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
}
.gallery-strip::-webkit-scrollbar { height: 8px; }                    /* Style de la barre de défilement (Chrome/Safari) */
.gallery-strip::-webkit-scrollbar-track { background: transparent; }
.gallery-strip::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 999px;
}
.section-dark .gallery-strip::-webkit-scrollbar-thumb { background: var(--border-soft); } /* Variante sur fond sombre */

/* ---- Grille de mockups ("Sites web" uniquement) ----
   Présentation différente du gallery-strip ci-dessus : ici on veut une
   mise en avant plus posée des mockups (2 grandes cartes par ligne plutôt
   qu'un défilement), avec un effet de carte "flottante" (ombre + léger
   soulèvement au survol) façon portfolio d'agence. La légende est sous
   l'image plutôt qu'en overlay, pour ne jamais masquer le mockup. */
.mockup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.mockup-card {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 45px -24px rgba(33,36,43,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mockup-card:hover {
  transform: translateY(-6px); /* Léger "flottement" au survol */
  box-shadow: 0 30px 55px -20px rgba(33,36,43,0.45);
}
.mockup-image {
  aspect-ratio: 4/3;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mockup-image img {
  width: 100%;
  height: 100%;
  /* "contain" plutôt que "cover" : on ne veut JAMAIS rogner un mockup
     (souvent un cadre d'écran/navigateur dessiné à la main), donc l'image
     entière reste toujours visible, quitte à laisser un peu de marge
     autour si son format ne correspond pas exactement à la carte. */
  object-fit: contain;
  padding: 24px;
  transition: transform 0.3s ease;
}
.mockup-card:hover .mockup-image img { transform: scale(1.03); }
.mockup-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-top: 1px solid var(--border-dark);
}
.mockup-caption .mockup-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
}
.mockup-caption .mockup-view {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
}
.mockup-card:hover .mockup-view { transform: translateX(3px); }

.portfolio-thumb {
  position: relative;
  display: block;
  flex: 0 0 260px;  /* Largeur fixe de chaque vignette (ne grandit/rétrécit pas) */
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-dim);
  scroll-snap-align: start; /* Le scroll "s'accroche" au début de chaque vignette */
}
.portfolio-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.portfolio-thumb:hover img { transform: scale(1.06); }
.portfolio-caption {
  /* Légende qui apparaît au survol (nom de la réalisation), invisible par défaut */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(21,23,28,0.88) 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.portfolio-thumb:hover .portfolio-caption { opacity: 1; }
.portfolio-caption span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-light);
}

/* ---- Lightbox (agrandissement d'image) 100% CSS, sans JavaScript ----
   Astuce technique : chaque vignette est un lien <a href="#lb-xxx">. La
   div ci-dessous a id="lb-xxx" et reste display:none... SAUF quand son id
   correspond au #fragment actuel de l'URL (sélecteur CSS ":target").
   C'est purement une astuce CSS/HTML, aucune ligne de JS n'est nécessaire
   pour ouvrir/fermer ces lightbox d'images. */
.lightbox {
  display: none;             /* Caché par défaut */
  position: fixed;
  inset: 0;                  /* Couvre tout l'écran */
  background: rgba(15, 16, 20, 0.94);
  z-index: 999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 24px;
}
.lightbox:target { display: flex; } /* <-- la ligne magique qui affiche la lightbox ciblée par l'URL */
.lightbox img {
  max-width: min(90vw, 1000px);
  max-height: 75vh;
  border-radius: var(--radius);
  width: auto;
  margin: 0 auto;
}
.lightbox figcaption {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 18px;
  max-width: 600px;
  text-align: center;
}
.lightbox-close {
  /* Le bouton "×" en haut à droite, qui est en réalité un lien <a> qui
     renvoie vers l'ancre de la section (ex: #sites-web), ce qui fait
     perdre le focus ":target" à la lightbox et donc la referme */
  position: absolute;
  top: 28px;
  right: 32px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-decoration: none;
}
.lightbox-close:hover { border-color: var(--orange); color: var(--orange); }

/* ---- Vidéos : vignette cliquable, chargement différé via lightbox ----
   Contrairement aux images, une iframe YouTube se met à charger (et parfois
   même à jouer du son) dès qu'elle existe dans la page, MÊME si elle est
   cachée en display:none. Pour éviter que les 3 vidéos ne démarrent toutes
   en arrière-plan au chargement de la page, le <iframe> n'a PAS d'attribut
   src au départ (voir portfolio.php : src="" et data-src="..."). C'est
   uniquement le petit script dans assets/js/main.js qui copie data-src
   vers src au moment du clic sur la vignette — donc la vidéo ne charge
   vraiment qu'à ce moment-là, jamais avant. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--anthracite-soft);
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.video-thumb:hover img { transform: scale(1.05); }
.play-icon {
  /* Le rond avec le triangle ▶ centré sur la vignette */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(21,23,28,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.play-icon svg { width: 22px; height: 22px; margin-left: 2px; }
.video-thumb:hover .play-icon {
  background: var(--orange);
  border-color: var(--orange);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-caption {
  color: var(--text-dark-muted);
  font-size: 0.9rem;
  margin-top: 14px;
}

/* ---- Lecteur vidéo affiché dans la lightbox (une fois le clic effectué) ---- */
.lightbox-video {
  width: min(90vw, 900px);
  aspect-ratio: 16/9;
  position: relative;
}
.lightbox-video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
  border-radius: var(--radius);
}


/* ==========================================================================
   16. RESPONSIVE — bloc 2 (réglages mobile fins, regroupés par taille d'écran)
   ========================================================================== */
@media (max-width: 900px) {
  .video-grid { grid-template-columns: 1fr; } /* 3 vidéos -> empilées */
}
@media (max-width: 700px) {
  .bio-intro { grid-template-columns: 1fr; text-align: center; } /* Photo au-dessus du texte */
  .bio-photo { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 540px) {
  .portfolio-thumb { flex-basis: 200px; } /* Vignettes galerie un peu plus petites sur mobile */
  .mockup-grid { grid-template-columns: 1fr; } /* 2 colonnes -> 1 colonne sur mobile */
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; } /* Colonne infos au-dessus du formulaire */
}
@media (max-width: 540px) {
  .collab-grid { grid-template-columns: 1fr 1fr; }      /* Carrousel accueil : reste en 2 colonnes */
  .hero-meta { gap: 24px; }
  .collab-grid-full { grid-template-columns: 1fr; }     /* Page collaborations : 1 seule colonne sur mobile */
}