/* Cours Galantes : styles communs à toutes les pages du site. */
:root{
  --gris:#6B6B6B;
  --gris-clair:#A3A3A3;
  --vide:#F0F0F0;
  --oswald:'Oswald','Arial Narrow',sans-serif;
  /* Texte courant (body, pied de page) en Montserrat ; les titres gardent leur police. */
  --montserrat:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --bodoni:var(--montserrat);
  --ease:cubic-bezier(.2,.75,.15,1);
  --ease-rideau:cubic-bezier(.7,0,.2,1);
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#fff}
a{color:inherit}
a:hover{color:inherit}
dc-import,.cg sc-for,.cg sc-if{display:contents}
.cg,.cg *,.cg *::before,.cg *::after{box-sizing:border-box}
.cg h1,.cg h2,.cg h3,.cg p,.cg dl,.cg dd,.cg ul,.cg ol,.cg figure{margin:0}
.cg h1,.cg h2,.cg h3{font-family:var(--serif)}
.cg ul,.cg ol{padding:0;list-style:none}
.cg img{display:block;max-width:100%}
.cg ::selection{background:#000;color:#fff}
.cg-noir ::selection{background:#fff;color:#000}
.cg a:focus-visible,.cg button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Liens */
.cg-lien{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-underline-offset .3s var(--ease)}
.cg-lien:hover{text-underline-offset:.36em}
.cg-nav a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease)}
.cg-nav a:hover,.cg-nav a[aria-current="page"]{background-size:100% 1px}
.cg-menu a{text-decoration:none}
.cg-menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* Logo : Claire sur blanc, La Noire sur noir, deux cases de même hauteur */
.cg-logo{display:inline-grid;grid-auto-flow:column;font-family:var(--oswald);font-weight:400;font-size:13px;line-height:1;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.cg-logo span{display:block;padding:8px 8px 8px 11px}
.cg-logo span:first-child{background:#fff;color:#000;box-shadow:inset 0 0 0 1px #000}
.cg-logo span:last-child{background:#000;color:#fff}

/* Boutons */
.cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border:1px solid currentColor;font-family:var(--oswald);font-weight:400;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .25s,color .25s}
.cg-btn-noir{background:#000;color:#fff;border-color:#000}
.cg-btn-noir:hover{background:#fff;color:#000}
.cg-btn-blanc{background:#fff;color:#000;border-color:#fff}
.cg-btn-blanc:hover{background:#000;color:#fff}
.cg-fleche{display:inline-block;transition:transform .35s var(--ease)}
.cg-btn:hover .cg-fleche{transform:translateX(6px)}
.cg-menu-btn{display:none;align-items:center;min-height:44px;padding:0 14px;border:1px solid currentColor;background:transparent;color:inherit;font-family:var(--oswald);font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

/* Animations */
@keyframes cg-monte{from{transform:translateY(105%)}to{transform:none}}
@keyframes cg-apparait{from{opacity:0}to{opacity:1}}
@keyframes cg-rideau{from{transform:scaleX(0)}to{transform:none}}
@keyframes cg-rideau-v{from{transform:scaleY(0)}to{transform:none}}
@keyframes cg-devoile{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cg-couleur{from{filter:grayscale(1)}to{filter:grayscale(0)}}
@keyframes cg-tesselle{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.cg-ligne{display:block;overflow:hidden;padding-top:.05em}
.cg-monte{display:inline-block;animation:cg-monte 1s var(--ease) both}
.cg-apparait{animation:cg-apparait .9s ease both}
.cg-d1{animation-delay:.3s}.cg-d2{animation-delay:.45s}.cg-d3{animation-delay:.7s}.cg-d4{animation-delay:.9s}.cg-d5{animation-delay:1.1s}

/* Accueil : une moitié blanche (Claire), une moitié noire (La Noire) avec l'affiche */
.cg-split{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cg-moitie{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,4.5vh,48px) clamp(20px,4vw,56px)}
.cg-moitie-blanche{background:#fff;color:#000;padding-right:clamp(48px,6vw,96px)}
.cg-moitie-noire{isolation:isolate;color:#fff;padding-left:clamp(48px,6vw,96px)}
.cg-moitie-noire::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;transform-origin:100% 50%;animation:cg-rideau 1.1s var(--ease-rideau) both}
.cg-nom{font-family:var(--oswald);font-weight:400;font-size:clamp(13px,1.1vw,16px);letter-spacing:.42em;text-transform:uppercase;animation:cg-apparait .9s ease .7s both}
.cg-nom-claire{align-self:flex-end;margin-right:calc(-.42em - clamp(48px,6vw,96px))}
.cg-nom-noire{align-self:flex-start;margin-left:calc(0px - clamp(48px,6vw,96px))}
.cg-oeuvre{position:relative;flex:1 1 auto;min-height:0;width:100%;animation:cg-devoile 1.3s var(--ease-rideau) .7s both}
.cg-oeuvre img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:cg-couleur 2.2s ease 1.9s both}

/* Vernissage : le sol de carreaux cassés se pose morceau par morceau */
.cg-sol polygon{animation:cg-tesselle .7s var(--ease) .4s both}
/* Couleurs des carreaux, mesurées sur l'affiche : orange terre cuite, rouille, saumon, crème, gris clair, mauve */
.cg-sol polygon.t0{fill:#D07A45}
.cg-sol polygon.t1{fill:#B5483A}
.cg-sol polygon.t2{fill:#C89878}
.cg-sol polygon.t3{fill:#F2EBD9}
.cg-sol polygon.t4{fill:#D4D2C6}
.cg-sol polygon.t5{fill:#8A7A82}
.cg-sol polygon[fill-opacity="0.18"]{fill-opacity:.6}
.cg-sol polygon[fill-opacity="0.32"]{fill-opacity:.72}
.cg-sol polygon[fill-opacity="0.55"]{fill-opacity:.85}
.cg-sol .t1{animation-delay:.55s}.cg-sol .t2{animation-delay:.7s}.cg-sol .t3{animation-delay:.85s}.cg-sol .t4{animation-delay:1s}.cg-sol .t5{animation-delay:1.15s}

/* Portfolio : deux colonnes décalées */
.cg-colonnes{display:flex;align-items:flex-start;gap:clamp(32px,6vw,112px)}
.cg-colonne{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(64px,8vw,128px)}
.cg-colonne + .cg-colonne{padding-top:clamp(0px,12vw,180px)}

/* Au défilement, là où le navigateur sait le faire (Chrome, Edge, Safari 26) */
@supports (animation-timeline: view()){
  .cg-devoile{animation:cg-devoile linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .cg-sol{view-timeline:--sol block}
  .cg-sol polygon{animation:cg-tesselle linear both;animation-timeline:--sol;animation-range:entry 0% entry 55%}
  .cg-sol .t1{animation-range:entry 9% entry 64%}
  .cg-sol .t2{animation-range:entry 18% entry 73%}
  .cg-sol .t3{animation-range:entry 27% entry 82%}
  .cg-sol .t4{animation-range:entry 36% entry 91%}
  .cg-sol .t5{animation-range:entry 45% entry 100%}
}

/* Téléphone */
@media (max-width:760px){
  .cg-navlinks{display:none !important}
  .cg-menu-btn{display:inline-flex}
  .cg-split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .cg-moitie-blanche{padding-right:clamp(20px,4vw,56px)}
  .cg-moitie-noire{padding-left:clamp(20px,4vw,56px)}
  .cg-moitie-noire::before{transform-origin:50% 0;animation-name:cg-rideau-v}
  .cg-nom-claire{margin-right:0}
  .cg-nom-noire{margin-left:0;order:-1}
  .cg-oeuvre{min-height:240px}
  .cg-colonnes{flex-direction:column;gap:72px}
  .cg-colonne{display:contents}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cg *,.cg *::before,.cg *::after{animation:none !important;transition:none !important}
}