/* =====================================================================================================================
   YC Creations — styles communs à toutes les pages
   Repris de la maquette (Claude Design, version du 11/10/2026), qui applique la Charte YC Creations.
   Sommaire : 1. Polices  2. Couleurs et mesures  3. Bases  4. Titres et dégradé  5. Badges  6. Bouton « La rencontre »
              7. Liens et adresse e-mail  8. Fond (halos, points lumineux)  9. Navigation  10. Appel final
              11. Pied de page  12. Bandeau cookies  13. Apparitions au défilement  14. Mobile  15. Grands écrans
   ===================================================================================================================== */

/* ---------- 1. Polices (hébergées avec le site) ---------- */
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/polices/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/polices/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/polices/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Nohemi';src:url('/assets/polices/nohemi-200.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'Nohemi';src:url('/assets/polices/nohemi-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Nohemi';src:url('/assets/polices/nohemi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Nohemi';src:url('/assets/polices/nohemi-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Nohemi';src:url('/assets/polices/nohemi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- 2. Couleurs et mesures (Charte v2 : 12 couleurs de travail + 5 teintes de dégradé) ---------- */
:root{
  --ink:#0A0D10;        /* Noir abysse : fond */
  --ink-2:#151A1F;      /* Graphite : surface */
  --ink-3:#262D34;      /* Anthracite : surface haute */
  --white:#ffffff;
  --muted:#8A919A;      /* Pierre : texte secondaire */
  --texte-corps:rgba(255,255,255,0.72);
  --bleu-nuit:#0E2A3A; --perle:#E8E6E1; --ardoise:#56606A; --succes:#8FD6B0; --erreur:#F0A79E;
  --ciel:#A9DAEF; --bleu-profond:#1F6E91; --bleu-marine:#134A63; --champagne:#F1DDB0; --or-profond:#7A5A1E;
  --azur:#3A9CC6;       /* fond de la carte des chiffres clés */
  --BleuYC:#6EC1E4;     /* couleurs de marque */
  --GoldYC:#D9A94F;
  --accent:var(--BleuYC);
  --accent-dim:rgba(110,193,228,0.14);
  --line:rgba(255,255,255,0.10);
  /* dégradé YC (titres, boutons, liens) */
  --grad-yc:linear-gradient(90deg, var(--BleuYC) 0%, #A9DAEF 18%, #F1DDB0 32%, var(--GoldYC) 50%, #F1DDB0 68%, #A9DAEF 82%, var(--BleuYC) 100%);
  --lecture:68ch; --section:128px; --gutter:64px;
  --rayon-s:12px; --rayon-m:20px; --rayon-l:30px;
  --xl:1;               /* agrandissement des grands écrans (section 15) */
}

/* ---------- 3. Bases ---------- */
body{margin:0;background:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;color:var(--white);}
h1,h2,h3{font-family:'Nohemi',sans-serif;font-weight:500;margin:0;letter-spacing:-0.01em;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(110,193,228,0.35);color:#fff;}
:focus-visible{outline:2px solid var(--BleuYC);outline-offset:3px;}
/* la page : colonne pleine hauteur, le pied de page reste en bas */
.page{position:relative;isolation:isolate;width:100%;min-height:100vh;background:var(--ink);display:flex;flex-direction:column;}

/* ---------- 4. Titres et dégradé ---------- */
.titreYC{font-family:'Nohemi',sans-serif;font-weight:200;font-size:clamp(44px, 6.1vw, 88px);line-height:1;letter-spacing:-0.02em;color:var(--white);margin:0;text-wrap:balance;}
.titreYC .yc-grad{font-weight:700;}
@media (max-width:918px){ .titreYC{font-weight:300;} }

@keyframes ycGrad{from{background-position:0% 0;}to{background-position:200% 0;}}
.yc-grad{display:inline-block;background-image:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,0.38));animation:ycGrad 3.5s linear infinite;}

/* ---------- 5. Badges (titres de bloc) : pilule en verre, contour GoldYC/BleuYC, reflet au survol ---------- */
@property --badge-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes badgeShine{0%,55%{background-position:100% 0;}100%{background-position:0% 0;}}
.yc-badge{position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;width:fit-content;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.yc-badge::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--badge-angle), rgba(217,169,79,0.15) 0%, var(--GoldYC) 18%, rgba(217,169,79,0.15) 36%, rgba(110,193,228,0.15) 55%, var(--BleuYC) 72%, rgba(110,193,228,0.15) 90%, rgba(217,169,79,0.15) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.yc-badge-text{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--GoldYC);
  background:linear-gradient(100deg, var(--GoldYC) 0%, var(--GoldYC) 40%, #F1DDB0 50%, var(--GoldYC) 60%, var(--GoldYC) 100%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.yc-badge-text.is-blue{color:var(--BleuYC);background-image:linear-gradient(100deg, var(--BleuYC) 0%, var(--BleuYC) 40%, #A9DAEF 50%, var(--BleuYC) 60%, var(--BleuYC) 100%);}
.yc-badge:hover .yc-badge-text{animation:badgeShine 1.6s ease-out 1;}
/* badges pleins : fond BleuYC ou GoldYC, texte noir */
.yc-badge.badgebleu, .yc-badge.badgegold{border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.yc-badge.badgebleu{background:var(--BleuYC);}
.yc-badge.badgegold{background:var(--GoldYC);}
.yc-badge.badgebleu::before, .yc-badge.badgegold::before{display:none;}
.yc-badge.badgebleu .yc-badge-text, .yc-badge.badgegold .yc-badge-text{background:none;color:#0A0D10;-webkit-text-fill-color:#0A0D10;animation:none;}

/* ---------- 6. Bouton principal « La rencontre » (.hero-cta)
   Deux lumières (Bleu YC par le haut, Or YC par le bas) se rejoignent sur la courbe de gauche, puis le dégradé YC
   traverse le texte. Le tracé (<svg class="ycm">) est ajouté et animé par commun.js. ---------- */
.hero-cta{position:relative;display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:16px;overflow:visible;
  padding:9px 9px 9px 27px;border-radius:999px;background:rgba(255,255,255,0.06);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:14px;letter-spacing:0.03em;text-transform:uppercase;font-weight:500;color:var(--white);transition:color .4s ease, border-color .4s ease;}
.hero-cta::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:rgba(255,255,255,0.16);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.hero-cta-fill{position:absolute;inset:0;border-radius:999px;z-index:0;background-color:var(--GoldYC);background-image:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;
  animation:ycGrad 3.5s linear infinite;transform:scale(0);transform-origin:right center;transition:transform .55s cubic-bezier(.4,.2,.2,1);}
.hero-cta:hover, .hero-cta:focus-visible{color:var(--ink);}
.hero-cta:hover .hero-cta-fill, .hero-cta:focus-visible .hero-cta-fill{transform:scale(1);}
.hero-cta:focus-visible{outline:2px solid var(--BleuYC);outline-offset:4px;}
.hero-cta-label{position:relative;z-index:1;
  background-image:linear-gradient(90deg, currentColor 0%, currentColor 33.4%, #6EC1E4 41.5%, #A9DAEF 45.5%, #F1DDB0 50%, #D9A94F 56.5%, currentColor 66.6%, currentColor 100%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-cta:hover > .hero-cta-label, .hero-cta:focus-visible > .hero-cta-label, .is-sending .hero-cta > .hero-cta-label{background-image:none;-webkit-text-fill-color:currentColor;}
.hero-cta-arrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;aspect-ratio:1;border-radius:50%;
  background:var(--GoldYC);color:var(--ink);transition:transform .4s cubic-bezier(.4,.2,.2,1), background .4s ease, color .4s ease;}
.hero-cta-arrow > svg{display:block;flex:none;width:16px;height:16px;transition:transform .3s ease, opacity .4s ease;}
/* au survol, la flèche passe en dégradé YC sur une pastille noire */
.hero-cta-arrow::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;animation:ycGrad 3.5s linear infinite;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
.hero-cta:hover .hero-cta-arrow, .hero-cta:focus-visible .hero-cta-arrow{background:var(--ink);transform:rotate(45deg);}
.hero-cta:hover .hero-cta-arrow::after, .hero-cta:focus-visible .hero-cta-arrow::after{opacity:1;}
.hero-cta:hover .hero-cta-arrow svg, .hero-cta:focus-visible .hero-cta-arrow svg{opacity:0;}
/* tracé lumineux */
.ycm{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;pointer-events:none;z-index:3;transition:opacity .45s ease;}
.ycm-l, .ycm-fx{fill:none;stroke-linecap:round;opacity:0;}
.ycm-b .ycm-l{stroke:#6EC1E4;}
.ycm-o .ycm-l{stroke:#D9A94F;}
.ycm-t{stroke-width:1.5;stroke-opacity:.2;}
.ycm-b .ycm-head{stroke:#D6F0FA;}
.ycm-o .ycm-head{stroke:#F6E2B6;}
.ycm-head{stroke-width:1.8;}
.ycm-glow{stroke-width:6;stroke-opacity:.45;}
.ycm-fx{stroke-width:1.8;}
.ycm-fx-g{stroke-width:7;stroke-opacity:.55;}
.hero-cta:hover > .ycm, .hero-cta:focus-visible > .ycm{opacity:0;}

/* ---------- 7. Liens et adresse e-mail (un clic copie l'adresse) ---------- */
.yc-lnk{color:#fff;text-decoration:underline;text-decoration-color:var(--BleuYC);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .2s ease, text-decoration-thickness .2s ease;}
.yc-lnk:hover{color:var(--BleuYC);text-decoration-thickness:2px;}
.yc-mail{position:relative;text-decoration:none !important;cursor:pointer;}
.yc-mail-t{position:relative;display:inline-block;line-height:1.2;}
.yc-mail-t::after{content:'';position:absolute;left:0;right:0;bottom:calc(-1 * var(--mo, 3px));height:1px;background:var(--BleuYC);transition:height .2s ease;}
.yc-mail:hover .yc-mail-t, .yc-mail:focus-visible .yc-mail-t{background-image:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:ycGrad 3.5s linear infinite;}
.yc-mail:hover .yc-mail-t::after, .yc-mail:focus-visible .yc-mail-t::after{height:2px;background:var(--grad-yc);background-size:200% 100%;animation:ycGrad 3.5s linear infinite;}
.yc-mail-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%, 6px);padding:6px 12px;border-radius:999px;background:rgba(143,214,176,0.14);
  color:#8FD6B0;-webkit-text-fill-color:#8FD6B0;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;line-height:1.2;
  text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .25s ease, transform .25s ease;}
.yc-mail.is-copied .yc-mail-tip{opacity:1;transform:translate(-50%, 0);}
.yc-mail:focus-visible{outline:2px solid var(--BleuYC);outline-offset:6px;border-radius:4px;}
/* texte réservé aux lecteurs d'écran */
.yc-mail-sr, .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- 8. Fond : dégradé continu + halos (.yc-backdrop), points lumineux des sections sombres (.yc-sky) ---------- */
.yc-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg, #151A1F 0%, #0A0D10 16%, #0A0D10 100%);}
.bd-glow{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(closest-side, var(--c) 0%, var(--c) 12%, transparent 100%);will-change:transform, opacity;
  animation:bdDrift var(--d, 28s) ease-in-out var(--dl, 0s) infinite alternate, bdBreath calc(var(--d, 28s) * 0.45) ease-in-out var(--dl, 0s) infinite alternate;}
.bd-glow.is-ribbon{width:calc(var(--s) * 1.9);margin-left:calc(var(--s) * -0.95);border-radius:50%;animation-name:bdRibbon, bdBreath;}
@keyframes bdDrift{0%{transform:translate(0, 0) scale(1);} 35%{transform:translate(calc(var(--mx, 120px) * 0.6), calc(var(--my, 80px) * -0.8)) scale(1.12);} 70%{transform:translate(calc(var(--mx, 120px) * -0.5), calc(var(--my, 80px) * 0.5)) scale(0.94);} 100%{transform:translate(var(--mx, 120px), var(--my, 80px)) scale(1.06);}}
@keyframes bdRibbon{0%{transform:translate(-8%, 0) rotate(-9deg) scaleY(0.55);} 50%{transform:translate(6%, -4%) rotate(4deg) scaleY(0.7);} 100%{transform:translate(12%, 3%) rotate(-3deg) scaleY(0.5);}}
@keyframes bdBreath{from{opacity:.65;} to{opacity:1;}}
.yc-sky{position:relative;isolation:isolate;background:transparent !important;}
.yc-sky:not(.hero){overflow-x:clip !important;overflow-y:visible !important;}
.yc-stars{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}
.yc-sky > img{object-fit:contain;}

/* ---------- 9. Navigation ----------
   Ordinateur : carte flottante qui se resserre au défilement (--nav-p, --nav-q posées par le script).
   ≤ 1200 px : logo seul + bouton menu (liste déroulante). ≤ 767 px : la langue passe dans le menu. */
@keyframes navSheen{0%{transform:translateX(-120%) skewX(-20deg);}100%{transform:translateX(640%) skewX(-20deg);}}
.nav-shell{position:sticky;top:0;z-index:10;box-sizing:border-box;height:80px;margin-bottom:-80px;padding:14px var(--gutter) 0;pointer-events:none;
  --nav-p:0;--nav-q:0;transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);}
/* disparaît en descendant après le hero, revient en remontant */
.nav-shell.is-hidden{opacity:0;transform:translateY(-24px);}
.nav-shell.is-hidden .nav-card, .nav-shell.is-hidden .nav-drop{pointer-events:none;}
.nav-card{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;
  width:min(100%, max(calc(100% - 30% * var(--nav-p)), 832px));margin:0 auto;padding:12px 16px 12px 32px;border-radius:999px;overflow:hidden;
  background:rgba(10,13,16,0.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 14px 40px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease, background .5s ease;}
.nav-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:16%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none;}
.nav-card:hover{transform:translateY(-3px);background:rgba(10,13,16,0.94);border-color:rgba(255,255,255,0.12);box-shadow:0 22px 60px rgba(0,0,0,0.5), 0 0 40px rgba(110,193,228,0.16), inset 0 1px 0 rgba(255,255,255,0.08);}
.nav-card:hover::before{animation:navSheen 1.3s ease-in-out;}
/* logo : monogramme + « Creations », qui s'efface quand la nav se resserre */
.nav-logo{display:flex;align-items:center;height:24.2px;}
.nav-logo-mark{display:block;height:24.2px;width:auto;position:relative;z-index:1;object-fit:contain;}
.nav-logo-tail{display:block;height:24.2px;width:calc(119.9px * (1 - var(--nav-q)));overflow:hidden;}
.nav-logo-tail img{display:block;height:24.2px;width:119.9px;max-width:none;object-fit:contain;transform:translateX(calc(-119.9px * var(--nav-q)));opacity:calc(1 - var(--nav-q));}
/* menu centré */
.nav-menu{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;align-items:center;gap:calc(40px - 16px * var(--nav-p));}
.nav-menu a{font-size:14px;color:var(--muted);white-space:nowrap;}
.nav-menu a.is-on{color:var(--white);border-bottom:1px solid var(--accent);padding-bottom:4px;}
.nav-link{position:relative;padding-bottom:4px;}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .25s ease;}
.nav-link:hover::after{right:0;}
/* bouton Contact */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;font-weight:500;}
.btn-solid{background:var(--accent);color:var(--ink);}
.btn-nav{padding:12px 24px;font-size:14px;color:#0A0D10;background-color:var(--GoldYC);transition:background .3s ease, transform .2s ease;}
.btn-nav:hover{transform:translateY(-2px);}
.btn-nav:hover, .btn-nav:focus-visible, .nav-drop > a.nav-drop-cta:hover{background-color:var(--BleuYC);background-image:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;animation:ycGrad 2.4s linear infinite;}
/* au clic : le dégradé s'anime, puis la page Contact s'ouvre */
.btn-nav.is-press, .nav-drop > a.nav-drop-cta.is-press{background-image:var(--grad-yc);background-size:200% 100%;background-repeat:repeat-x;animation:ycGrad 1.1s linear infinite;transform:scale(.97);}
/* sélecteur de langue : globe + code, carte des langues dessous */
.nav-lang{display:flex;align-items:center;margin-left:auto;margin-right:8px;flex:none;}
.nav-lang-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.14em;line-height:1;cursor:pointer;transition:color .2s ease, background .2s ease, box-shadow .2s ease;}
.nav-lang-btn svg{flex:none;}
.nav-lang-globe{width:16px;height:16px;flex-shrink:0;}
.nav-lang-chev{width:12px;height:12px;margin-left:-2px;transition:transform .3s cubic-bezier(.22,1,.36,1);flex-shrink:0;}
.nav-lang-btn:hover, .nav-shell.is-lang .nav-lang-btn{color:#fff;background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);}
.nav-shell.is-lang .nav-lang-chev{transform:rotate(180deg);}
.nav-lang-btn:focus-visible, .nav-lang-item:focus-visible{outline:2px solid var(--BleuYC);outline-offset:2px;}
.nav-lang-pop{position:absolute;top:var(--ly, 80px);right:var(--lx, 24px);z-index:3;width:184px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;
  border-radius:20px;pointer-events:auto;background:linear-gradient(170deg, #151A1F 0%, #0A0D10 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s linear .4s;}
.nav-shell.is-lang .nav-lang-pop{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1), visibility 0s;}
.nav-lang-item{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;font-family:inherit;font-size:14px;font-weight:500;
  color:var(--muted);text-align:left;cursor:pointer;transition:color .2s ease, background .2s ease;}
.nav-lang-item i{width:6px;height:6px;border-radius:50%;flex:none;aspect-ratio:1;}
.nav-lang-item b{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0.14em;color:rgba(255,255,255,0.35);}
.nav-lang-item:hover{color:var(--BleuYC);background:rgba(255,255,255,0.04);}
.nav-lang-item.is-on{color:#fff;cursor:default;background:rgba(255,255,255,0.04);}
.nav-lang-item.is-on i{background:var(--GoldYC);box-shadow:0 0 8px rgba(217,169,79,0.7);}
/* éléments du menu tablette et mobile, cachés sur ordinateur */
.nav-burger, .nav-drop, .nav-prog, .nav-drop-lang{display:none;}

@media (max-width:1200px){
  .nav-shell{padding-top:16px;}
  .nav-card{width:100%;height:56px;gap:16px;padding:8px 8px 8px 16px;justify-content:flex-start;transform:none !important;border:0;background:rgba(10,13,16,0.55);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.05);transition:background .5s ease, box-shadow .5s ease;}
  .nav-shell.is-scrolled .nav-card, .nav-shell.is-open .nav-card{background:rgba(10,13,16,0.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 40px rgba(0,0,0,0.45);}
  .nav-card::before{display:none;}
  .nav-logo, .nav-logo-mark{height:24px;}
  .nav-logo{margin-left:8px;}
  .nav-logo-tail{display:none;}
  .nav-menu, .nav-card > .btn-nav{display:none;}
  .nav-card > .nav-lang{margin-right:0;}
  .nav-lang-btn{height:40px;padding:0 12px;}
  /* bouton menu : nom de la page en cours + pastille blanche (deux traits qui deviennent une croix) */
  .nav-burger{display:inline-flex;align-items:center;gap:16px;margin-left:0;height:40px;padding:0 4px 0 16px;border:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);color:#fff;font:500 14px/1 'Plus Jakarta Sans', sans-serif;letter-spacing:0.02em;-webkit-tap-highlight-color:transparent;}
  .nav-bars{position:relative;width:32px;height:32px;border-radius:50%;background:#fff;flex:none;aspect-ratio:1;}
  .nav-bars i{position:absolute;left:10px;width:12px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1);}
  .nav-bars i:first-child{top:13px;}
  .nav-bars i:last-child{top:18px;}
  .nav-shell.is-open .nav-bars i:first-child{top:15.25px;transform:rotate(45deg);}
  .nav-shell.is-open .nav-bars i:last-child{top:15.25px;transform:rotate(-45deg);}
  /* fil de progression de la lecture */
  .nav-prog{display:block;position:absolute;left:24px;right:24px;bottom:0;height:1.5px;border-radius:2px;pointer-events:none;transform-origin:left center;
    transform:scaleX(var(--nav-read, 0));background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));opacity:.85;}
  /* liste déroulante */
  .nav-drop{display:flex;flex-direction:column;gap:4px;position:absolute;top:80px;left:var(--gutter);right:var(--gutter);padding:8px;border-radius:var(--rayon-m);pointer-events:auto;
    background:linear-gradient(170deg, #151A1F 0%, #0A0D10 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), 0 30px 60px rgba(0,0,0,0.5);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top center;
    transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;}
  .nav-shell.is-open .nav-drop{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s;}
  .nav-drop > a{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--rayon-s);font-size:16px;font-weight:500;color:rgba(255,255,255,0.72);text-decoration:none;
    opacity:0;transform:translateY(6px);transition:color .3s ease, background .3s ease, opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);}
  .nav-shell.is-open .nav-drop > a{opacity:1;transform:none;transition-delay:calc(var(--k) * 40ms + 60ms);}
  .nav-drop > a.is-on{color:#fff;background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);}
  .nav-drop > a:active{background:rgba(255,255,255,0.03);}
  .nav-drop > a.nav-drop-cta{justify-content:center;margin-top:8px;padding:16px;border-radius:999px;font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink);background-color:var(--GoldYC);}
  .nav-drop > a:focus-visible, .nav-burger:focus-visible{outline:2px solid var(--BleuYC);outline-offset:2px;}
}

@media (max-width:767px){
  .nav-card{background:rgba(10,13,16,0.92) !important;}
  .nav-card > .nav-lang, .nav-lang-pop{display:none;}
  .nav-burger{margin-left:auto;}
  /* langue dans le menu, au-dessus du bouton Contact */
  .nav-drop-lang{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-top:4px;padding:4px 8px 8px;border-top:1px solid rgba(255,255,255,0.08);
    opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);}
  .nav-shell.is-open .nav-drop-lang{opacity:1;transform:none;transition-delay:260ms;}
  .nav-drop > a.nav-drop-cta{--k:6 !important;}
  .nav-drop-lang-k{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:12px 8px 4px;font-size:16px;font-weight:500;color:rgba(255,255,255,0.72);}
  .nav-drop-lang-k i{display:flex;min-width:24px;color:var(--muted);}
  .nav-drop-lang-k svg{width:16px;height:16px;flex:none;}
  .nav-drop-lang-o{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;min-height:44px;padding:6px 10px;box-sizing:border-box;border:0;border-radius:999px;
    font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;color:rgba(255,255,255,0.72);background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
    text-align:center;-webkit-tap-highlight-color:transparent;}
  .nav-drop-lang-o.is-on{color:var(--ink);background:var(--BleuYC);box-shadow:none;}
  .nav-drop-lang-o:focus-visible{outline:2px solid var(--BleuYC);outline-offset:2px;}
}

/* ---------- 10. Appel final (bas des pages) ---------- */
.appel{padding:var(--section) var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;}
.appel-logo{aspect-ratio:3642 / 780;width:437px;max-width:85vw;height:auto;display:block;margin-bottom:16px;}
.appel h2{font-family:'Nohemi',sans-serif;font-weight:300;font-size:44px;line-height:1.1;max-width:720px;}
.appel h2 .yc-grad{font-weight:700;color:var(--BleuYC);}
.appel > p{color:var(--texte-corps);font-size:16px;}
.appel-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;}
.appel-actions .yc-mail{font-size:16px;}

/* ---------- 11. Pied de page : icônes LinkedIn et Malt, puis © à gauche et liens à droite ---------- */
.pied{padding:24px var(--gutter);display:flex;flex-direction:column;gap:0;margin-top:auto;border-top:1px solid var(--line);}
.ft-soc{display:flex;align-items:center;gap:8px;}
.ft-soc a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-10px 0;border-radius:8px;color:#fff;transition:color .3s ease;}
.ft-soc i{display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;}
.ft-soc a:hover, .ft-soc a:focus-visible{color:var(--BleuYC);}
.ft-soc a:focus-visible{outline:2px solid var(--BleuYC);outline-offset:2px;}
.ftc{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;padding:16px 0 4px;}
.ftc .ft-soc{align-self:flex-start;gap:16px;margin-left:-10px;}
.ftc-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;}
.ftc-copy{font-size:12.6px;line-height:1.4;color:var(--muted);letter-spacing:0.02em;white-space:nowrap;}
.ftc-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;row-gap:8px;}
.ftc-links > a, .ftc-links > button{padding:0;border:0;background:none;font-family:inherit;font-size:12.6px;line-height:1.4;color:var(--muted);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .3s ease;}
.ftc-links > * + *::before{content:'';display:inline-block;width:3px;height:3px;margin:0 14px;border-radius:50%;background:var(--muted);opacity:.5;vertical-align:middle;transform:translateY(-1px);}
.ftc-links > :hover, .ftc-links > :focus-visible{color:var(--BleuYC);}
.ftc-links > :focus-visible{outline:2px solid var(--BleuYC);outline-offset:3px;border-radius:2px;}
@media (max-width:767px){
  .ft-soc a{width:44px;height:44px;margin:-12px 0;}
  .ftc{gap:28px;padding:24px 0 8px;}
  .ftc .ft-soc{margin-left:-12px;}
  .ftc-bar{flex-direction:column;align-items:flex-start;gap:10px;}
  .ftc-links{justify-content:flex-start;column-gap:20px;row-gap:2px;}
  .ftc-links > a, .ftc-links > button{padding:6px 0;}
  .ftc-links > * + *::before{display:none;}
}

/* ---------- 12. Bandeau cookies (non bloquant, placé là où il ne couvre aucun bouton) ---------- */
.ck{position:fixed;z-index:9;left:var(--gutter,64px);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(560px, calc(100vw - 2 * var(--gutter,64px)));box-sizing:border-box;
  padding:20px 24px;border-radius:var(--rayon-l,30px);background:#151A1F;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.5);
  font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;line-height:1.6;color:var(--texte-corps,rgba(255,255,255,0.72));opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;gap:16px;}
.ck.is-on{opacity:1;transform:none;pointer-events:auto;}
.ck[data-pos="br"]{left:auto;right:var(--gutter,64px);}
.ck[data-pos="top"]{bottom:auto;top:96px;}
.ck p{margin:0;}
.ck-txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.ck-t{font-family:"Nohemi",sans-serif;font-weight:300;font-size:20px;line-height:1.25;letter-spacing:-0.01em;color:#fff;padding-right:40px;}
.ck-txt p:not(.ck-t){font-size:14px;color:var(--texte-corps,rgba(255,255,255,0.72));}
.ck a{color:#fff;text-decoration:underline;text-decoration-color:#6EC1E4;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap;transition:color .2s ease;}
.ck a:hover{color:#6EC1E4;}
.ck-x{position:absolute;top:14px;right:14px;width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,0.22);cursor:pointer;transition:border-color .25s ease, background .25s ease;}
.ck-x:hover{border-color:#fff;background:rgba(255,255,255,0.06);}
.ck-x svg{width:12px;height:12px;display:block;}
.ck-act{display:flex;gap:12px;}
.ck-btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 20px;border-radius:999px;font:600 14px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;}
.ck-no{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.35);}
.ck-no:hover{border-color:#fff;}
.ck-yes{background:#6EC1E4;color:#0A0D10;border:1px solid #6EC1E4;}
.ck-yes:hover{background:#A9DAEF;border-color:#A9DAEF;}
.ck-btn:focus-visible, .ck a:focus-visible, .ck-x:focus-visible{outline:2px solid #6EC1E4;outline-offset:3px;}
@media (max-width:767px){
  .ck{left:16px;right:16px;width:auto;max-width:560px;margin:0 auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:18px 20px;font-size:13px;}
  .ck[data-pos="br"]{left:16px;right:16px;}
  .ck-x{top:12px;right:12px;}
  .ck-btn{padding:0 12px;}
}
@media print{ .ck{display:none !important;} }

/* ---------- 13. Apparitions au défilement : chaque [data-rv] reste caché jusqu'à son arrivée à l'écran (commun.js).
   Sans script (classe .js absente), tout reste visible. ---------- */
.rv-ln{display:inline-block;vertical-align:top;box-sizing:border-box;width:calc(100% + .16em);overflow:hidden;padding:.1em .08em .3em;margin:-.1em -.08em -.3em;}
.rv-li{display:inline-block;transform-origin:0 100%;}
.js [data-rv]:not(.rv-done){opacity:0 !important;}

/* ---------- 14. Mobile (≤ 767 px) : mémoire et fluidité — pas de halos animés, animations en pause hors écran ---------- */
@media (max-width:767px){
  :root{--section:80px;--gutter:24px;--hero-top-m:120px;}
  /* pas de flou d'arrière-plan sur mobile (mémoire des téléphones) */
  *, *::before, *::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  .bd-glow{--s:var(--sm, 520px);animation:none !important;will-change:auto !important;}
  /* logo de l'appel final */
  img[data-rv="logo"]{width:349.6px !important;max-width:68vw !important;}
  .m-off, .m-off *, .m-off *::before, .m-off *::after{animation-play-state:paused !important;}
}

/* ---------- 15. Grands écrans : toute la page est agrandie d'un seul facteur (× 4/3 dès 2000 px, × 1,4 dès 3000 px) ---------- */
@media (min-width:2000px){
  :root{--xl:1.333333;}
  html{zoom:var(--xl);}
  .page{min-height:calc(100vh / var(--xl));}
}
@media (min-width:3000px){
  /* le contenu reste dans une largeur utile d'environ 1600 px, centrée ; les fonds vont jusqu'aux bords */
  :root{--xl:1.4;--gutter:max(64px, calc((100vw / var(--xl) - 1600px) / 2));}
}

/* ---------- « Réduire les animations » : tout est figé ou immédiat ---------- */
@media (prefers-reduced-motion: reduce){
  .yc-grad, .yc-badge:hover .yc-badge-text, .hero-cta::before, .hero-cta-fill, .hero-cta-arrow::after, .bd-glow,
  .yc-mail:hover .yc-mail-t, .yc-mail:focus-visible .yc-mail-t, .yc-mail:hover .yc-mail-t::after, .yc-mail:focus-visible .yc-mail-t::after,
  .btn-nav:hover, .btn-nav:focus-visible, .nav-drop > a.nav-drop-cta:hover, .btn-nav.is-press, .nav-drop > a.nav-drop-cta.is-press{animation:none !important;}
  .ycm{display:none;}
  .hero-cta > .hero-cta-label{background-image:none;-webkit-text-fill-color:currentColor;}
  .yc-mail-tip, .nav-lang-pop, .nav-lang-chev, .ftc-links > a, .ftc-links > button, .ft-soc a{transition:none !important;}
  .nav-shell{transition:opacity .3s ease;}
  .nav-shell.is-hidden{transform:none;}
  .nav-card, .nav-drop, .nav-drop > a, .nav-bars i, .nav-drop-lang{transition:none !important;}
  .ck{transition:opacity .3s ease;transform:none;}
  .js [data-rv]:not(.rv-done){opacity:1 !important;}
}

/* =====================================================================================================================
   Ajout du site (demande de Yassine) — menu déroulant tablette et mobile, sans numéros : pages en grande typographie
   (Nohemi), filets fins, flèche discrète ; page en cours en dégradé Bleu YC → Or YC avec un point Or ; halo bleu et or
   dans le fond du panneau ; langue sur une seule ligne ; bouton Contact doré avec sa flèche.
   ===================================================================================================================== */
@media (max-width:1200px){
  .nav-drop{gap:0; padding:10px 10px 12px;
    background:radial-gradient(120% 70% at 0% 0%, rgba(110,193,228,0.10), transparent 60%),
               radial-gradient(90% 60% at 100% 100%, rgba(217,169,79,0.08), transparent 60%),
               linear-gradient(170deg, #151A1F 0%, #0A0D10 100%);}
  .nav-drop > a:not(.nav-drop-cta){position:relative; justify-content:space-between; gap:12px; padding:15px 14px 15px 18px; border-radius:var(--rayon-s);
    font-family:'Nohemi', sans-serif; font-size:26px; font-weight:300; line-height:1.1; letter-spacing:-0.01em; color:rgba(255,255,255,0.78);}
  .nav-drop > a:not(.nav-drop-cta) + a:not(.nav-drop-cta)::before{content:''; position:absolute; left:18px; right:14px; top:0; height:1px; background:rgba(255,255,255,0.07);}
  .nav-drop > a:not(.nav-drop-cta)::after{content:'→'; font-family:'Plus Jakarta Sans', sans-serif; font-size:16px; color:var(--muted);
    transform:translateX(-4px); opacity:.55; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease, color .3s ease;}
  .nav-drop > a:not(.nav-drop-cta):hover::after, .nav-drop > a:not(.nav-drop-cta):active::after{transform:none; opacity:1; color:var(--BleuYC);}
  .nav-drop > a.is-on{background:rgba(255,255,255,0.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);}
  .nav-drop > a.is-on + a::before, .nav-drop > a + a.is-on::before{opacity:0;}
  .nav-drop > a.is-on span{font-weight:500; background:var(--grad-yc); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
  .nav-drop > a.is-on::after{content:''; width:7px; height:7px; border-radius:50%; background:var(--GoldYC); opacity:1; transform:none; box-shadow:0 0 12px rgba(217,169,79,0.6);}
  /* langue : une seule ligne, libellé à gauche, choix à droite */
  .nav-drop-lang{grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; margin-top:10px; padding:14px 8px 4px 18px;}
  .nav-drop-lang-k{grid-column:auto; gap:10px; padding:0; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
  .nav-drop-lang-k i{min-width:0;}
  .nav-drop-lang-o{min-height:36px; padding:0 16px; font-size:13px;}
  /* Contact : bouton doré avec sa flèche */
  .nav-drop > a.nav-drop-cta{gap:10px; margin-top:14px; padding:17px 16px; font-size:13px; font-weight:600; letter-spacing:0.12em;}
  .nav-drop > a.nav-drop-cta::after{content:'→'; font-size:16px; letter-spacing:0; transition:transform .4s cubic-bezier(.22,1,.36,1);}
  .nav-drop > a.nav-drop-cta:hover::after{transform:translateX(3px);}
}
@media (max-width:767px){
  .nav-drop > a:not(.nav-drop-cta){font-size:24px; padding:14px 12px 14px 16px;}
  .nav-drop > a:not(.nav-drop-cta) + a:not(.nav-drop-cta)::before{left:16px; right:12px;}
  .nav-drop-lang{padding-left:16px;}
}