/* ============================================================
   CHARTE PARTAGÉE · Scale Aigency
   ------------------------------------------------------------
   CSS commun à TOUTES les pages du site public :
   index.html · portfolio.html · temoignages.html ·
   contact.html · projet-en-cours.html
   ------------------------------------------------------------
   ⚠️ Une seule source de vérité : modifier la charte ICI se
   répercute sur toutes les pages. Ne PAS dupliquer ces règles
   dans le <style> des pages (n'y garder que le CSS spécifique).
   (offre.html a sa propre feuille de style mais utilise désormais
    la même palette off-white : plus aucune teinte crème sur le site.)
   ============================================================ */

/* ============================================================
   1. VARIABLES : tout est centralisé ici pour faciliter les ajustements
   ============================================================ */
:root {
  /* --- POLICES ---
     DEUX familles seulement, appariées sur un axe de contraste (serif + sans).
     Ajouter une troisième police lit comme de l'indécision, pas comme de la richesse.
     L'emphase se fait TOUJOURS dans la même famille (italique ou graisse),
     jamais en injectant une autre police dans un titre. */
  --font-titre: 'Cormorant Garamond', Georgia, serif;    /* Grands titres, accroches */
  --font-sous-titre: 'Cormorant Garamond', Georgia, serif; /* Intros, citations : même famille que les titres */
  --font-corps: 'Hanken Grotesk', system-ui, sans-serif; /* Corps de texte */

  /* --- COULEURS (palette monochrome premium) ---
     Jamais de noir ni de blanc purs : les valeurs pures écrasent la profondeur.
     L'off-black et l'off-white gardent la matière tout en restant strictement monochromes. */
  --noir: #0A0A0A;
  --blanc: #FAFAFA;
  --gris-clair: #F2F2F2;
  --gris-moyen: #E8E8E8;
  --gris-bordure: #DDDDDD;
  --texte-attenue: #6B6B6B;   /* Texte secondaire sur fond clair (5,1:1 sur --blanc) */
  /* Plancher de contraste sur fond sombre : ne jamais descendre sous 0.55,
     en dessous le texte passe sous le seuil WCAG AA de 4,5:1. */
  --texte-sombre-attenue: rgba(255,255,255,0.55);

  /* --- ESPACEMENTS & RYTHME --- */
  --max-largeur: 1200px;
  --padding-section: clamp(64px, 12vw, 140px);
  --padding-lateral: clamp(20px, 5vw, 60px);
  --cible-tactile: 44px;       /* Minimum pour tout élément que l'on touche */
  --transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- RAYONS : trois valeurs, une par famille d'objet, jamais d'autre ---
     Contrôles (boutons, champs) = --rayon
     Cartes et blocs             = --rayon-carte
     Pastilles et badges         = --rayon-pastille (pleine rondeur) */
  --rayon: 2px;
  --rayon-carte: 14px;
  --rayon-pastille: 999px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-corps);
  font-weight: 300;
  color: var(--noir);
  background: var(--blanc);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* text-wrap: balance égalise la longueur des lignes d'un titre.
   Sans lui on obtient les coupures bancales du type « c'est le / vôtre. » */
h1, h2, h3 {
  font-family: var(--font-titre); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------
   FOCUS CLAVIER
   Un contour visible est obligatoire (WCAG 2.2). Par défaut il est
   sombre ; sur les sections à fond noir il passe en clair pour rester
   visible. :focus-visible n'apparaît qu'au clavier, jamais à la souris.
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}
.hero :focus-visible,
.cta-sombre :focus-visible,
footer :focus-visible,
nav.nav--hero:not(.compacte) :focus-visible {
  outline-color: var(--blanc);
}

/* ------------------------------------------------------------
   LIEN D'ÉVITEMENT
   Premier élément focusable de la page : permet de sauter la
   navigation au clavier. Invisible tant qu'il n'a pas le focus.
   ------------------------------------------------------------ */
.lien-evitement {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--noir); color: var(--blanc);
  padding: 14px 22px; border-radius: var(--rayon);
  font-family: var(--font-corps); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.lien-evitement:focus { left: 8px; }
/* La cible du lien d'évitement reçoit le focus par programme (tabindex="-1")
   sans afficher de contour sur un bloc entier. */
[tabindex="-1"]:focus { outline: none; }

.conteneur { width: 100%; max-width: var(--max-largeur); margin: 0 auto; padding: 0 var(--padding-lateral); }

/* Libellé de section (petit titre en capitales) */
.surtitre {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--texte-attenue);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.surtitre::before { content: ''; width: 28px; height: 1px; background: var(--noir); display: inline-block; }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-corps); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 32px; border: 1px solid var(--noir); border-radius: var(--rayon);
  cursor: pointer; transition: background var(--transition), color var(--transition), transform 0.2s ease;
  background: var(--noir); color: var(--blanc); white-space: nowrap;
}
.btn:hover { background: var(--blanc); color: var(--noir); }
.btn:active { transform: translateY(1px); }
.btn--ligne { background: transparent; color: var(--noir); }
.btn--ligne:hover { background: var(--noir); color: var(--blanc); }
.btn .fleche { transition: transform var(--transition); }
.btn:hover .fleche { transform: translateX(4px); }

/* ============================================================
   4. NAVIGATION
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--padding-lateral);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: background var(--transition), border-color var(--transition), padding var(--transition);
}
nav.compacte { border-bottom-color: var(--gris-bordure); padding-top: 12px; padding-bottom: 12px; }

/* Logo : emblème SVG (cadre + SA serif) + nom complet.
   Le SVG utilise currentColor : il prend la couleur du texte parent,
   donc la version blanche du footer est automatique (aucun fichier image). */
.logo { display: flex; align-items: center; gap: 14px; color: var(--noir); min-height: var(--cible-tactile); }
.logo__mark { height: 42px; width: 42px; display: block; flex-shrink: 0; }
.logo__nom { font-size: 13px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.logo__nom span { color: var(--texte-attenue); }

.nav__liens { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); }
.nav__liens a.lien { font-size: 13px; letter-spacing: 0.04em; position: relative; white-space: nowrap; transition: color var(--transition); }
.nav__liens a.lien::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--noir); transition: width var(--transition), background var(--transition);
}
.nav__liens a.lien:hover::after,
.nav__liens a.lien[aria-current="page"]::after { width: 100%; }
.nav__cta { font-size: 12px; padding: 11px 22px; }

/* Barre de liens rapides, visible uniquement sur mobile (voir @media plus bas).
   Rend Portfolio / Témoignages / Contact directement cliquables sous le logo,
   sans avoir à ouvrir le menu burger. */
.nav__quick { display: none; }

/* Menu burger (mobile). La zone tactile fait 44px, les trois barres restent fines :
   on agrandit la cible avec du padding, jamais en grossissant le dessin. */
.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  min-width: var(--cible-tactile); min-height: var(--cible-tactile); padding: 10px;
}
.burger span { width: 24px; height: 1.5px; background: var(--noir); transition: var(--transition); }
.burger.ouvert span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   Nav "au-dessus du hero" (page d'accueil uniquement) :
   transparente à texte blanc sur le hero noir, elle redevient
   la barre blanche standard dès que l'on scrolle (.compacte).
   Ajouter la classe .nav--hero sur le <nav> de la page.
   ------------------------------------------------------------ */
.nav--hero { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.nav--hero .logo, .nav--hero .logo__nom { color: var(--blanc); }
.nav--hero .logo__nom span { color: rgba(255,255,255,0.6); }
.nav--hero .nav__liens a.lien { color: var(--blanc); }
.nav--hero .nav__liens a.lien::after { background: var(--blanc); }
.nav--hero .burger span { background: var(--blanc); }
.nav--hero .nav__cta { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,0.5); }
.nav--hero .nav__cta:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

/* Retour à la barre blanche dès le scroll */
.nav--hero.compacte { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); }
.nav--hero.compacte .logo, .nav--hero.compacte .logo__nom { color: var(--noir); }
.nav--hero.compacte .logo__nom span { color: var(--texte-attenue); }
.nav--hero.compacte .nav__liens a.lien { color: var(--noir); }
.nav--hero.compacte .nav__liens a.lien::after { background: var(--noir); }
.nav--hero.compacte .burger span { background: var(--noir); }
.nav--hero.compacte .nav__cta { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.nav--hero.compacte .nav__cta:hover { background: var(--blanc); color: var(--noir); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--noir); color: var(--blanc); padding: 70px var(--padding-lateral) 36px; }
.footer__inner { max-width: var(--max-largeur); margin: 0 auto; }
.footer__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer__marque .logo { color: var(--blanc); }
.footer__marque .logo__nom { color: var(--blanc); }
/* Le « Aigency » du logo hérite sinon du gris de fond clair (#6B6B6B),
   soit 3,7:1 sur le noir du footer. On force la version claire. */
.footer__marque .logo__nom span { color: var(--texte-sombre-attenue); }
.footer__marque p { color: rgba(255,255,255,0.55); font-size: 14px; margin-top: 16px; max-width: 32ch; }
.footer__liens { display: flex; gap: 60px; flex-wrap: wrap; }
.footer__col h2 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-sombre-attenue); margin-bottom: 12px; font-family: var(--font-corps); font-weight: 500; }
/* Liens du footer : zone tactile de 44px obtenue par le padding vertical,
   la marge est réduite d'autant pour ne pas étirer le bloc inutilement. */
.footer__col a, .footer__col span {
  display: flex; align-items: center; min-height: var(--cible-tactile);
  font-size: 14px; color: rgba(255,255,255,0.8); transition: color var(--transition);
}
.footer__col a:hover { color: var(--blanc); }
.footer__bas { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding-top: 28px; font-size: 12px; color: var(--texte-sombre-attenue); }
/* Liens légaux du bas de page (mentions, CGV, confidentialité, CGU).
   Neutralise les styles hérités du sélecteur global « nav » (fixed, fond, blur…),
   car ce bloc utilise volontairement la balise <nav> pour la sémantique. */
.footer__legal {
  position: static; z-index: auto; padding: 0; border: none;
  background: none; backdrop-filter: none;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px 20px;
}
.footer__legal a {
  display: flex; align-items: center; min-height: var(--cible-tactile);
  color: var(--texte-sombre-attenue); font-size: 12px; transition: color var(--transition);
}
.footer__legal a:hover { color: var(--blanc); }

/* ============================================================
   ANIMATIONS AU SCROLL (légères, effet premium)
   ============================================================ */
/* ⚠️ RÈGLE STRUCTURELLE : le contenu est VISIBLE PAR DÉFAUT, l'animation l'enrichit.
   L'état masqué est conditionné à la classe .js posée sur <html> par le script en
   tête de page. Sans JavaScript (script bloqué, erreur, robot), rien n'est masqué
   et la page reste entièrement lisible. Ne jamais écrire « .reveal { opacity: 0 } »
   sans ce garde-fou : la page entière deviendrait blanche au moindre échec du JS. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--transition), transform 0.9s var(--transition); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal[data-delai="1"] { transition-delay: 0.08s; }
.js .reveal[data-delai="2"] { transition-delay: 0.16s; }
.js .reveal[data-delai="3"] { transition-delay: 0.24s; }

/* Respect des préférences d'accessibilité : pas d'animation si l'utilisateur le demande.
   Le sélecteur reprend « .js » pour garder la même spécificité que la règle ci-dessus,
   sinon il ne la surchargerait pas. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE · NAVIGATION (menu burger < 760px)
   Les règles responsive spécifiques à chaque page restent dans
   le <style> de la page concernée.
   ============================================================ */
@media (max-width: 760px) {
  .nav__liens { display: none; }
  .burger { display: flex; }

  /* La nav passe sur deux lignes : logo + burger, puis la barre de liens rapides. */
  nav { flex-wrap: wrap; }
  .nav__quick {
    display: flex; order: 3; flex-basis: 100%; width: 100%;
    justify-content: space-between; align-items: center;
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--gris-bordure);
  }
  /* Zone tactile de 44px : c'est le padding qui l'assure, le texte reste petit. */
  .nav__quick a {
    flex: 1; display: flex; align-items: center; justify-content: center;
    min-height: var(--cible-tactile); padding: 0 4px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--noir); transition: color var(--transition);
  }
  .nav__quick a + a { border-left: 1px solid var(--gris-bordure); }
  .nav__quick a[aria-current="page"] { font-weight: 700; }
  /* Sur le hero (nav transparente, texte blanc) */
  .nav--hero .nav__quick { border-top-color: rgba(255,255,255,0.2); }
  .nav--hero .nav__quick a { color: rgba(255,255,255,0.92); }
  .nav--hero .nav__quick a + a { border-left-color: rgba(255,255,255,0.2); }
  /* Barre redevenue blanche au scroll (.compacte) */
  .nav--hero.compacte .nav__quick { border-top-color: var(--gris-bordure); }
  .nav--hero.compacte .nav__quick a { color: var(--noir); }
  .nav--hero.compacte .nav__quick a + a { border-left-color: var(--gris-bordure); }
  /* Menu mobile déroulant */
  /* Dans le menu déroulant, chaque lien fait 44px de haut : c'est ici que les
     liens de navigation deviennent tactiles (la barre horizontale est masquée). */
  .nav__liens.mobile a.lien {
    display: flex; align-items: center; min-height: var(--cible-tactile); width: 100%;
  }
  .nav__liens.mobile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    position: fixed; top: 73px; left: 0; right: 0; background: var(--blanc);
    padding: 30px var(--padding-lateral) 40px; border-bottom: 1px solid var(--gris-bordure);
    transform: translateY(-120%); transition: transform var(--transition); z-index: 99;
  }
  .nav__liens.mobile.ouvert { transform: translateY(0); }
  .nav__liens.mobile .nav__cta { width: 100%; }
  /* Le menu déroulant a un fond blanc : ses liens restent sombres même
     quand la nav est en mode .nav--hero (texte blanc sur le hero). */
  .nav--hero .nav__liens.mobile a.lien { color: var(--noir); }
  .nav--hero .nav__liens.mobile a.lien::after { background: var(--noir); }
  .nav--hero .nav__liens.mobile .nav__cta { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
}

/* ============================================================
   PAGES LÉGALES (mentions légales · CGV · confidentialité · CGU)
   Colonne de lecture confortable, texte justifié avec césure FR.
   ============================================================ */
.legal { padding: 150px var(--padding-lateral) var(--padding-section); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__inner h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 500; margin-bottom: 10px; }
.legal__maj { display: block; color: var(--texte-attenue); font-size: 14px; margin-bottom: 50px; }
.legal__inner h2 {
  font-family: var(--font-titre); font-weight: 500;
  font-size: clamp(22px, 3.4vw, 30px); margin: 46px 0 16px;
}
.legal__inner h3 { font-family: var(--font-corps); font-weight: 600; font-size: 18px; margin: 28px 0 10px; }
.legal__inner p,
.legal__inner li {
  color: #262626; font-size: 17px; line-height: 1.8;
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}
.legal__inner p { margin-bottom: 16px; }
.legal__inner ul, .legal__inner ol { margin: 0 0 18px 22px; }
.legal__inner li { margin-bottom: 9px; text-align: left; }
.legal__inner a { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.legal__inner strong { font-weight: 600; color: var(--noir); }
.legal__inner hr { border: none; border-top: 1px solid var(--gris-bordure); margin: 40px 0; }
/* Champ à renseigner par l'éditeur (données légales exactes) */
.legal__todo {
  background: #FFF4D6; color: #6b4e00; font-weight: 500;
  padding: 1px 7px; border-radius: var(--rayon); hyphens: none;
}
/* Bloc récapitulatif (coordonnées, identité) */
.legal__bloc { background: var(--gris-clair); border-radius: var(--rayon-carte); padding: 22px 26px; margin: 8px 0 24px; }
.legal__bloc p { margin-bottom: 8px; text-align: left; }
.legal__bloc p:last-child { margin-bottom: 0; }

/* ============================================================
   CTA SOMBRE (bas de page)
   Section noire, texte centré, boutons inversés (blanc sur noir).
   Partagée par portfolio.html et temoignages.html. Chaque page peut
   ajouter une nuance dans son <style> (ex. une bordure haute).
   ============================================================ */
.cta-sombre { background: var(--noir); color: var(--blanc); padding: var(--padding-section) var(--padding-lateral); text-align: center; }
.cta-sombre__inner { max-width: 640px; margin: 0 auto; }
.cta-sombre h2 { color: var(--blanc); font-size: clamp(30px, 4.5vw, 52px); margin-bottom: 20px; }
.cta-sombre p { color: rgba(255,255,255,0.6); font-size: 16px; margin-bottom: 36px; }
.cta-sombre__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-sombre .btn { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.cta-sombre .btn:hover { background: transparent; color: var(--blanc); }