/*utilities.css – Utilitaires CSS*/
.title {
    font-weight: 900; 
}
.title .classic {
    font-weight: 300;
}
[data-font="Dear Joe"]{
  font-family: "Dear Joe",Helvetica,Arial,Sans-serif;
    font-size: 30px;
    line-height: 40px;
}
.round,
[data-rounded] {
  border-radius: 1rem;
}

[data-line-clamp] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-line-clamp="1"] { -webkit-line-clamp: 1; }
[data-line-clamp="2"] { -webkit-line-clamp: 2; }
[data-line-clamp="3"] { -webkit-line-clamp: 3; }

[data-fit="content"]{
  width: fit-content;
  height: fit-content;
}
[data-fit="min-content"]{
  width: min-content;
  height: min-content;
}
[data-fit="max-content"]{
  width: max-content;
  height: max-content;
}

/*à utiliser sur les images*/
[data-fit] {
    object-position: center;    
    height: 100%;
    width: 100%;
}
[data-fit=cover] {
    object-fit: cover;
}
[data-fit=fill] {
    object-fit: fill;
}
[data-fit=contain] {
    object-fit: contain;
}

[data-ratio=initial] {
    aspect-ratio: initial;
}
  
[class*="slave"] article p:first-of-type::first-letter {
  float: left;
  font-size: 4em;
  margin-right: .6rem;
  color: #523441;
  opacity: 0.5;
}
[data-text-stroke]{
    position: relative;
    --text-stroke: thin currentcolor;
    --text-fill-color: hsl(0deg 0% 0% / 0%);
}
[data-text-stroke]:before{
    content: attr(data-text-stroke);
    position: absolute; 
    top: -.5rem;
    left: initial;
    font-family: 'Barlow';
    font-size: medium;
    color: white;
    -webkit-text-stroke: var(--text-stroke);
    -webkit-text-fill-color: var(--text-fill-color);
}


.paper{
	background-color: #e5e5f7;
	opacity: 0.8;
	background-image:  linear-gradient(#444cf7 2px, transparent 2px), linear-gradient(90deg, #444cf7 2px, transparent 2px), linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(90deg, #444cf7 1px, #e5e5f7 1px);
	background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.polka{
	opacity: 0.8;
    background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px), radial-gradient(#444cf7 0.5px, #e5e5f700 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
.polka-2{
    opacity: 0.8;
    background-image: radial-gradient(#444cf7 0.5px, #e5e5f700 0.5px);
    background-size: 10px 10px;
}
.cubes {
  --s: 222px; /* control the size */
  --c1: #7f727b;
  --c2: #d6b4c2;
  --c3: #baa0ab;
  
  --_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%,#0000 75%;
  --_l1: linear-gradient(145deg,var(--_g));
  --_l2: linear-gradient( 35deg,var(--_g));
  background: 
    var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
    conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
    conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
    linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s)/3);
}
.cubes-2 {
  --s: 82px; /* control the size */
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;
  
  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
}
.leaf {
  --s: 50px; /* control the size */
  --c1:#F2F26F;
  --c2:#A0C55F;
  
  --c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
  background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0,
    repeating-linear-gradient(90deg,
      var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
      var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
}
.paint-streak{
    -webkit-mask-image: url(/assets/images/layout/paint-streak.svg);
    mask-image: url(/assets/images/layout/paint-streak.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
[data-has-color=orange] {
    color: rgb(244 168 0);
    background-color: #3C2B30;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #ffa000;
}