/* =====================================================================================
   djolofdesign.com — design « Apple » (skill apple-design, 4/11/2026)
   Design par défaut depuis le 4/11/2026 (<html class="design-apple">) ; ?design=off affiche l'ancien design.
   Principes (HIG) : le contenu d'abord, couleur d'accent réservée aux actions principales,
   clair ET sombre : réglage de l'appareil, ou choix de l'interrupteur de la barre (classe ds-dark posée
   par le script du <head>, mémorisé dans le navigateur), verre uniquement sur la barre de
   navigation (couche fonctionnelle), contrastes ≥ 4,5:1, texte ≥ 12 px, mouvement réduit respecté.
   Couleur principale : le marron du logo Djolof (#6F4E2D clair / #D4A877 sombre). Signature : le point
   marron en fin de titre ; fond du hero : courbes de plume vectorielle animées (comme dans le logo).
   ===================================================================================== */

/* ---------- Jetons : clair (par défaut) — marron Djolof, contrastes renforcés (4/11/2026) ---------- */
html.design-apple {
  --ds-canvas: 250 246 241;       /* #FAF6F1  fond : blanc légèrement marron */
  --ds-grouped: 242 234 224;      /* #F2EAE0  surfaces groupées (cartes, sections) */
  --ds-fill: 232 220 205;         /* #E8DCCD  champs, surfaces actives */
  --ds-label: 20 14 9;            /* #140E09  texte principal   19,2:1 */
  --ds-secondary: 61 49 40;       /* #3D3128  texte secondaire  12,6:1 */
  --ds-tertiary: 90 75 63;        /* #5A4B3F  texte tertiaire    8,4:1 (6,3 sur champ) */
  --ds-separator: 203 191 177;    /* #CBBFB1  séparateurs, bords de cartes */
  --ds-accent: 111 78 45;         /* #6F4E2D  marron du logo : actions principales 7,5:1 */
  --ds-accent-2: 138 100 64;      /* #8A6440 */
  --ds-on-accent: 255 255 255;    /* texte sur accent            7,5:1 */
  --ds-dot: 111 78 45;            /* le point signature */
  --ds-nav: 250 246 241;
}
/* ---------- Jetons : sombre (appareil ou interrupteur → classe ds-dark) ---------- */
  html.design-apple.ds-dark {
    --ds-canvas: 15 11 8;         /* #0F0B08  noir chaud */
    --ds-grouped: 27 21 16;       /* #1B1510 */
    --ds-fill: 40 32 25;          /* #282019 */
    --ds-label: 248 243 237;      /* #F8F3ED  17,8:1 */
    --ds-secondary: 211 199 186;  /* #D3C7BA  11,8:1 */
    --ds-tertiary: 172 157 142;   /* #AC9D8E   7,4:1 */
    --ds-separator: 64 52 42;     /* #40342A */
    --ds-accent: 212 168 119;     /* #D4A877  marron clair (caramel)  9,0:1 */
    --ds-accent-2: 190 145 98;
    --ds-on-accent: 26 15 5;      /* #1A0F05 sur accent 8,7:1 */
    --ds-dot: 212 168 119;
    --ds-nav: 15 11 8;
  }
/* Contraste renforcé demandé par l'utilisateur */
@media (prefers-contrast: more) {
  html.design-apple { --ds-secondary: 40 31 24; --ds-tertiary: 55 44 35; --ds-separator: 140 124 108; }
}
@media (prefers-contrast: more) {
  html.design-apple.ds-dark { --ds-secondary: 232 224 215; --ds-tertiary: 214 204 192; --ds-separator: 120 104 90; }
}

/* ---------- Base ---------- */
html.design-apple body {
  background: rgb(var(--ds-canvas)) !important;
  color: rgb(var(--ds-label)) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
html.design-apple h1, html.design-apple h2, html.design-apple h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: rgb(var(--ds-label));
}
html.design-apple h1 { font-weight: 700; line-height: 1.05 !important; }
html.design-apple ::selection { background: rgb(var(--ds-accent) / .22); }

/* Le contenu d'abord : pas d'écran de chargement */
html.design-apple #premium-loader { display: none !important; }

/* ---------- Signature : le point du logo ---------- */
/* Fin du titre principal de chaque page */
html.design-apple main h1:first-of-type::after,
html.design-apple section h1::after {
  content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em;
  border-radius: 50%; background: rgb(var(--ds-dot)); vertical-align: baseline;
}
/* Logos image (public/images/brand/, préparés par outils/logos.php) */
html.design-apple .ds-logo, html.design-apple .ds-logo img { display: block; height: 40px; width: auto; }
html.design-apple .ds-footer-brand { display: flex; align-items: center; gap: 12px; }
html.design-apple .ds-footer-brand img { display: block; height: 56px; width: auto; }
html.design-apple .ds-footer-brand > img { height: 72px; }
/* Le mot mis en avant du titre : couleur pleine au lieu du dégradé */
html.design-apple .bg-clip-text.text-transparent {
  background: none !important; color: rgb(var(--ds-accent)) !important; -webkit-text-fill-color: currentColor;
}

/* ---------- Navigation : seule couche translucide (HIG, matériaux) ---------- */
html.design-apple body > nav.fixed, html.design-apple nav.fixed.top-0 {
  background: rgb(var(--ds-nav) / .72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(var(--ds-separator)) !important; box-shadow: none !important;
}
html.design-apple nav.fixed .h-20 { height: 3.5rem; }                 /* barre plus fine */
html.design-apple nav.fixed .text-xl, html.design-apple nav.fixed .md\:text-2xl { font-size: 1.125rem !important; }
html.design-apple nav.fixed a.text-sm { font-weight: 500 !important; }
html.design-apple nav .border-b-2.border-primary { border-bottom: 0 !important; position: relative; }
html.design-apple nav .border-b-2.border-primary::after {        /* onglet actif : le point */
  content: ""; position: absolute; left: 50%; bottom: -.55rem; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: rgb(var(--ds-dot));
}
@media (prefers-reduced-transparency: reduce) {
  html.design-apple nav.fixed.top-0 { background: rgb(var(--ds-nav)) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Fond animé de l'accueil : courbes de plume (logo Djolof) ---------- */
html.design-apple #premium-hero-bg {
  background:
    radial-gradient(70% 60% at 50% 0%, rgb(var(--ds-accent) / .16), transparent 72%),
    radial-gradient(50% 45% at 85% 90%, rgb(var(--ds-accent) / .10), transparent 70%),
    rgb(var(--ds-canvas)) !important;
}
html.design-apple #premium-hero-bg > :not(.ds-hero-anim) { display: none !important; }
html.design-apple [class*="animate-pulse"] { animation: none !important; }
html.design-apple .ds-hero-anim, html.design-apple .ds-hero-anim svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Halo du texte : les courbes s'effacent derrière le titre pour garder le contraste */
html.design-apple .ds-hero-anim {
  -webkit-mask-image: radial-gradient(46% 40% at 50% 50%, rgb(0 0 0 / .25), #000 75%);
          mask-image: radial-gradient(46% 40% at 50% 50%, rgb(0 0 0 / .25), #000 75%);
}
html.design-apple .ds-curve { fill: none; stroke: rgb(var(--ds-accent)); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: ds-draw 3.2s cubic-bezier(.4,0,.2,1) forwards; }
html.design-apple .ds-c1 { opacity: .55; }
html.design-apple .ds-c2 { opacity: .35; animation-delay: .5s; stroke-width: 2; }
html.design-apple .ds-c3 { opacity: .25; animation-delay: 1s; stroke-width: 1.5; }
html.design-apple .ds-node { opacity: 0; animation: ds-fade .6s ease-out forwards; animation-delay: 2.4s; }
html.design-apple .ds-n2 { animation-delay: 2.9s; }
html.design-apple .ds-node line { stroke: rgb(var(--ds-accent) / .6); stroke-width: 1.5; }
html.design-apple .ds-node rect { fill: rgb(var(--ds-canvas)); stroke: rgb(var(--ds-accent) / .75); stroke-width: 2; }
html.design-apple .ds-node .ds-anchor { fill: rgb(var(--ds-accent)); stroke: none; }
html.design-apple .ds-n2 { opacity: 0; }
html.design-apple .ds-float { animation: ds-float 16s ease-in-out infinite alternate; transform-box: view-box; }
html.design-apple .ds-f2 { animation-duration: 21s; animation-direction: alternate-reverse; }
html.design-apple .ds-f3 { animation-duration: 26s; }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }
@keyframes ds-fade { to { opacity: 1; } }
@keyframes ds-float { from { transform: translate(0, 0); } to { transform: translate(-28px, 22px); } }
@media (max-width: 767px) { html.design-apple .ds-hero-anim svg { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  html.design-apple .ds-curve { animation: none !important; stroke-dashoffset: 0; }
  html.design-apple .ds-node { animation: none !important; opacity: 1; }
  html.design-apple .ds-float { animation: none !important; }
}

/* ---------- Cartes : surfaces pleines, sans verre ni lueur (pas de verre dans le contenu) ---------- */
html.design-apple .glass-panel, html.design-apple .glass-card {
  background: rgb(var(--ds-grouped)) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgb(var(--ds-separator)) !important;
}
html.design-apple [class*="rounded-xl"], html.design-apple [class*="rounded-2xl"] { border-radius: 18px; }
html.design-apple [class*="rounded-3xl"] { border-radius: 24px; }
html.design-apple [class*="shadow-[0_0"], html.design-apple [class*="shadow-[0_10px"],
html.design-apple [class*="shadow-[0_20px"], html.design-apple [class*="hover:shadow-[0_"]:hover,
html.design-apple [class*="drop-shadow-["] { box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06) !important; filter: none !important; }
html.design-apple.ds-dark [class*="shadow-[0_0"], html.design-apple.ds-dark [class*="shadow-[0_10px"], html.design-apple.ds-dark [class*="shadow-[0_20px"] { box-shadow: none !important; }
html.design-apple [class*="blur-[100px]"], html.design-apple [class*="blur-[120px]"], html.design-apple [class*="blur-3xl"].absolute { display: none !important; }

/* ---------- Boutons : forme pilule, état pressé (HIG, boutons) ---------- */
html.design-apple a.bg-primary, html.design-apple button.bg-primary, html.design-apple .bg-\[\#d0bcff\] {
  background: rgb(var(--ds-accent)) !important; color: rgb(var(--ds-on-accent)) !important;
  border-radius: 980px !important; font-weight: 600 !important;
}
html.design-apple a.bg-primary:hover, html.design-apple button.bg-primary:hover { filter: brightness(1.08); }
html.design-apple a.bg-primary:active, html.design-apple button.bg-primary:active,
html.design-apple a.border-2:active { transform: scale(.98); }
html.design-apple a.border-2.border-outline-variant\/50 {
  border-width: 1px !important; border-color: rgb(var(--ds-separator)) !important; border-radius: 980px !important;
  color: rgb(var(--ds-accent)) !important; font-weight: 600 !important;
}
html.design-apple :focus-visible { outline: 3px solid rgb(var(--ds-accent) / .55) !important; outline-offset: 2px; }

/* ---------- Petits textes : 12 px minimum, majuscules plus lisibles ---------- */
html.design-apple .text-\[10px\], html.design-apple .text-\[9px\], html.design-apple .text-\[11px\] { font-size: 12px !important; }
html.design-apple .tracking-widest { letter-spacing: .06em !important; }
html.design-apple .text-xs { font-size: 13px !important; }
html.design-apple .text-outline-variant, html.design-apple [class*="text-outline-variant/"] { color: rgb(var(--ds-tertiary)) !important; }

/* ---------- Couleurs écrites en dur dans les vues -> jetons ---------- */
html.design-apple .text-\[\#d0bcff\], html.design-apple .text-\[\#8b5cf6\], html.design-apple .text-\[\#8B5CF6\] { color: rgb(var(--ds-accent)) !important; }
html.design-apple .text-\[\#94a3b8\] { color: rgb(var(--ds-secondary)) !important; }
html.design-apple .text-\[\#3c0091\] { color: rgb(var(--ds-on-accent)) !important; }
html.design-apple .hover\:text-white:hover { color: rgb(var(--ds-label)) !important; }
html.design-apple .text-white:not(.bg-\[\#7c3aed\] *):not([class*="bg-black"] *):not(.absolute *) { color: rgb(var(--ds-label)); }
html.design-apple .bg-\[\#7c3aed\], html.design-apple .bg-\[\#8B5CF6\], html.design-apple .bg-\[\#8b5cf6\] { background-color: rgb(var(--ds-accent)) !important; color: rgb(var(--ds-on-accent)) !important; }
html.design-apple .bg-\[\#7c3aed\] *, html.design-apple .bg-\[\#7c3aed\].text-white { color: rgb(var(--ds-on-accent)) !important; }
html.design-apple .bg-\[\#0f141e\], html.design-apple .bg-\[\#040C18\], html.design-apple .bg-\[\#051424\] { background-color: rgb(var(--ds-canvas)) !important; }
html.design-apple .bg-\[\#1a2235\], html.design-apple .bg-\[\#273647\] { background-color: rgb(var(--ds-grouped)) !important; }
html.design-apple .border-\[\#8b5cf6\], html.design-apple .focus\:border-\[\#8b5cf6\]:focus { border-color: rgb(var(--ds-accent)) !important; }
html.design-apple [class*="border-[rgba(255,255,255"], html.design-apple .border-\[rgba\(255\2c 255\2c 255\2c 0\.1\)\] { border-color: rgb(var(--ds-separator)) !important; }
html.design-apple .text-\[rgba\(255\2c 255\2c 255\2c 0\.1\)\] { color: rgb(var(--ds-separator)) !important; }

/* Champs de formulaire : surfaces système */
html.design-apple input:not([type=checkbox]):not([type=radio]), html.design-apple textarea, html.design-apple select {
  background-color: rgb(var(--ds-fill)) !important; color: rgb(var(--ds-label)) !important;
  border-color: transparent !important; border-radius: 12px !important;
}
html.design-apple input::placeholder, html.design-apple textarea::placeholder { color: rgb(var(--ds-tertiary)) !important; opacity: 1; }
html.design-apple input:focus, html.design-apple textarea:focus, html.design-apple select:focus {
  box-shadow: 0 0 0 3px rgb(var(--ds-accent) / .35) !important; border-color: rgb(var(--ds-accent)) !important;
}

/* Pied de page */
html.design-apple footer { background: rgb(var(--ds-grouped)) !important; border-top: 1px solid rgb(var(--ds-separator)) !important; }


/* Texte posé sur une photo (cartes projets) : voile sombre fixe + texte blanc, dans les deux modes
   (le texte reste lisible quelle que soit l'image, comme les vignettes d'Apple). */
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 {
  background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .45) 38%, transparent 70%) !important;
  opacity: 1 !important;
}
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 ~ .absolute.bottom-0 h3 { color: #fff !important; }
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 > h4,
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 > p { color: #fff !important; }
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 ~ .absolute.bottom-0 .text-primary { color: #fff !important; }
html.design-apple .bg-gradient-to-t.from-surface.via-surface\/40 ~ .absolute.bottom-0 .bg-primary\/20 {
  background: rgb(255 255 255 / .18) !important; border-color: rgb(255 255 255 / .3) !important;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html.design-apple *, html.design-apple *::before, html.design-apple *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.design-apple .reveal-section { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================================
   4/11/2026 (v3) — demandes du propriétaire : interrupteur clair/sombre, partenaires,
   sections marron à motifs, textes peu lisibles.
   ===================================================================================== */

/* ---------- Interrupteur clair / sombre (barre du haut) ---------- */
html.design-apple .ds-only-dark { display: none !important; }
html.design-apple.ds-dark .ds-only-dark { display: inline-block !important; }
html.design-apple.ds-dark .ds-only-light { display: none !important; }
html.design-apple .ds-logo img.ds-only-dark { display: none !important; }
html.design-apple.ds-dark .ds-logo img.ds-only-dark { display: block !important; }
html.design-apple .ds-theme-switch {
  position: relative; flex: none; width: 52px; height: 30px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgb(var(--ds-fill)); border: 1px solid rgb(var(--ds-separator)); transition: background-color .25s ease;
}
html.design-apple .ds-theme-switch::before { content: ""; position: absolute; inset: -7px; }   /* zone de toucher 44 px */
html.design-apple .ds-theme-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ds-canvas)); color: rgb(var(--ds-accent)); box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
html.design-apple .ds-theme-knob .material-symbols-outlined { font-size: 16px !important; line-height: 1; }
html.design-apple.ds-dark .ds-theme-switch { background: rgb(var(--ds-accent)); border-color: transparent; }
html.design-apple.ds-dark .ds-theme-knob { transform: translateX(22px); background: rgb(var(--ds-on-accent)); }

/* ---------- Logos partenaires : bandeau papier clair dans les deux modes ----------
   Les logos sont foncés ou en couleur : un fond clair les fait tous ressortir, même en mode sombre.
   Comme avant : gris et atténués (détails visibles), couleurs d'origine au survol. Pas de pastille. */
html.design-apple .ds-partners {
  --ds-canvas: 212 168 119; --ds-grouped: 212 168 119; --ds-label: 26 15 5; --ds-secondary: 42 27 13;
  background: rgb(212 168 119) !important;   /* #D4A877 caramel ; titre #2A1B0D 8,7:1 */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: transparent !important;
}
html.design-apple.ds-dark .ds-partners { border-color: transparent !important; }
html.design-apple .ds-partners img.grayscale { filter: grayscale(1) sepia(1) saturate(1.6) brightness(.42) contrast(1.25) !important; opacity: .9 !important;   /* logos marron foncé */ }
html.design-apple .ds-partners img.grayscale:hover,
html.design-apple .ds-partners a:focus-visible img.grayscale { filter: none !important; opacity: 1 !important; }

/* ---------- Sections marron à motifs : Core Competencies, Client Feedback, Project Archives ---------- */
/* Motif : la plume vectorielle du logo (courbe, point d'ancrage plein, poignées creuses), en diagonale */
html.design-apple .ds-brun { position: relative; isolation: isolate; }
html.design-apple .ds-brun::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: rgb(var(--ds-motif, var(--ds-accent)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='black'%3E%3Cpath d='M0 160C60 140 100 20 160 0' stroke-width='1.6'/%3E%3Cpath d='M57 112L103 48' stroke-width='1'/%3E%3Crect x='76' y='76' width='8' height='8' fill='black' stroke='none'/%3E%3Crect x='53.5' y='108.5' width='7' height='7' stroke-width='1.2'/%3E%3Crect x='99.5' y='44.5' width='7' height='7' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='132' cy='132' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='black'%3E%3Cpath d='M0 160C60 140 100 20 160 0' stroke-width='1.6'/%3E%3Cpath d='M57 112L103 48' stroke-width='1'/%3E%3Crect x='76' y='76' width='8' height='8' fill='black' stroke='none'/%3E%3Crect x='53.5' y='108.5' width='7' height='7' stroke-width='1.2'/%3E%3Crect x='99.5' y='44.5' width='7' height='7' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='132' cy='132' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
  opacity: .13;
}
/* Clair : îlot marron (jetons propres à la section, contrastes calculés) */
html.design-apple:not(.ds-dark) .ds-brun {
  --ds-canvas: 100 70 40;       /* #644628 fond de la section */
  --ds-grouped: 85 58 32;       /* #553A20 cartes */
  --ds-fill: 74 50 27;          /* #4A321B champs, pastilles */
  --ds-label: 255 255 255;      /* blanc       8,6:1 sur la section */
  --ds-secondary: 243 230 214;  /* #F3E6D6     7,0:1 */
  --ds-tertiary: 230 213 193;   /* #E6D5C1     6,0:1 */
  --ds-separator: 126 93 60;    /* #7E5D3C */
  --ds-accent: 243 217 181;     /* #F3D9B5 crème caramel 6,3:1 */
  --ds-accent-2: 230 196 150;
  --ds-on-accent: 58 38 20;     /* #3A2614 sur crème 10,5:1 */
  --ds-dot: 243 217 181;
  --ds-motif: 243 217 181;
  background: radial-gradient(80% 60% at 15% 0%, rgb(255 255 255 / .07), transparent 70%), rgb(100 70 40) !important;
  border-color: transparent !important; color: rgb(var(--ds-label));
}
html.design-apple:not(.ds-dark) .ds-brun::before { opacity: .16; }
/* Sombre : fond groupé + motif caramel discret */
html.design-apple.ds-dark .ds-brun { background: rgb(var(--ds-grouped)) !important; }
html.design-apple.ds-dark .ds-brun::before { opacity: .08; }
/* Les fondus latéraux du carrousel ne servent plus sur un fond à motifs */
html.design-apple .ds-brun .bg-gradient-to-r.from-surface-container-lowest,
html.design-apple .ds-brun .bg-gradient-to-l.from-surface-container-lowest { display: none !important; }
/* Project Archives est dans la colonne de la page : boîte arrondie */
html.design-apple .ds-brun-boite { padding-left: clamp(1.25rem, 4vw, 3.5rem) !important; padding-right: clamp(1.25rem, 4vw, 3.5rem) !important; border-radius: 32px; overflow: hidden; }

/* ---------- Page CV : motif de fond sur toute la page ---------- */
html.design-apple body:has(.ds-cv)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: rgb(var(--ds-accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='black'%3E%3Cpath d='M0 220C82.5 192.5 137.5 27.5 220 0' stroke-width='1.6'/%3E%3Cpath d='M78.4 154L141.6 66' stroke-width='1'/%3E%3Crect x='106' y='106' width='8' height='8' fill='black' stroke='none'/%3E%3Crect x='74.9' y='150.5' width='7' height='7' stroke-width='1.2'/%3E%3Crect x='138.1' y='62.5' width='7' height='7' stroke-width='1.2'/%3E%3Ccircle cx='41.2' cy='41.2' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='181.5' cy='181.5' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat,
                linear-gradient(#000, rgb(0 0 0 / .35));
  -webkit-mask-composite: source-in;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='black'%3E%3Cpath d='M0 220C82.5 192.5 137.5 27.5 220 0' stroke-width='1.6'/%3E%3Cpath d='M78.4 154L141.6 66' stroke-width='1'/%3E%3Crect x='106' y='106' width='8' height='8' fill='black' stroke='none'/%3E%3Crect x='74.9' y='150.5' width='7' height='7' stroke-width='1.2'/%3E%3Crect x='138.1' y='62.5' width='7' height='7' stroke-width='1.2'/%3E%3Ccircle cx='41.2' cy='41.2' r='2' fill='black' stroke='none'/%3E%3Ccircle cx='181.5' cy='181.5' r='2' fill='black' stroke='none'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat,
                linear-gradient(#000, rgb(0 0 0 / .35));
          mask-composite: intersect;
  opacity: .12;
}
html.design-apple.ds-dark body:has(.ds-cv)::before { opacity: .09; }
/* CV : pastilles des outils (couleurs écrites en dur dans la vue) */
html.design-apple .chip { background: rgb(var(--ds-fill)) !important; border: 1px solid rgb(var(--ds-separator)) !important; color: rgb(var(--ds-label)) !important; }
html.design-apple .chip:hover { border-color: rgb(var(--ds-accent)) !important; color: rgb(var(--ds-accent)) !important; }
/* CV : panneaux pleins (la vue les redéfinit en verre bleuté) */
html.design-apple .ds-cv .glass-panel { background: rgb(var(--ds-grouped)) !important; }

/* ---------- Textes clairs écrits en dur ---------- */
html.design-apple .text-\[\#cbc3d7\] { color: rgb(var(--ds-secondary)) !important; }
html.design-apple .text-\[\#f8fafc\] { color: rgb(var(--ds-label)) !important; }

/* ---------- Listes déroulantes : une seule flèche ---------- */
html.design-apple select:has(+ .material-symbols-outlined) { background-image: none !important; }
html.design-apple select { background-position: right 1rem center !important; }

/* Cartes « Project Archives » (/portfolio) : la photo reste visible ; voile neutre court, seulement sous le texte */
html.design-apple .bg-gradient-to-t.from-surface-container-lowest.via-surface-container-lowest\/80 {
  background: linear-gradient(to top, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .78) 38%, rgb(0 0 0 / .4) 62%, rgb(0 0 0 / 0) 82%) !important;
}
html.design-apple a:has(> div > .bg-gradient-to-t.from-surface-container-lowest.via-surface-container-lowest\/80) { --ds-label: 255 255 255; --ds-secondary: 240 232 222; }
html.design-apple a:has(> div > .bg-gradient-to-t.from-surface-container-lowest.via-surface-container-lowest\/80) h3 { text-shadow: 0 1px 12px rgb(0 0 0 / .35); }

/* Mode clair : le bandeau des partenaires se fond dans le hero (même fond #FFF4E5, sans bord) */
html.design-apple:not(.ds-dark) #premium-hero-bg {
  background:
    radial-gradient(70% 60% at 50% 0%, rgb(var(--ds-accent) / .12), transparent 72%),
    radial-gradient(50% 45% at 85% 90%, rgb(var(--ds-accent) / .06), transparent 70%),
    rgb(255 244 229) !important;
}
html.design-apple:not(.ds-dark) .ds-partners {
  --ds-canvas: 255 244 229; --ds-grouped: 255 244 229;
  background: rgb(255 244 229) !important; border-color: transparent !important;
}