/* =========================================================================
   charte.css — Charte "subtle" appliquée à l'ensemble du site
   Version : v1.4 (22 avril 2026)
   =========================================================================

   POURQUOI CETTE RÉVISION v1.4 ?
   Le rendu v1.3 était globalement jugé trop flashy / trop contrasté /
   trop prétentieux. Cette révision calme l'ensemble pour obtenir un
   rendu plus subtil, plus élégant, tout en restant sharp et lisible :
     • Hovers ultra-subtils (brightness, scale, translateY)
     • Plus aucune manipulation de saturation
     • Gris des fonds et des tuiles rapprochés (moins de contraste brutal
       entre pages sombres et pages claires)
     • Liserés légers mais visibles, ombres discrètes
     • CTA overlay qui reste sombre (page dark) ou blanc (page light) au repos
     • Liserés noirs parasites autour des images blog supprimés
     • Équipe : une seule couleur d'accent au hover (orange dominant)

   ---------------------------------------------------------------------------
   HOW TO TUNE : tout est piloté par les variables CSS du bloc :root { ... }
   ci-dessous. Aucune valeur magique hardcodée ailleurs dans ce fichier.
   Changer une valeur → recharger la page.
   ========================================================================= */


/* =========================================================================
   ⚙️  CONFIG — TOUTES LES VALEURS AJUSTABLES EN UN SEUL ENDROIT
   ========================================================================= */
:root {

  /* ----- 4 GRIS (le plus impactant) ----- */
  --subtle-bg-dark:    #1d1e1c;             /* fond sombre body (home, services…)  | + clair que #171816 */
  --subtle-tile-dark:  rgba(38,39,36,0.90); /* tuiles au repos sur fond sombre      | + claires */
  --subtle-bg-light:   #e7e7e5;             /* fond clair des sections (blog…)      | + sombre que #f3f3f3 */
  --subtle-tile-light: #eeeeec;             /* tuiles/cards sur fond clair          | + sombres que #fff */

  /* ----- HOVER IMAGES — effets ultra-subtils ----- */
  --subtle-img-filter-rest:   brightness(0.94);  /* image au repos (légèrement calmée) */
  --subtle-img-filter-hover:  brightness(1);     /* image au hover (retour normal, +un poil de clarté) */
  --subtle-scale-hover:       1.005;             /* zoom images au hover */
  --subtle-scale-polaroid:    1.008;             /* zoom tilt-frame (polaroid manifesto) */
  --subtle-translate-hover:   -3px;              /* translateY cards (discret) */

  /* ----- HERO (photos principales) ----- */
  --subtle-hero-filter:       brightness(1.04) contrast(1.02); /* photo hero plus naturelle */

  /* ----- LISERÉS ----- */
  --subtle-border-dark:   rgba(255,255,255,0.12);  /* liseré cards sur fond sombre (FAQ incluse) */
  --subtle-border-light:  #d2d2d2;                  /* liseré cards sur fond clair */
  --subtle-border-width:  1.5px;

  /* ----- ACCENT ORANGE HOVER (cards services, portfolio…) ----- */
  --subtle-accent-border: rgba(255,128,62,0.14);  /* liseré orange au hover */
  --subtle-accent-shadow: rgba(255,128,62,0.04);  /* halo orange au hover */

  /* ----- CTA OVERLAY (sombre/clair au repos, léger reveal au hover) ----- */
  --subtle-cta-dark-rest:    0.82;   /* CTA sur page sombre : reste sombre au repos */
  --subtle-cta-dark-hover:   0.68;   /* reveal subtil au hover */
  --subtle-cta-light-rest:   0.94;   /* CTA sur page claire : reste blanc au repos */
  --subtle-cta-light-hover:  0.72;

  /* ----- AUTRES ACCENTS ----- */
  --subtle-sketch-opacity:  0.65;   /* trait orange sous titres (sketch-underline) */
  --subtle-card-glow:       0.05;   /* halo radial cards services hover (presque invisible) */
  --subtle-fig-label:       0.72;   /* opacité du Caveat orange "fig. XX" */
  --subtle-line-height:     1.75;   /* line-height des paragraphes */

  /* ----- NAV / FOOTER ----- */
  --subtle-nav-opacity:       0.82;
  --subtle-nav-scrolled:      0.88;
}


/* =========================================================================
   [A] LES 4 GRIS — fonds & tuiles (dark + light)
   ========================================================================= */

/* A1. Fond sombre body (home, services, équipe, MI, PE, GTM, réalisations) */
body {
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 13px, rgba(255,255,255,0.015) 13px, rgba(255,255,255,0.015) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(255,255,255,0.015) 13px, rgba(255,255,255,0.015) 14px),
    repeating-linear-gradient(0deg,  transparent, transparent 69px, rgba(255,255,255,0.04)  69px, rgba(255,255,255,0.04)  70px),
    repeating-linear-gradient(90deg, transparent, transparent 69px, rgba(255,255,255,0.04)  69px, rgba(255,255,255,0.04)  70px),
    var(--subtle-bg-dark) !important;
  background-attachment: fixed !important;
}

/* A2. Tuiles sur fond sombre (au repos) */
.sc, .tc, .pc, .fi, .adapt-box,
.gantt, .tilt-frame,
.frise-img-frame, .fg-frame,
.ext-card, .member-card,
.gallery-item, .album-item {
  background: var(--subtle-tile-dark) !important;
}

/* A3. Fond clair des sections (blog, contact, légal) */
.contact-section, .article, .article-carousel, .article-cta-form,
.article-gallery, .blog-main, .legal-page,
.contact-section ~ .cta-section, .blog-main ~ .cta-section {
  background:
    repeating-linear-gradient(0deg,  transparent, transparent 13px, rgba(0,0,0,0.0075) 13px, rgba(0,0,0,0.0075) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(0,0,0,0.0075) 13px, rgba(0,0,0,0.0075) 14px),
    repeating-linear-gradient(0deg,  transparent, transparent 69px, rgba(0,0,0,0.02)   69px, rgba(0,0,0,0.02)   70px),
    repeating-linear-gradient(90deg, transparent, transparent 69px, rgba(0,0,0,0.02)   69px, rgba(0,0,0,0.02)   70px),
    var(--subtle-bg-light) !important;
  background-attachment: fixed !important;
}

/* A4. Tuiles/cards sur fond clair */
.blog-card, .blog-featured,
.contact-detail, .contact-form-wrap,
.article blockquote, .article .blog-cta, .article .blog-phase,
.sidebar-box, .legal-intro, .legal-caveat {
  background: var(--subtle-tile-light) !important;
}
.contact-section ~ .cta-section .cta-box,
.blog-main ~ .cta-section .cta-box {
  background: url('../assets/images/shared/cta-gradient.jpg') center/140% no-repeat, var(--subtle-tile-light) !important;
}


/* =========================================================================
   [B] LISERÉS (BORDERS)
   ========================================================================= */

/* B1. Cards sur fond sombre — liseré visible mais subtil (inclut FAQ .fi) */
.sc, .tc, .pc, .fi, .adapt-box,
.tilt-frame, .frise-img-frame, .fg-frame,
.ext-card, .member-card,
.gantt {
  border: var(--subtle-border-width) solid var(--subtle-border-dark) !important;
}

/* B2. Cards sur fond clair */
.blog-card, .blog-featured {
  border: var(--subtle-border-width) solid var(--subtle-border-light) !important;
}
.contact-detail, .contact-form-wrap {
  border: var(--subtle-border-width) solid var(--subtle-border-light) !important;
}

/* B3. Gallery items (blog article) — liseré noir SUPPRIMÉ au repos */
.gallery-item, .album-item {
  border: var(--subtle-border-width) solid transparent !important;
}


/* =========================================================================
   [C] IMAGES : filtre repos (sans saturate) + suppression ombres noires
   ========================================================================= */

/* C1. Images des tuiles au repos — juste un poil calmées, PAS de saturate */
.pc-img img,
.project-tile .pt-img-wrap img,
.blog-card-img img,
.blog-featured-img img,
.sc-img img, .sc-photo img,
.gallery-item img, .album-item img,
.frise-img-frame img, .fg-frame img,
.tilt-frame img, .member-photo img {
  filter: var(--subtle-img-filter-rest);
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
              filter 0.45s ease !important;
}

/* C2. Suppression des liserés noirs autour des images du corps blog
       Les box-shadow courtes de blog.css créaient un halo sombre en bas */
.blog-img-full img,
.blog-img-grid img,
.blog-img-grid > div img,
.gallery-item img,
.album-item img {
  box-shadow: none !important;
  border: none !important;
}

/* C3. Hero image d'article : ombre ultra-diffuse */
.article-hero-img img {
  box-shadow: 0 16px 48px rgba(0,0,0,0.04) !important;
  border: none !important;
}

/* C4. Photos des heros (hero-svc, hero-wide…) — filter plus naturel */
.hs-img, .hw-img, .hr-img, .ht-img {
  filter: var(--subtle-hero-filter) !important;
}


/* =========================================================================
   [D] HOVERS — effets quasi imperceptibles (v3)
   ========================================================================= */

/* D1. Brightness au hover (juste un poil de clarté, pas de saturate) */
.sc:hover .sc-img img,
.sc:hover .sc-photo img,
.sc-orange:hover .sc-photo img,
.pc:hover .pc-img img,
.blog-featured:hover .blog-featured-img img,
.blog-card:hover .blog-card-img img,
.project-tile:hover .pt-img-wrap img,
.fg-card:hover .fg-frame img,
.frise-img-frame:hover img,
.patent-thumb:hover img,
.gallery-item:hover img,
.album-item:hover img,
.member-card:hover .member-photo img,
.tilt-frame:hover img {
  filter: var(--subtle-img-filter-hover) !important;
}

/* D2. Scale au hover — quasi invisible */
.sc:hover .sc-img img,
.sc:hover .sc-photo img,
.pc:hover .pc-img img,
.blog-featured:hover .blog-featured-img img,
.blog-card:hover .blog-card-img img,
.project-tile:hover .pt-img-wrap img,
.fg-card:hover .fg-frame img,
.frise-img-frame:hover img,
.patent-thumb:hover img,
.gallery-item:hover img,
.album-item:hover img,
.member-card:hover .member-photo img {
  transform: scale(var(--subtle-scale-hover)) !important;
}
.tilt-frame:hover img { transform: scale(var(--subtle-scale-polaroid)) !important; }
.sc-orange:hover .sc-photo img { transform: scaleX(-1) scale(var(--subtle-scale-hover)) !important; }

/* D3. Brightness des wrappers au hover (tilt, frise, project-tile, etc.) */
.tilt-frame:hover,
.frise-img-frame:hover,
.gallery-item:hover,
.album-item:hover,
.member-card:hover,
.project-tile:hover,
.ext-card:hover,
.fg-card:hover .fg-frame {
  filter: var(--subtle-img-filter-hover) !important;
}

/* D4. TranslateY au hover (cards bondissent à peine) */
.blog-card:hover,
.member-card:hover,
.project-tile:hover {
  transform: translateY(var(--subtle-translate-hover)) !important;
}
.ext-card:hover,
.frise-img-frame:hover,
.fg-card:hover {
  transform: translateY(calc(var(--subtle-translate-hover) * 0.7)) !important;
}


/* =========================================================================
   [E] ACCENTS ORANGE HOVER (cards services, portfolio, blog, réalisations…)
   ========================================================================= */

/* E1. Cards Services (3 couleurs — on garde leurs teintes respectives) */
.sc-orange:hover { border-color: rgba(255,128,62,0.14) !important; box-shadow: 0 2px 16px rgba(255,128,62,0.04) !important; }
.sc-blue:hover   { border-color: rgba(21,168,254,0.14) !important; box-shadow: 0 2px 16px rgba(21,168,254,0.04) !important; }
.sc-green:hover  { border-color: rgba(104,232,141,0.14) !important; box-shadow: 0 2px 16px rgba(104,232,141,0.04) !important; }
.sc:hover .sc-tag { border-color: currentColor; opacity: 0.80; }

/* E2. Cards secondaires (orange uniquement) */
.pc:hover,
.project-tile:hover,
.blog-card:hover,
.tilt-frame:hover,
.frise-img-frame:hover,
.fg-card:hover .fg-frame,
.gallery-item:hover,
.album-item:hover {
  border-color: var(--subtle-accent-border) !important;
}
.pc:hover,
.project-tile:hover,
.blog-card:hover,
.gallery-item:hover,
.album-item:hover {
  box-shadow: 0 3px 16px var(--subtle-accent-shadow), 0 1px 8px rgba(0,0,0,0.05) !important;
}
.tilt-frame:hover,
.frise-img-frame:hover,
.fg-card:hover .fg-frame {
  box-shadow: 0 2px 12px var(--subtle-accent-shadow) !important;
}


/* =========================================================================
   [E-bis] ÉQUIPE — une seule couleur d'accent (orange), pas de multi-couleur
   Règle explicite v1.4 : le multi-couleur par membre n'a pas de sens,
   on uniformise sur l'orange dominant.
   ========================================================================= */

/* Override des rôles multicolores par membre */
.member-card:nth-child(1) .member-role,
.member-card:nth-child(2) .member-role,
.member-card:nth-child(3) .member-role,
.member-card:nth-child(4) .member-role,
.member-card:nth-child(5) .member-role,
.member-card:nth-child(6) .member-role,
.member-card:nth-child(7) .member-role,
.member-card:nth-child(8) .member-role {
  color: var(--orange) !important;
}

/* Override des halos multicolores (--mc-glow) par membre */
.member-card:nth-child(1),
.member-card:nth-child(2),
.member-card:nth-child(3),
.member-card:nth-child(4),
.member-card:nth-child(5),
.member-card:nth-child(6),
.member-card:nth-child(7),
.member-card:nth-child(8) {
  --mc-glow: var(--orange) !important;
}

/* Hover member-card : uniformisé orange (remplace le border blanc 0.12 de member) */
.member-card:hover {
  border-color: var(--subtle-accent-border) !important;
  box-shadow: 0 3px 14px var(--subtle-accent-shadow), 0 1px 8px rgba(0,0,0,0.10) !important;
}


/* =========================================================================
   [F] CTA GRADIENT — opacité de l'overlay
   ========================================================================= */

/* F1. CTA sur page sombre — reste sombre au repos */
.cta-box::before        { opacity: var(--subtle-cta-dark-rest) !important; }
.cta-box:hover::before  { opacity: var(--subtle-cta-dark-hover) !important; }

/* F2. CTA sur page claire — reste très blanc au repos */
.contact-section ~ .cta-section .cta-box::before,
.blog-main ~ .cta-section .cta-box::before        { opacity: var(--subtle-cta-light-rest) !important; }
.contact-section ~ .cta-section .cta-box:hover::before,
.blog-main ~ .cta-section .cta-box:hover::before  { opacity: var(--subtle-cta-light-hover) !important; }


/* =========================================================================
   [G] AUTRES AJUSTEMENTS — sketch, glow, fig-label, line-height
   ========================================================================= */

.sketch-underline::after { opacity: var(--subtle-sketch-opacity) !important; }
.sc:hover .card-glow     { opacity: var(--subtle-card-glow) !important; }
.tc:hover .card-glow-t   { opacity: var(--subtle-card-glow) !important; }
.fig-label               { color: rgba(255,128,62, var(--subtle-fig-label)) !important; }

.manifesto-text, .manifesto-aside,
.sc p, .pc p, .fi p, .tc p,
.article-body p, .blog-excerpt,
.blog-card-excerpt, .legal-body p,
.contact-form-wrap p, .adapt-box p,
.fg-body p, .faq p, .faq .fa-inner {
  line-height: var(--subtle-line-height) !important;
}


/* =========================================================================
   [H] HERO OVERLAY GRADIENT — un poil moins opaque
   ========================================================================= */
.hs-ov, .hw-ov {
  background:
    linear-gradient(to top,   rgba(23,24,22,0.88) 0%, rgba(23,24,22,0.45) 35%, rgba(23,24,22,0.04) 60%, transparent 100%),
    linear-gradient(to right, rgba(23,24,22,0.80) 0%, rgba(23,24,22,0.48) 35%, transparent 60%) !important;
}


/* =========================================================================
   [I] NAV + FOOTER — un poil plus transparents
   ========================================================================= */
nav          { background: rgba(23,24,22, var(--subtle-nav-opacity))  !important; }
nav.scrolled { background: rgba(23,24,22, var(--subtle-nav-scrolled)) !important; }
footer {
  background:
    linear-gradient(to bottom, rgba(23,24,22, var(--subtle-nav-opacity)), rgba(23,24,22, 0.92)),
    transparent !important;
}


/* =========================================================================
   [J] TRANSITIONS — plus fluides (cubic-bezier uniforme)
   ========================================================================= */
.sc, .pc, .tc, .fi, .tilt-frame,
.blog-card, .blog-featured, .member-card, .ext-card,
.project-tile, .frise-img-frame, .fg-card, .fg-frame,
.gallery-item, .album-item,
.contact-detail, .contact-form-wrap,
.cta-box, .btn, .btn-primary, .btn-outline,
.nav-links a, .footer-col a {
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  transition-duration: 0.5s !important;
}


/* =========================================================================
   FIN. Pour modifier une valeur : :root { … } en haut de ce fichier.
   ========================================================================= */