/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Geist","arguments":[{"variable":"--font-geist","subsets":["latin"],"display":"swap"}],"variableName":"geist"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Fallback';src: local("Arial");ascent-override: 95.94%;descent-override: 28.16%;line-gap-override: 0.00%;size-adjust: 104.76%
}.__className_246ccd {font-family: 'Geist', 'Geist Fallback';font-style: normal
}.__variable_246ccd {--font-geist: 'Geist', 'Geist Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Geist_Mono","arguments":[{"variable":"--font-geist-mono","subsets":["latin"],"display":"swap"}],"variableName":"geistMono"} ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/d100b2a099e34044-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/2c34d62a75506231-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/0f1bdadaf30e2d5f-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/a115172161b307bb-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/601f5c280d60caca-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/f5271587012faf78-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Mono Fallback';src: local("Arial");ascent-override: 74.67%;descent-override: 21.92%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_4c40f6 {font-family: 'Geist Mono', 'Geist Mono Fallback';font-style: normal
}.__variable_4c40f6 {--font-geist-mono: 'Geist Mono', 'Geist Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Newsreader","arguments":[{"variable":"--font-newsreader","subsets":["latin"],"weight":["300","400"],"style":["normal","italic"],"display":"swap"}],"variableName":"newsreader"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Newsreader Fallback';src: local("Times New Roman");ascent-override: 69.68%;descent-override: 25.12%;line-gap-override: 0.00%;size-adjust: 105.48%
}.__className_5d18a7 {font-family: 'Newsreader', 'Newsreader Fallback'
}.__variable_5d18a7 {--font-newsreader: 'Newsreader', 'Newsreader Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/*
 * globals.css — Feuille de styles globale de la vitrine IDNOUVELLE
 *
 * Organisation :
 *  1. TOKENS      → variables CSS réutilisées partout (couleurs, polices, tailles)
 *  2. BASE        → reset et styles fondamentaux (body, liens, sélection…)
 *  3. NAV         → barre de navigation fixe en haut
 *  4. HERO        → section plein écran d'accueil
 *  5. STACK       → effet superposition des sections au scroll (desktop)
 *  6. MANIFESTE   → section "Approche"
 *  7. SECTION     → styles communs à toutes les sections (produits, équipe…)
 *  8. PRODUITS    → grille et cartes produits
 *  9. EQUIPE      → grille membres de l'équipe
 * 10. TEASER      → bloc fondateur sur la page d'accueil
 * 11. CONTACT     → section contact
 * 12. FOOTER      → pied de page fixe en bas
 * 13. SCROLL REVEAL → animation d'apparition au scroll
 * 14. FONDATEUR   → styles spécifiques à la page /fondateur
 */

/* ================================================================
   1. TOKENS — Variables CSS globales
   ─────────────────────────────────────────────────────────────────
   Toutes les couleurs, polices et dimensions du design system.
   Modifier une valeur ici la propage partout dans le site.

   Couleurs :
     --orange      → couleur d'accentuation principale (CTA, emphases)
     --orange-soft → version pastel de l'orange (fonds légers)
     --navy        → bleu profond (textes em en italique dans le hero)
     --paper       → fond crème de la page (blanc cassé chaud)
     --paper-2     → version légèrement plus foncée pour les fonds de cartes
     --ink         → quasi-noir pour le texte principal
     --ink-2       → gris foncé pour les textes secondaires
     --muted       → gris moyen pour les labels et placeholders
     --line        → bordure très subtile (7% opacité)
     --line-strong → bordure un peu plus visible (12% opacité)

   Polices (injectées par Next.js depuis layout.tsx) :
     --sans  → Geist (titres, corps)
     --mono  → Geist Mono (labels, eyebrows, pills, numéros)
     --serif → Newsreader italic (emphases poétiques)

   Dimensions :
     --section-y → padding vertical des sections, fluide entre 72px et 130px
     --nav-h     → hauteur de la nav (68px desktop, 60px mobile)
     --footer-h  → hauteur du footer fixe (52px)
   ================================================================ */
:root {
  --orange: #E07B30;
  --orange-on-light: #A54E12; /* orange plus foncé pour fond clair — WCAG AA 4.9:1 sur paper */
  --orange-soft: #F4D5BC;
  --navy: #1B4F8A;
  --paper: #F7F4EE;
  --paper-2: #EFEAE0;
  --ink: #14141A;
  --ink-2: #3A3A42;
  --muted: #6E6E78;
  --line: rgba(20,20,26,0.07);
  --line-strong: rgba(20,20,26,0.12);
  --sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
  --mono: var(--font-geist-mono), ui-monospace, monospace;
  --serif: var(--font-newsreader), ui-serif, Georgia, serif;
  --section-y: clamp(72px, 9vw, 130px); /* clamp(min, fluide, max) = taille responsive sans media query */
  --nav-h: 68px;
  --footer-h: 52px;
}
/* Sur mobile, la nav est un peu plus compacte */
@media (max-width: 720px) { :root { --nav-h: 60px; } }

/*
 * Le footer est en position: fixed → il ne prend plus de place dans le flux.
 * Sans ce padding-bottom, le bas du dernier contenu passerait derrière le footer.
 */
body { padding-bottom: var(--footer-h); }

/* ================================================================
   2. BASE — Reset et fondations
   ─────────────────────────────────────────────────────────────────
   box-sizing: border-box  → le padding ne s'ajoute plus à la largeur,
                              il est inclus dedans (comportement intuitif)
   scroll-behavior: smooth → les liens anchor (#section) scrollent en douceur
   antialiased             → rendu des polices plus fin sur macOS/Chrome
   overflow-x: hidden      → empêche le scroll horizontal accidentel
   ::selection             → couleur orange quand on sélectionne du texte
   .wrap                   → conteneur centré, max 1280px, padding fluide
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/*
 * overflow-x: clip (et non hidden) — important pour le footer fixe !
 * 'overflow: hidden' sur body crée un containing block pour position:fixed
 * dans certains navigateurs mobiles → le footer fixe se comporte comme un
 * élément absolu et défile avec la page. 'clip' produit le même effet visuel
 * (coupe les débordements horizontaux) sans cet effet de bord.
 */
body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: -0.005em; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--orange); color: #fff; }
/* Conteneur centré utilisé dans toutes les sections pour limiter la largeur */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); width: 100%; }

/* ================================================================
   3. NAV — Barre de navigation
   ─────────────────────────────────────────────────────────────────
   position: fixed → collée en haut, hors du flux de la page
   z-index: 100    → au-dessus de tout (sections z-index 2-6, footer 100)
   backdrop-filter → effet verre dépoli sur le fond (flou + légère transparence)
   background 72%  → semi-transparent par défaut

   Classe .scrolled (ajoutée par NavClient.tsx dès 8px de scroll) :
     → fond plus opaque (95%) + bordure basse visible
     → donne l'impression que la nav "se pose" sur le contenu
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(247,244,238,0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
/* État après scroll : fond plus opaque + bordure apparente */
.nav.scrolled { border-bottom-color: var(--line-strong); background: rgba(247,244,238,0.95); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }

.logo { display: flex; align-items: center; gap: 10px; }
.logo-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.logo img { height: 56px; width: auto; display: block; }
.logo-aster { font-family: var(--serif); font-style: italic; font-weight: 400; color: rgba(247,244,238,0.7); font-size: 11px; letter-spacing: 0.04em; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 13.5px; color: var(--muted); transition: color .2s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--orange); }
.nav-links a.nav-cta { font-size: 13px; padding: 8px 18px; background: var(--ink); color: #fff; border-radius: 999px; transition: background .2s, color .2s; margin-left: 4px; }
.nav-links a.nav-cta:hover { background: var(--orange); color: var(--ink); }
.nav-links a.nav-cta.active::after { display: none; }

.nav-mobile-toggle { display: none; }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-mobile-toggle {
    display: flex; flex-direction: column; gap: 5px;
    padding: 8px; border-radius: 6px;
  }
  .nav-mobile-toggle span { width: 22px; height: 1.5px; background: var(--ink); display: block; transition: transform .3s, opacity .3s; }
  .nav.menu-open .nav-mobile-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav-mobile-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-mobile-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-mobile-panel { display: none; flex-direction: column; border-top: 1px solid var(--line); padding: 8px 0 16px; }
  .nav.menu-open .nav-mobile-panel { display: flex; }
  .nav-mobile-panel a { padding: 14px 0; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav-mobile-panel a:last-child { border-bottom: none; }
}
@media (min-width: 721px) { .nav-mobile-panel { display: none !important; } }

/* ================================================================
   4. HERO — Section d'accueil plein écran
   ─────────────────────────────────────────────────────────────────
   height: 100svh    → plein écran. 'svh' = Small Viewport Height, tient
                       compte de la barre du navigateur sur mobile (plus
                       fiable que 100vh sur iOS).
   min-height: 580px → plancher pour les très petits écrans

   Les deux .hero-ring sont des cercles décoratifs positionnés au centre
   de la section. HeroParallaxClient.tsx les fait bouger à des vitesses
   différentes au scroll pour créer un effet de profondeur.

   .hero-scroll → indicateur animé "scroll" en bas au centre.
                  Masqué sur mobile petit (<480px) et écrans courts (<680px).
   ================================================================ */
.hero {
  padding-top: var(--nav-h);
  height: 100svh;
  min-height: 580px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-ring {
  position: absolute;
  border-radius: 50%;
  left: 50%; top: 50%;
  pointer-events: none;
  will-change: transform;
}
.hero-ring-1 {
  width: clamp(380px, 82vw, 1060px);
  height: clamp(380px, 82vw, 1060px);
  border: 1px solid rgba(224,123,48,0.08);
  transform: translate(-50%, -50%);
  z-index: 0;
}
.hero-ring-2 {
  width: clamp(220px, 48vw, 640px);
  height: clamp(220px, 48vw, 640px);
  border: 1px solid rgba(27,79,138,0.09);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.hero > .wrap { position: relative; z-index: 2; }
.hero-text { max-width: 740px; }

.hero-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.hero-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--muted); flex-shrink: 0; }

.hero h1 {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.06;
  letter-spacing: -0.033em; color: var(--ink);
  margin-bottom: 24px; max-width: 18ch; text-wrap: pretty;
}
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--navy); }

.hero-lede {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; color: var(--ink-2);
  max-width: 50ch; text-wrap: pretty; margin-bottom: 36px;
}

.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background .25s, transform .2s;
}
.btn-primary:hover { background: var(--orange); transform: translateY(-2px); }
.btn-primary svg { transition: transform .25s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 0; font-size: 14px; color: var(--ink-2);
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--orange); border-color: var(--orange); }

.hero-scroll {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); z-index: 2; white-space: nowrap;
}
.hero-scroll-mouse {
  width: 20px; height: 32px; border: 1.5px solid currentColor;
  border-radius: 10px; display: flex; justify-content: center; padding-top: 5px;
}
.hero-scroll-dot {
  width: 3px; height: 7px; background: currentColor; border-radius: 2px;
  animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(6px); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-dot { animation: none; } }
@media (max-height: 680px), (max-width: 480px) { .hero-scroll { display: none; } }

/* ================================================================
   5. STACK — Effet de superposition des sections au scroll
   ─────────────────────────────────────────────────────────────────
   Principe : chaque section est sticky (collée en haut) et a un
   z-index croissant (2, 3, 4…). Quand on scrolle, la section suivante
   glisse par dessus la précédente — comme des cartes qu'on empile.

   position: sticky + top: 0 → la section reste visible en haut
                                tant qu'elle est dans son conteneur parent
   border-radius 20px         → coins arrondis en haut pour un effet "carte"
   box-shadow                 → ombre légère qui donne de la profondeur

   ⚠️  Sur mobile ce système ne fonctionne pas correctement :
   les sections hautes (contenu qui dépasse 100svh) masquent du contenu
   et le scroll devient désagréable. On désactive donc l'effet < 720px.
   ================================================================ */
.stack {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 36px rgba(20,20,26,0.07), 0 -1px 0 rgba(20,20,26,0.06);
}
/*
 * ─── MOBILE : stack effect désactivé ───────────────────────────────────────
 *
 * Pourquoi on ne peut PAS garder le sticky sur mobile :
 *
 * `position: sticky` "colle" la section en haut du viewport. Quand une section
 * est plus haute que l'écran (ex : produits empilés = ~200svh sur mobile), le
 * navigateur affiche TOUJOURS le haut de la section — le bas est inaccessible.
 * On ne peut pas scroller "à l'intérieur" d'un élément sticky.
 *
 * Résultat : soit du contenu masqué, soit du "scroll dans le vide" selon la
 * hauteur de la section. Il n'existe pas de solution CSS pure qui permette à
 * la fois l'effet de couverture ET le scroll libre du contenu sur mobile.
 *
 * Solution : scroll normal sur mobile (position: static), l'effet stack reste
 * uniquement sur desktop (>720px). Le parallax des cercles hero est géré
 * séparément par HeroParallaxClient.tsx et reste actif sur mobile.
 */
@media (max-width: 720px) {
  .stack {
    position: static;   /* sections dans le flux normal, pas de couverture */
    border-radius: 0;
    box-shadow: none;
  }
}

/* ================================================================
   6. MANIFESTE — Section "Approche" (3 piliers)
   ─────────────────────────────────────────────────────────────────
   min-height: calc(100svh - nav-h - footer-h) → desktop : hauteur = espace
                        VISIBLE entre la nav fixe (68px) et le footer fixe (52px).
                        Les deux barres sont fixes et couvrent le viewport :
                        la section doit donc exclure les deux pour ne rien cacher.
                        Sur mobile ce min-height est retiré (voir media query
                        en bas de section) pour éviter de scroller dans le vide.
   .manifeste-grid    → grille 3 colonnes séparées par des bordures CSS.
                        Astuce : background sur la grille = couleur de bordure,
                        gap: 1px = les bordures "entre" les cellules.
   ================================================================ */
.manifeste {
  padding: var(--section-y) 0;
  min-height: calc(100svh - var(--footer-h));
  display: flex;
  align-items: center;
}
.manifeste > .wrap { padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(16px, 2vw, 32px); }
/*
 * Mobile : la section fait exactement la hauteur de son contenu.
 * Sans ça, la section était forcée à 100svh même si le contenu était plus court
 * → l'utilisateur scrollait dans du vide avant que la section suivante arrive.
 * L'effet de couverture (sticky) est CONSERVÉ, seule la hauteur change.
 */
@media (max-width: 720px) { .manifeste { min-height: auto; } }

.manifeste-head { margin-bottom: 48px; }
.manifeste-head .section-eyebrow { margin-bottom: 14px; }
.manifeste-head .section-eyebrow .num { color: var(--orange-on-light); }
.manifeste-head .section-title { max-width: 60ch; }
.manifeste-head .section-title em { color: var(--orange-on-light); }

.manifeste-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 900px) { .manifeste-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .manifeste-grid { grid-template-columns: 1fr; } }

.manifeste-item { padding: 36px 32px; background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 640px) { .manifeste-item { padding: 28px 22px; } }
.manifeste-num { font-family: var(--mono); font-size: 11px; color: var(--orange-on-light); letter-spacing: 0.05em; text-transform: uppercase; }
.manifeste-icon { color: var(--navy); }
.manifeste-title { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.manifeste-desc { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ================================================================
   7. SECTION — Styles communs à toutes les sections de contenu
   ─────────────────────────────────────────────────────────────────
   Utilisé par : Produits, Équipe, À propos, Contact.

   .section-head    → grille 2 colonnes : eyebrow à gauche, titre à droite
   .section-eyebrow → label mono uppercase avec numéro de section en orange
   .section-title   → grand titre avec emphase italique serif en orange

   clamp(26px, 3.6vw, 48px) = taille fluide :
     26px minimum (mobile), 3.6% de la largeur viewport (fluide), 48px max
   ================================================================ */
.section {
  padding: var(--section-y) 0;
  min-height: calc(100svh - var(--footer-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section .wrap { padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(16px, 2vw, 32px); }
/* Même logique que .manifeste : hauteur = contenu sur mobile */
@media (max-width: 720px) { .section { min-height: auto; } }

.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; margin-bottom: 60px; align-items: end; }
@media (max-width: 840px) { .section-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; } }
@media (max-width: 480px) { .section-head { margin-bottom: 32px; } }

.section-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.section-eyebrow .num { color: var(--orange); margin-right: 12px; font-weight: 700; font-size: 13px; }
.section-title { font-family: var(--sans); font-weight: 400; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.09; letter-spacing: -0.025em; text-wrap: pretty; }
.section-title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--orange); }

/* ================================================================
   8. PRODUITS — Grille et cartes produits
   ─────────────────────────────────────────────────────────────────
   .products-grid → 3 colonnes desktop, 2 tablette, 1 mobile

   .product        → base de toutes les cartes (fond, bordure, arrondi)
   .product.featured → carte active : fond blanc, ombre, dot pulsant orange
   .product.coming   → carte à venir : fond transparent, bordure pointillée

   .product-tag .dot → petit cercle de statut à gauche du label
     → sur .featured : orange avec animation de pulsation (dot-pulse)
     → ailleurs : gris

   .product-visual → zone image/placeholder en ratio 16/10
     → fond à motif diagonal (repeating-linear-gradient) + classe optionnelle
     → .inov = dégradé chaud (beige → lin) pour la carte I-NOV

   .pill → tag arrondi en bas de carte, style mono uppercase
   ================================================================ */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .products-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .products-grid { grid-template-columns: 1fr; gap: 14px; } }

.product {
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: #FBF9F4; padding: 22px;
  display: flex; flex-direction: column;
  min-height: 440px;
  transition: transform .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
}
@media (max-width: 560px) { .product { min-height: auto; } }
.product:hover { transform: translateY(-4px); border-color: rgba(20,20,26,0.18); }
.product.featured { background: #fff; border-color: rgba(20,20,26,0.12); box-shadow: 0 2px 24px rgba(20,20,26,0.06); }
.product.coming { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.product.coming:hover { transform: none; }

.product-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.product-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.product.featured .product-tag .dot {
  background: var(--orange);
  position: relative;
  overflow: visible;
}
.product.featured .product-tag .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(224,123,48,0.35);
  animation: dot-pulse 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.product.featured .product-tag { color: var(--orange); }
@keyframes dot-pulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(2.2); opacity: 0; }
}

.product-visual {
  border: 1px solid var(--line); border-radius: 10px;
  background: repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(20,20,26,0.04) 8px, rgba(20,20,26,0.04) 9px), var(--paper-2);
  aspect-ratio: 16/8; margin-bottom: 20px;
  position: relative; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.product-visual.inov {
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(27,79,138,0.04) 8px, rgba(27,79,138,0.04) 9px),
    linear-gradient(160deg, #FBF7F0 0%, #EDE4D0 100%);
}
.product-visual-logo { width: 88%; height: auto; display: block; object-fit: contain; }
.product-visual-byline { position: absolute; top: 10px; left: 10px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 11px; color: var(--ink-2); display: flex; align-items: baseline; gap: 4px; z-index: 2; }
.product-visual-byline .aster { color: var(--orange); font-size: 13px; }
.product-visual-glyph { font-family: var(--sans); font-weight: 500; font-size: clamp(40px, 5vw, 52px); line-height: 1; color: var(--navy); letter-spacing: -0.04em; opacity: 0.25; }

.product h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product h3 .sub-name { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.product p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; flex-grow: 1; }
.product-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); }
.product.coming h3 { color: var(--muted); }
.product.coming p { color: var(--muted); }

/* ================================================================
   9. EQUIPE — Grille membres de l'équipe
   ─────────────────────────────────────────────────────────────────
   Section masquée si TEAM = [] dans lib/data.ts (voir page.tsx).
   auto-fill + minmax(200px, 1fr) → nombre de colonnes auto selon la largeur.
   .team-initials → avatar carré avec initiales en italic serif
   ================================================================ */
.equipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
@media (max-width: 480px) { .equipe-grid { grid-template-columns: 1fr 1fr; } }

.team-card {
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: #fff; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: transform .3s, border-color .3s;
}
.team-card:hover { transform: translateY(-3px); border-color: rgba(20,20,26,0.18); }
.team-initials {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 300;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.team-name { font-size: 15px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.team-role { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); }
.team-bio { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.team-link { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); transition: color .2s; margin-top: auto; }
.team-link:hover { color: var(--orange); }

/* ================================================================
   10. TEASER FONDATEUR — Bloc de renvoi vers /fondateur (page accueil)
   ─────────────────────────────────────────────────────────────────
   Grille 2 colonnes : texte à gauche, lien CTA à droite.
   .teaser-cta → lien souligné avec animation de gap au hover (l'espace
                 entre le texte et la flèche s'agrandit).
   ================================================================ */
.teaser-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
  align-items: center; border-top: 1px solid var(--line-strong); padding-top: 44px;
}
@media (max-width: 840px) { .teaser-row { grid-template-columns: 1fr; gap: 24px; } }
.teaser-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.teaser-lede strong { font-weight: 500; color: var(--ink); }
.teaser-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 5px;
  justify-self: start; transition: color .2s, border-color .2s, gap .2s;
}
.teaser-cta:hover { color: var(--orange); border-color: var(--orange); gap: 14px; }

/* ================================================================
   11. CONTACT — Section de contact
   ─────────────────────────────────────────────────────────────────
   .contact-grid      → 2 colonnes : texte gauche, liste liens droite
   .contact-list      → liste de lignes (email, linkedin, localisation…)
   .contact-row       → grille 3 colonnes : label | valeur | flèche
     → sur <a> : hover décale le row vers la droite (padding-left)
                 et colore la flèche en orange
   .contact-honest    → bloc citation bas de section (fond de l'honnêteté ^^)
   ================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
@media (max-width: 840px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-col-left .section-eyebrow { margin-bottom: 18px; }
.contact-headline { font-family: var(--sans); font-weight: 400; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: pretty; }
.contact-headline em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--orange); }
.contact-note { margin-top: 22px; font-size: 14px; color: var(--muted); line-height: 1.5; }

.contact-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.contact-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-strong);
  align-items: center;
  transition: padding-left .25s;
}
@media (max-width: 480px) {
  .contact-row { grid-template-columns: auto 1fr auto; gap: 10px; }
  .contact-row-label { font-size: 9.5px; }
}
a.contact-row:hover { padding-left: 10px; }
a.contact-row:hover .contact-row-arrow { transform: translateX(4px); color: var(--orange); }
.contact-row-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.contact-row-value { font-size: 15px; color: var(--ink); }
@media (max-width: 480px) { .contact-row-value { font-size: 13.5px; word-break: break-all; } }
.contact-row-aside { font-family: var(--mono); font-size: 10px; color: var(--muted); opacity: 0.7; letter-spacing: 0.03em; margin-left: 6px; }
.contact-row-arrow { color: var(--muted); transition: transform .25s, color .25s; }

.contact-honest { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-strong); display: flex; gap: 14px; align-items: baseline; }
.contact-honest-aster { font-family: var(--serif); font-style: italic; color: var(--orange); font-size: 20px; line-height: 1; flex-shrink: 0; }
.contact-honest p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* ================================================================
   12. FOOTER — Pied de page fixe
   ─────────────────────────────────────────────────────────────────
   Même principe que la nav : position fixed, backdrop-filter, z-index 100.
   Toujours visible, au-dessus du contenu qui scrolle dessous.

   height: var(--footer-h) → hauteur fixe définie dans les tokens (52px)
   C'est cette hauteur qui est compensée par padding-bottom sur <body>.

   .fondateur-footer → variante claire (fond paper) pour la page /fondateur,
                       surcharge le fond sombre via !important.

   Sur mobile (< 560px) : label central masqué pour tenir sur une ligne.
   ================================================================ */
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  z-index: 100;
  display: flex; align-items: center;
  background: rgba(20,20,26,0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(247,244,238,0.06);
}
.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; width: 100%;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(247,244,238,0.6);
}
.footer-row a:hover { color: var(--orange); }
@media (max-width: 560px) {
  .footer-row { flex-direction: row; gap: 8px; }
  .footer-row span:nth-child(2) { display: none; }
}

/* ================================================================
   13. SCROLL REVEAL — Animation d'apparition au scroll
   ─────────────────────────────────────────────────────────────────
   Tout élément avec la classe .reveal part de :
     opacity: 0              → invisible
     translateY(16px)        → décalé 16px vers le bas

   Quand ScrollRevealClient.tsx ajoute la classe .in :
     opacity: 1 + translateY(0) → apparaît en glissant vers le haut

   cubic-bezier(.2,.7,.2,1) → courbe d'accélération : démarre vite,
                               finit très doucement (effet "flottement")

   --reveal-delay → délai personnalisé via style={{ '--reveal-delay': '160ms' }}
                    pour créer des cascades d'animation dans une même section.

   prefers-reduced-motion → si l'utilisateur a désactivé les animations
   dans son OS, on rend tout visible directement sans transition.
   ================================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  /* Accessibilité : contenu directement visible, pas d'animation */
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ================================================================
   14. FONDATEUR — Styles spécifiques à la page /fondateur
   ─────────────────────────────────────────────────────────────────
   .page-header      → en-tête avec breadcrumb + grand titre
   .founder-bg       → section sombre (#ink) avec grille portrait | texte
   .founder-portrait → placeholder visuel avec initiales "RBS" en couleurs
   .skills-grid      → grille 2 colonnes des technos, avec séparateur central
   .philo            → section citation avec layout 2 colonnes (label | texte)
   .approach         → liste des 5 étapes de méthode de travail
   .cta-back         → bloc centré de retour vers l'accueil
   ================================================================ */
.page-header { padding-top: 156px; padding-bottom: 56px; }

.breadcrumb {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb .sep { opacity: 0.45; }
.page-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
  text-wrap: pretty;
}
.page-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--orange);
}

.founder-bg {
  background: var(--ink);
  color: var(--paper);
  padding: var(--section-y) 0;
}
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 960px) { .founder-grid { grid-template-columns: 1fr; gap: 44px; } }

.founder-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 10px, rgba(247,244,238,0.04) 10px, rgba(247,244,238,0.04) 11px),
    linear-gradient(180deg, #1F1F26 0%, #14141A 100%);
  border: 1px solid rgba(247, 244, 238, 0.1);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* image remplace les initiales */
.founder-portrait-sub {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: rgba(247, 244, 238, 0.4);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.founder-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
  margin-bottom: 14px;
}
.founder-name {
  font-size: 34px; font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 5px;
  color: var(--paper);
}
.founder-role {
  font-family: var(--mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(247, 244, 238, 0.55); margin-bottom: 32px;
}
.founder-bio {
  font-size: 17px; line-height: 1.65;
  color: rgba(247, 244, 238, 0.8);
  max-width: 56ch; margin-bottom: 22px;
}
.founder-bio:last-of-type { margin-bottom: 44px; }

.skills-label {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(247, 244, 238, 0.45);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(247, 244, 238, 0.1);
}
/* ================================================================
   DIAMONDS SKILLS GRID — losanges néon avec flip au survol
   ─────────────────────────────────────────────────────────────────
   Chaque skill = un losange (carré rotaté 45°) avec :
     · Néon coloré via box-shadow (couleur = catégorie du skill)
     · Face avant  : nom + niveau de maîtrise en %
     · Face arrière : description courte (révélée au survol)
     · Flip CSS pur : preserve-3d + rotateY — aucun JS

   Tokens couleur par catégorie (--dc, --dc-glow, --dc-bg) :
     dev   → orange (#E07B30)
     infra → navy   (#1B4F8A)
     soft  → gris   (#5A5A6E)

   ─── Comment fonctionne le flip losange ─────────────────────────
   Le .skill-flipper est rotaté 45deg (→ losange visuel).
   Au hover on applique rotate(45deg) rotateY(180deg) simultanément
   → la carte flip sur son axe Y tout en conservant la forme losange.
   Le contenu intérieur (.skill-face-inner) est contre-rotaté -45deg
   pour rester lisible à l'horizontale.
   ================================================================ */

/* ── Section arsenal ── */
.arsenal {
  background: var(--ink);
  padding: var(--section-y) 0 calc(var(--section-y) + 40px);
}
.arsenal .section-eyebrow { color: rgba(247,244,238,0.45); }
.arsenal .section-eyebrow .num { color: var(--orange); }
.arsenal .section-title { color: var(--paper); }
.arsenal .section-title em { color: var(--orange); }
.arsenal-head { margin-bottom: 56px; }

/* ── Wrapper skills (filtre + grille) ── */
.skills-arsenal { display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* ── Filtres catégories ─────────────────────────────────────────────────────
   Un bouton par catégorie + "Tous". Chaque bouton de catégorie a un dot
   coloré à gauche. Le bouton actif est rempli avec la couleur de catégorie.
   ────────────────────────────────────────────────────────────────────────── */
.skills-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.skill-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247,244,238,0.15);
  background: transparent;
  color: rgba(247,244,238,0.5);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
/* Bouton Stack produit — style spécial en tête */
.skill-filter-btn[data-cat="stack"] {
  color: var(--orange);
  border-color: rgba(224,123,48,0.4);
  font-weight: 600;
}
.skill-filter-btn[data-cat="stack"].active,
.skill-filter-btn[data-cat="stack"]:hover {
  background: rgba(224,123,48,0.15);
  border-color: var(--orange);
  color: var(--orange);
}

/* Dot coloré sur les boutons de catégorie (pas "Tous" ni "stack") */
.skill-filter-btn[data-cat]:not([data-cat="stack"])::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.skill-filter-btn[data-cat="dev"]   { color: #E07B30; border-color: rgba(224,123,48,0.3); }
.skill-filter-btn[data-cat="infra"] { color: #3B82F6; border-color: rgba(59,130,246,0.3); }
.skill-filter-btn[data-cat="soft"]  { color: #8B8B9E; border-color: rgba(139,139,158,0.3); }

/* État actif */
.skill-filter-btn.active,
.skill-filter-btn:hover {
  color: var(--paper);
  border-color: transparent;
  background: rgba(247,244,238,0.1);
}
.skill-filter-btn[data-cat="dev"].active,
.skill-filter-btn[data-cat="dev"]:hover   { background: rgba(224,123,48,0.18);  border-color: rgba(224,123,48,0.4); color: #E07B30; }
.skill-filter-btn[data-cat="infra"].active,
.skill-filter-btn[data-cat="infra"]:hover { background: rgba(59,130,246,0.15);  border-color: rgba(59,130,246,0.4); color: #3B82F6; }
.skill-filter-btn[data-cat="soft"].active,
.skill-filter-btn[data-cat="soft"]:hover  { background: rgba(139,139,158,0.15); border-color: rgba(139,139,158,0.4); color: #8B8B9E; }

/* ── Grille quinconce ───────────────────────────────────────────────────────
   Chaque .diamonds-row est un flex centré.
   Un margin-top négatif (-52px) fait se chevaucher les rangées :
   les losanges s'imbriquent pointe à pointe → effet quinconce.
   Valeur calculée : 180px(card) × (√2 - 1) / 2 ≈ 37px de débord visuel
   → rows séparées de 180 - 52 = 128px center à center-top : quinconce parfait.
   ────────────────────────────────────────────────────────────────────────── */
.diamonds-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: 40px;
}
.diamonds-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: -50px;      /* quinconce : chevauche la rangée précédente */
}
.diamonds-row:first-child { margin-top: 0; }

/* Apparition animée à l'entrée (re-déclenchée lors du filtrage via key React) */
@keyframes diamond-in {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Cellule losange ────────────────────────────────────────────────────────
   Tokens couleur :
     --dc       = couleur principale (border, %)
     --dc-glow  = couleur néon (box-shadow)
     --dc-bg    = lueur interne subtile (inset shadow)
     --dc-opp   = couleur OPPOSÉE affichée au survol
     --dc-opp-g = glow de la couleur opposée
   ────────────────────────────────────────────────────────────────────────── */
.skill-diamond {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: diamond-in 0.4s ease forwards;
  /* dev = orange (défaut) — opposé = bleu */
  --dc:      #E07B30;
  --dc-glow: rgba(224, 123, 48, 0.5);
  --dc-bg:   rgba(224, 123, 48, 0.05);
  --dc-opp:      #3B82F6;
  --dc-opp-g:    rgba(59, 130, 246, 0.55);
  --dc-opp-bg:   rgba(59, 130, 246, 0.06);
}
/* ============================================================
   COULEURS PAR CATÉGORIE — 11 catégories
   Chaque catégorie définit :
     --dc       : couleur principale
     --dc-glow  : glow néon
     --dc-bg    : glow interne
     --dc-opp   : couleur opposée (hover)
     --dc-opp-g : glow opposé
     --dc-opp-bg: glow interne opposé
   ============================================================ */

/* Systèmes d'exploitation (sys) */
.skill-diamond[data-cat="sys"] {
  --dc: var(--sys-dc);
  --dc-glow: var(--sys-dc-glow);
  --dc-bg: var(--sys-dc-bg);
  --dc-opp: var(--sys-dc-opp);
  --dc-opp-g: var(--sys-dc-opp-g);
  --dc-opp-bg: var(--sys-dc-opp-bg);
}

/* Virtualisation (virtu) */
.skill-diamond[data-cat="virtu"] {
  --dc: var(--virtu-dc);
  --dc-glow: var(--virtu-dc-glow);
  --dc-bg: var(--virtu-dc-bg);
  --dc-opp: var(--virtu-dc-opp);
  --dc-opp-g: var(--virtu-dc-opp-g);
  --dc-opp-bg: var(--virtu-dc-opp-bg);
}

/* Front-end (front) */
.skill-diamond[data-cat="front"] {
  --dc: var(--front-dc);
  --dc-glow: var(--front-dc-glow);
  --dc-bg: var(--front-dc-bg);
  --dc-opp: var(--front-dc-opp);
  --dc-opp-g: var(--front-dc-opp-g);
  --dc-opp-bg: var(--front-dc-opp-bg);
}

/* Back-end (back) */
.skill-diamond[data-cat="back"] {
  --dc: var(--back-dc);
  --dc-glow: var(--back-dc-glow);
  --dc-bg: var(--back-dc-bg);
  --dc-opp: var(--back-dc-opp);
  --dc-opp-g: var(--back-dc-opp-g);
  --dc-opp-bg: var(--back-dc-opp-bg);
}

/* Scripting (script) */
.skill-diamond[data-cat="script"] {
  --dc: var(--script-dc);
  --dc-glow: var(--script-dc-glow);
  --dc-bg: var(--script-dc-bg);
  --dc-opp: var(--script-dc-opp);
  --dc-opp-g: var(--script-dc-opp-g);
  --dc-opp-bg: var(--script-dc-opp-bg);
}

/* Réseaux et sécurité (reseaux) */
.skill-diamond[data-cat="reseaux"] {
  --dc: var(--reseaux-dc);
  --dc-glow: var(--reseaux-dc-glow);
  --dc-bg: var(--reseaux-dc-bg);
  --dc-opp: var(--reseaux-dc-opp);
  --dc-opp-g: var(--reseaux-dc-opp-g);
  --dc-opp-bg: var(--reseaux-dc-opp-bg);
}

/* Télécom / VoIP / SIP (telecom) */
.skill-diamond[data-cat="telecom"] {
  --dc: var(--telecom-dc);
  --dc-glow: var(--telecom-dc-glow);
  --dc-bg: var(--telecom-dc-bg);
  --dc-opp: var(--telecom-dc-opp);
  --dc-opp-g: var(--telecom-dc-opp-g);
  --dc-opp-bg: var(--telecom-dc-opp-bg);
}

/* DevOps / CI/CD (devops) */
.skill-diamond[data-cat="devops"] {
  --dc: var(--devops-dc);
  --dc-glow: var(--devops-dc-glow);
  --dc-bg: var(--devops-dc-bg);
  --dc-opp: var(--devops-dc-opp);
  --dc-opp-g: var(--devops-dc-opp-g);
  --dc-opp-bg: var(--devops-dc-opp-bg);
}

/* Supervision (sup) */
.skill-diamond[data-cat="sup"] {
  --dc: var(--sup-dc);
  --dc-glow: var(--sup-dc-glow);
  --dc-bg: var(--sup-dc-bg);
  --dc-opp: var(--sup-dc-opp);
  --dc-opp-g: var(--sup-dc-opp-g);
  --dc-opp-bg: var(--sup-dc-opp-bg);
}

/* Services & outils (serv) */
.skill-diamond[data-cat="serv"] {
  --dc: var(--serv-dc);
  --dc-glow: var(--serv-dc-glow);
  --dc-bg: var(--serv-dc-bg);
  --dc-opp: var(--serv-dc-opp);
  --dc-opp-g: var(--serv-dc-opp-g);
  --dc-opp-bg: var(--serv-dc-opp-bg);
}

/* Soft skills (soft) */
.skill-diamond[data-cat="soft"] {
  --dc: var(--soft-dc);
  --dc-glow: var(--soft-dc-glow);
  --dc-bg: var(--soft-dc-bg);
  --dc-opp: var(--soft-dc-opp);
  --dc-opp-g: var(--soft-dc-opp-g);
  --dc-opp-bg: var(--soft-dc-opp-bg);
}
.skill-diamond:hover { z-index: 10; }

/* ── Flipper 3D ── */
.skill-flipper {
  width: 122px;
  height: 122px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotate(45deg);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-diamond:hover .skill-flipper {
  transform: rotate(45deg) rotateY(180deg);
}

/* ── Faces ── */
.skill-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--dc);
  background: #0E0E14;
  box-shadow:
    0 0  8px var(--dc-glow),
    0 0 22px var(--dc-glow),
    inset 0 0 14px var(--dc-bg);
  /* Transition couleur → opposée au survol */
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Au survol : couleur opposée sur les deux faces */
.skill-diamond:hover .skill-face {
  border-color: var(--dc-opp);
  box-shadow:
    0 0 12px var(--dc-opp-g),
    0 0 36px var(--dc-opp-g),
    0 0 60px var(--dc-opp-g),
    inset 0 0 20px var(--dc-opp-bg);
}
.skill-face-back {
  transform: rotateY(180deg);
  background: #12121A;
}

/* ── Contenu (contre-rotaté -45deg) ── */
.skill-face-inner {
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 86px;
  max-height: 70px;
  overflow: hidden;
  text-align: center;
}
.skill-dname {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.75);
  line-height: 1.2;
  display: block;
}
.skill-dpct {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--dc);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 12px var(--dc-glow);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
/* % en couleur opposée au survol */
.skill-diamond:hover .skill-dpct {
  color: var(--dc-opp);
  text-shadow: 0 0 12px var(--dc-opp-g);
}
.skill-dpct em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: rgba(247,244,238,0.35);
  letter-spacing: 0;
}
.skill-dcat {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dc-opp);
  text-shadow: 0 0 8px var(--dc-opp-g);
  display: block;
  margin-bottom: 3px;
}
.skill-ddesc {
  font-size: 9px;
  line-height: 1.45;
  color: rgba(247,244,238,0.6);
  margin: 0;
}
.skills-empty {
  color: rgba(247,244,238,0.35);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 40px 0;
}

/* ── Rangée partielle (filtre réduit le nb de skills) ──────────────────────
   Quand la dernière rangée n'est pas pleine, le margin-top négatif cause un
   chevauchement parasite. On le supprime pour cette rangée-là uniquement.    */
/* Losange fantôme : invisible mais occupe la même place qu'un vrai losange.
   Permet de centrer les rangées partielles dans la bonne position quinconce
   sans retirer le margin-top (ce qui créerait un grand vide). */
.skill-diamond--phantom { visibility: hidden; pointer-events: none; }

/* ── Responsive — tailles des losanges par palier ──────────────────────────
   Les seuils DOIVENT correspondre aux breakpoints JS dans SkillsGrid.tsx.
   Contrainte : la RANGÉE IMPAIRE (cols+1 losanges) doit tenir dans le wrap.
   wrap = fenêtre - clamp(20px, 4vw, 40px) × 2
   ─────────────────────────────────────────────────────────────────────────
   >1200px : cols=6, rangée 7 × 155px + 6 × 10px  = 1145 ≤ 1200  ✓  (défaut)
   900-1200 : cols=5, rangée 6 × 128px + 5 × 10px  =  818 ≤  828  ✓
   700-900  : cols=4, rangée 5 × 118px + 4 ×  8px  =  622 ≤  644  ✓
   500-700  : cols=3, rangée 4 × 105px + 3 ×  8px  =  444 ≤  460  ✓
   <500px   : cols=2, rangée 3 × 102px + 2 ×  7px  =  320 ≤  335  ✓
   ────────────────────────────────────────────────────────────────────────── */

/* Laptop (900-1200px) */
@media (max-width: 1200px) {
  .skill-diamond    { width: 128px; height: 128px; }
  .skill-flipper    { width: 86px;  height: 86px; }
  .skill-face-inner { width: 60px;  max-height: 49px; }
  .skill-dpct       { font-size: 19px; }
  .skill-dname      { font-size: 8px; }
  .diamonds-row     { gap: 10px; margin-top: -36px; }
}

/* Tablette (700-900px) */
@media (max-width: 900px) {
  .skill-diamond    { width: 118px; height: 118px; }
  .skill-flipper    { width: 79px;  height: 79px; }
  .skill-face-inner { width: 56px;  max-height: 46px; }
  .skill-dpct       { font-size: 17px; }
  .skill-dname      { font-size: 7.5px; }
  .diamonds-row     { gap: 8px; margin-top: -33px; }
}

/* Mobile large (500-700px) */
@media (max-width: 700px) {
  .skill-diamond    { width: 105px; height: 105px; }
  .skill-flipper    { width: 71px;  height: 71px; }
  .skill-face-inner { width: 50px;  max-height: 41px; }
  .skill-dpct       { font-size: 15px; }
  .skill-dname      { font-size: 7px; }
  .skill-ddesc      { font-size: 7px; }
  .skill-dcat       { font-size: 7px; }
  .diamonds-row     { gap: 8px; margin-top: -30px; }
}

/* Mobile portrait (<500px) */
@media (max-width: 500px) {
  .skill-diamond    { width: 102px; height: 102px; }
  .skill-flipper    { width: 69px;  height: 69px; }
  .skill-face-inner { width: 49px;  max-height: 40px; }
  .skill-dpct       { font-size: 15px; }
  .skill-dname      { font-size: 7px; }
  .skill-ddesc      { font-size: 6.5px; }
  .skill-dcat       { font-size: 6.5px; }
  .diamonds-row     { gap: 7px; margin-top: -28px; }
}

.philo { padding: var(--section-y) 0; }
.philo-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 840px) { .philo-grid { grid-template-columns: 1fr; gap: 24px; } }
.philo-eyebrow {
  font-family: var(--mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 8px;
}
.philo-eyebrow .num { color: var(--orange); margin-right: 12px; }
.philo-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.philo-quote::before { content: '\201C'; color: var(--orange); margin-right: 2px; }
.philo-quote::after { content: '\201D'; color: var(--orange); margin-left: 2px; }
.philo-attrib {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 24px;
}

.approach {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line-strong);
}
.approach-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  margin-bottom: 56px;
  align-items: end;
}
@media (max-width: 840px) { .approach-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } }
.approach-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.approach-title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--orange); }
.approach-list { border-top: 1px solid var(--line-strong); }
.approach-row {
  display: grid;
  grid-template-columns: 72px 1fr 2fr;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-strong);
  align-items: start;
  transition: padding-left .25s ease;
}
.approach-row:hover { padding-left: 8px; }
@media (max-width: 720px) {
  .approach-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .approach-row:hover { padding-left: 0; }
}
.approach-num {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--orange);
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.approach-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.approach-desc {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 60ch;
}

.cta-back {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line-strong);
  text-align: center;
}
.cta-back-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.cta-back-title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--orange); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.fondateur-footer {
  background: rgba(247,244,238,0.95) !important;
  border-top: 1px solid var(--line-strong) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.fondateur-footer .footer-row { color: var(--muted); }

/* ================================================================
   PARCOURS PROFESSIONNEL — TIMELINE
   ================================================================ */
.section-parcours { padding: var(--section-y) 0; }

/* Conteneur : la ligne orange est un ::before centré */
.tl-entries {
  position: relative;
  margin-top: 64px;
}
.tl-entries::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--orange) 0%, rgba(224,123,48,0.06) 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Chaque entrée : [gauche | nœud | droite] */
.tl-entry {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  margin-bottom: 72px;
  position: relative;
}
.tl-entry:last-child { margin-bottom: 0; }

/* ── Gauche : info poste ── */
.tl-left { padding-right: 28px; text-align: right; }

.tl-period {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 8px;
}
.tl-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.tl-company {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.tl-location { opacity: 0.7; }
.tl-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Centre : nœud ── */
.tl-axis {
  display: flex;
  justify-content: center;
  padding-top: 6px;
  position: relative;
  z-index: 1;
}
.tl-node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--orange);
  transition: box-shadow 0.3s;
}
.tl-node--current {
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(224,123,48,0.15), 0 0 18px rgba(224,123,48,0.45);
}

/* ── Droite : projets ── */
.tl-right { padding-left: 28px; }

.tl-project {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
}
/* Trait horizontal vers le dot */
.tl-project::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 8px;
  width: 28px;
  height: 1px;
  background: var(--orange);
  opacity: 0.35;
}
.tl-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 5px;
}
.tl-project-body { flex: 1; }
.tl-project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.tl-project-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Mobile ── */
@media (max-width: 720px) {
  .tl-entries { margin-top: 40px; }

  /* Ligne à gauche — centrée sur la colonne axis (28px → centre à 14px) */
  .tl-entries::before { left: 13px; transform: none; }

  .tl-entry {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'axis left' 'axis right';
    gap: 0 14px;
    margin-bottom: 44px;
  }

  /* Alignement nœud ↔ ligne : centré dans la colonne de 28px → 14px = ligne */
  .tl-axis  { grid-area: axis; padding-top: 2px; justify-content: center; }

  /* min-width: 0 empêche le texte de faire déborder la colonne */
  .tl-left  { grid-area: left;  text-align: left; padding-right: 0; min-width: 0; }
  .tl-right { grid-area: right; padding-left: 0; margin-top: 14px; min-width: 0; }

  /* Textes légèrement réduits pour tenir sur petits écrans */
  .tl-title   { font-size: 15px; }
  .tl-desc    { font-size: 13px; }
  .tl-project-name { font-size: 12.5px; }
  .tl-project-desc { font-size: 12px; }

  .tl-project::before { display: none; }
}

/* ================================================================
   ÉTUDES & FORMATIONS
   ================================================================ */
.section-edu { padding: var(--section-y) 0; background: var(--surface); }

.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.edu-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}
.edu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.edu-card:hover { transform: translateY(-3px); }

.edu-year {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 10px;
}
.edu-degree {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
.edu-school {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.edu-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
  margin-top: 10px;
}

/* ================================================================
   PASSIONS & HOBBIES
   ================================================================ */
.section-hobbies {
  padding: var(--section-y) 0;
  background: var(--ink);
  color: var(--paper);
}
.section-hobbies .section-eyebrow { color: rgba(247,244,238,0.45); }
.section-hobbies .section-eyebrow .num { color: var(--orange); }
.section-hobbies .section-title { color: var(--paper); }
.section-hobbies .section-title em { color: var(--orange); }

/* ── Grille 2 colonnes ── */
.hobbies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 40px;
  margin-top: 56px;
}
.hobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hobby-visual {
  width: 100%;
  max-width: 300px;
}
.hobby-img {
  width: 100%;
  height: auto;
  display: block;
}
.hobby-content {
  width: 100%;
  padding-top: 8px;
}
.hobby-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--paper);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.hobby-desc {
  font-size: 14px;
  color: rgba(247, 244, 238, 0.65);
  line-height: 1.7;
}
.hobby-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--orange);
  text-decoration: none;
  font-weight: 500;
}
.hobby-link:hover { text-decoration: underline; }

/* Tracklist musique */
.hobby-tracks {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(247,244,238,0.1);
  padding-top: 14px;
}
.hobby-track {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: rgba(247,244,238,0.5);
  font-size: 13px;
  transition: color 0.18s;
}
.hobby-track:hover { color: var(--orange); }
.hobby-track-note {
  color: var(--orange);
  font-size: 11px;
  flex-shrink: 0;
}
.hobby-track-info strong { color: var(--paper); font-weight: 500; }
.hobby-track:hover .hobby-track-info strong { color: var(--orange); }

/* Mobile hobbies */
@media (max-width: 640px) {
  .hobbies-grid { grid-template-columns: 1fr; gap: 48px; }
  .hobby-visual { max-width: 240px; }
}