.cooked-project,
.projet-cooked {
  flex-direction: column;
  align-items: flex-start;
}
.projet-cooked {
  width: 100%;
  position: relative;
  background-color: var(--color-grey-11);
  overflow: hidden;
  display: flex;
  gap: 0.1px;
  line-height: normal;
  letter-spacing: normal;
}
.cooked-project {
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-150);
  color: var(--color-white-solid);
  font-family: K2D;
}
.cooked-project,
.header,
.header-parent {
  align-self: stretch;
  display: flex;
}
.header-parent {
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.header {
  backdrop-filter: blur(12px);
  background-color: var(--color-grey-11-85);
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-18) 35px var(--padding-18) var(--padding-36);
  gap: var(--gap-20);
  flex-shrink: 0;
  top: 0;
  z-index: 99;
  position: sticky;
  text-align: center;
  font-size: var(--font-size-11);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.ilan-bargain-accueil {
  height: 50px;
  width: 50px;
  position: relative;
  object-fit: cover;
  cursor: pointer;
}
.navigation-principale {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--item-spacing-xxs);
  text-align: left;
  font-size: var(--font-size-13);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.component-8 {
  align-self: stretch;
  border-radius: var(--br-999);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-7) var(--padding-16) 8.1px;
}
.text {
  position: relative;
  letter-spacing: var(--letter-spacing-0-13);
  line-height: var(--lh-20_2);
  font-weight: var(--font-weight-500);
  color: inherit;
  text-decoration: none;
}
.divheader-actions {
  gap: var(--item-spacing-8);
}
.component-9,
.divheader-actions,
.spanlang-text {
  display: flex;
  align-items: center;
}
.component-9 {
  height: var(--height-38);
  width: 38px;
  border-radius: var(--br-999);
  border: var(--border-1);
  box-sizing: border-box;
  justify-content: center;
}
.spanlang-text {
  flex-direction: column;
}
.text5 {
  position: relative;
  letter-spacing: var(--letter-spacing-0-44);
  font-weight: var(--font-weight-600);
}
.component-11 {
  height: var(--height-38);
  width: 38px;
  position: relative;
  border-radius: var(--br-999);
  border: var(--border-1);
  box-sizing: border-box;
}
.component-1 {
  position: absolute;
  top: 11px;
  left: 11px;
  width: 16px;
  height: var(--height-16);
  overflow: hidden;
}
.globe-icon,
.vector-icon {
  max-width: 100%;
  max-height: 100%;
}
.vector-icon {
  position: absolute;
  height: 33.13%;
  width: 33.13%;
  top: 33.13%;
  right: 33.75%;
  bottom: 33.75%;
  left: 33.13%;
  overflow: hidden;
}
.globe-icon {
  height: 83.13%;
  width: 83.13%;
  top: 8.13%;
  right: 8.75%;
  bottom: 8.75%;
  left: 8.13%;
  z-index: 1;
}
.burger-menu-icon,
.component-10,
.globe-icon {
  position: absolute;
  overflow: hidden;
}
.component-10 {
  top: 23px;
  left: 15px;
  width: 8px;
  height: 8px;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  opacity: 0;
  z-index: 2;
}
.burger-menu-icon {
  height: 75%;
  width: 75%;
  top: 12.5%;
  right: 12.5%;
  bottom: 12.5%;
  left: 12.5%;
  max-width: 100%;
  max-height: 100%;
  transform: rotate(90deg);
}
.case-hero {
  align-self: stretch;
  border-bottom: 1px solid var(--color-white-solid);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 160px var(--padding-36) 50px;
  gap: var(--item-spacing-m);
  flex-shrink: 0;
  max-width: 100%;
  z-index: 2;
  margin-top: -87px;
  position: relative;
}
.component-2 {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-10) var(--padding-20);
  background-color: transparent;
  border-radius: var(--br-999);
  display: flex;
  align-items: center;
  gap: var(--item-spacing-10);
}
.component-12 {
  height: var(--height-14);
  width: var(--width-14);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.vector-icon2 {
  position: absolute;
  height: 58.57%;
  width: 58.57%;
  top: 20.71%;
  right: 20.71%;
  bottom: 20.71%;
  left: 20.71%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.span {
  height: 20.1px;
  width: 107.5px;
  position: relative;
}
.text6 {
  position: absolute;
  top: -1px;
  left: 0;
  font-size: var(--font-size-13);
  line-height: var(--lh-20_2);
  font-weight: var(--font-weight-500);
  font-family: var(--font-family-Font-1);
  color: var(--color-grey-60);
  text-align: left;
  display: flex;
  align-items: center;
  width: 108.2px;
  text-decoration: none;
}
.cooked,
.titre {
  align-self: stretch;
}
.titre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cooked {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: var(--font-size-150);
  font-family: inherit;
}
.cooked2,
.i {
  letter-spacing: -3px;
  line-height: 150px;
}
.i {
  letter-spacing: -6px;
  font-weight: 500;
  color: var(--color-yellow-50);
}
.divcase-meta-bar,
.spancase-chip {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.divcase-meta-bar {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 var(--item-spacing-12);
  font-size: var(--item-spacing-12);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.spancase-chip {
  cursor: pointer;
  border: var(--stroke-weight-1) solid var(--color-yellow-50);
  padding: var(--padding-9) 13px var(--padding-9) var(--padding-14);
  background-color: var(--color-yellow-50);
  border-radius: var(--br-999);
  flex-direction: column;
}
.spancase-chip:hover {
  background-color: var(--color-gold-200);
  border: var(--stroke-weight-1) solid var(--color-gold-200);
  box-sizing: border-box;
}
.tude-de-cas {
  position: relative;
  font-size: var(--item-spacing-12);
  letter-spacing: var(--letter-spacing-0-48);
  line-height: var(--line-height-18-6);
  font-family: var(--font-family-Font-1);
  color: var(--color-grey-11);
  text-align: left;
}
.spancase-chip2 {
  align-self: stretch;
  border-radius: var(--br-999);
  border: var(--border-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-9) 13px var(--padding-9) var(--padding-14);
}
.identitvisuelle {
  position: relative;
  letter-spacing: var(--letter-spacing-0-48);
  line-height: var(--line-height-18-6);
  font-weight: var(--font-weight-500);
}
.spancase-chip3 {
  align-self: stretch;
  border-radius: var(--br-999);
  border: var(--border-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-9) var(--padding-15);
}
.detail-projet,
.texte-explicatif {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.detail-projet {
  align-self: stretch;
  border-top: 1px solid var(--color-white-solid);
  box-sizing: border-box;
  justify-content: space-between;
  padding: 48px var(--padding-0) var(--padding-0);
  gap: var(--gap-20);
  text-align: left;
  font-size: var(--line-height-17);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-3);
}
.texte-explicatif {
  justify-content: center;
}
.application-mobile-pour {
  width: 644px;
  position: relative;
  line-height: var(--lh-26_4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.detail-projet2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-40);
  max-width: 100%;
  font-size: var(--font-size-11);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.divreveal-block {
  height: 53.3px;
  width: var(--width-345_6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 1.3px;
  box-sizing: border-box;
  gap: var(--item-spacing-8);
  max-width: 100%;
}
.divval,
.rle {
  align-self: stretch;
}
.rle {
  position: relative;
  letter-spacing: var(--letter-spacing-1-98);
  line-height: var(--font-size-17);
  text-transform: uppercase;
}
.divval {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--font-size-17);
  color: var(--color-white-solid);
}
.contexte,
.uxui-designer {
  align-self: stretch;
  position: relative;
}
.uxui-designer {
  line-height: var(--lh-26_4);
  font-weight: var(--font-weight-500);
}
.contexte {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--padding-100) var(--padding-40);
  z-index: 2;
  margin-top: -0.4px;
}
.contexte,
.divchapter-head,
.divchapter-head-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.divchapter-head-parent {
  align-self: stretch;
  flex-direction: column;
  gap: var(--gap-50);
}
.divchapter-head {
  width: var(--width-1840);
  justify-content: space-between;
  gap: var(--gap-20);
  min-height: var(--min-h-100);
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-yellow-50);
  font-family: var(--font-family-Font-3);
}
.divchapter-num {
  height: 65.5px;
  width: var(--width-200);
  gap: 5.5px;
}
.divchapter-num,
.h2chapter-title,
.span2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.span2 {
  align-self: stretch;
  height: var(--height-38);
}
.h2chapter-title {
  height: var(--height-67_2);
  width: var(--width-1600);
  overflow: hidden;
  flex-shrink: 0;
  padding: var(--padding-5_1) var(--padding-0) var(--padding-6_1);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-56);
  color: var(--color-white-solid);
}
.objectifs-contraintes {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-68);
  line-height: var(--font-size-56);
  font-weight: var(--font-weight-6001);
  font-family: inherit;
}
.divprose,
.divprose-wrapper,
.p {
  display: flex;
  align-items: flex-start;
}
.divprose-wrapper {
  width: 1240px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divprose,
.p {
  flex-direction: column;
}
.divprose {
  justify-content: center;
  gap: var(--gap-15);
  max-width: var(--width-760);
}
.p {
  width: 760px;
}
.le-projet-est {
  align-self: stretch;
  position: relative;
  line-height: var(--line-height-26-4);
}
.pmuted {
  width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--fs-16);
  font-family: K2D;
}
.aprs-plusieurs-pistes {
  align-self: stretch;
  position: relative;
  line-height: var(--lh-26_4);
}
.divchapter-head-group,
.wireframe {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.wireframe {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  align-items: flex-start;
  padding: var(--padding-100) var(--padding-40);
  z-index: 12;
}
.divchapter-head-group {
  align-items: flex-end;
  gap: var(--gap-50);
}
.divchapter-head2 {
  width: var(--width-1840);
  height: 107.6px;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 107.56199645996094px;
  gap: var(--gap-40);
  overflow: auto;
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-yellow-50);
  font-family: var(--font-family-Font-3);
}
.divchapter-num2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 1;
  grid-row: 1;
}
.wireframes {
  position: relative;
  letter-spacing: var(--letter-spacing-2-52);
  line-height: var(--line-height-21-7);
  text-transform: uppercase;
  font-weight: var(--font-weight-6001);
}
.h2chapter-title2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-5_1) var(--padding-0) var(--padding-6_1);
  grid-column: 2;
  grid-row: 1;
  font-size: var(--font-size-56);
  color: var(--color-white-solid);
}
.frame-wrapper {
  width: 1776px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
}
.divprose-parent,
.divprose2,
.frame-wrapper {
  display: flex;
  align-items: flex-start;
}
.divprose-parent {
  gap: var(--gap-100);
  max-width: 100%;
}
.divprose2 {
  width: 760px;
  flex-direction: column;
  gap: var(--gap-15);
  max-width: var(--width-760);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white-solid);
  font-family: K2D;
}
.component-17-parent {
  display: flex;
  align-items: center;
  gap: var(--gap-100);
  max-width: 100%;
}
.component-17-icon {
  height: 500px;
  width: 232px;
  border-radius: var(--br-18);
  object-fit: cover;
}
.persona {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--padding-100) var(--padding-40);
  z-index: 6;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white-solid);
  font-family: K2D;
}
.persona,
.persona-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.divchapter-head-container,
.divchapter-num3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divchapter-head-container {
  gap: var(--gap-50);
  max-width: 100%;
}
.divchapter-num3 {
  height: var(--height-44);
  width: var(--width-200);
}
.frame-container {
  width: var(--width-1840);
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
}
.frame-container,
.frame-div,
.frame-parent {
  display: flex;
  max-width: 100%;
}
.frame-parent {
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-29) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-40);
}
.frame-div {
  width: 1331px;
  align-items: flex-start;
}
.le-concept-sadresse-principal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.le-concept-sadresse {
  width: 924px;
  position: relative;
  line-height: var(--lh-26_4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.divmascot-poses,
.divmascot-poses-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divmascot-poses {
  width: 830px;
  height: 594px;
  border-radius: var(--br-24);
  background-color: var(--color-whitesmoke);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  padding: 21px var(--padding-18) 17px;
}
.persona-cooked-1-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-11);
}
.persona-cooked-1 {
  width: 770px;
  position: relative;
  border-radius: 50px;
  max-height: 100%;
  object-fit: cover;
}
.spanmascot-tag {
  cursor: pointer;
  border: 0;
  padding: var(--padding-5_5) var(--padding-11) var(--padding-5_5)
    var(--padding-12);
  background-color: var(--color-grey-11-851);
  border-radius: var(--br-999);
  display: flex;
  align-items: flex-start;
  z-index: 1;
  margin-top: -24px;
  position: relative;
}
.spanmascot-tag:hover {
  background-color: var(--color-dimgray);
}
.persona3 {
  height: var(--height-17);
  width: 59px;
  position: relative;
  font-size: var(--font-size-111);
  letter-spacing: var(--letter-spacing-1-1);
  line-height: var(--line-height-17);
  text-transform: uppercase;
  font-weight: var(--font-weight-6001);
  font-family: var(--font-family-Font-3);
  color: var(--color-white-solid);
  text-align: left;
  display: inline-block;
}
.da-couleurs,
.divchapter-head-parent2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.da-couleurs {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  align-items: flex-start;
  padding: var(--padding-100) var(--padding-40);
  z-index: 1;
}
.divchapter-head-parent2 {
  align-items: flex-end;
  gap: var(--gap-50);
}
.direction-artistique {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-2-52);
  line-height: var(--line-height-21-7);
  text-transform: uppercase;
  font-weight: var(--font-weight-6001);
}
.h2chapter-title4 {
  height: var(--height-67_2);
  width: var(--width-1600);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-5_1) var(--padding-0) var(--padding-6_1);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-561);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.des-couleurs-qui {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-12);
  line-height: var(--line-height-58-8);
  font-weight: var(--font-weight-700);
  font-family: inherit;
  flex-shrink: 0;
}
.frame-wrapper2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) 80px;
  box-sizing: border-box;
  max-width: 100%;
}
.divchapter-prose,
.divchapter-prose-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divchapter-prose-parent {
  width: 1520px;
  gap: var(--gap-40);
  max-width: 100%;
}
.divchapter-prose {
  width: 100%;
  max-width: var(--width-7601);
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.la-direction-artistique {
  width: 833px;
  position: relative;
  line-height: var(--line-height-26-4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.color-palette {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-30);
}
.couleur,
.divswatch {
  display: flex;
  align-items: flex-start;
}
.couleur {
  align-self: stretch;
  justify-content: center;
  gap: var(--gap-40);
  text-align: left;
  font-size: var(--font-size-28);
  color: var(--color-grey-11);
  font-family: var(--font-family-Font-1);
}
.divswatch {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  background-color: var(--color-floralwhite);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  position: relative;
  isolation: isolate;
}
.f9fafb,
.spanhex {
  align-self: stretch;
}
.spanhex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 0;
}
.f9fafb {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-0-28);
  line-height: var(--line-height-43-4);
  font-weight: var(--font-weight-700);
  font-family: inherit;
}
.spannamemargin {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-4) var(--padding-0) var(--padding-0);
  z-index: 1;
  font-size: var(--font-size-141);
}
.fond-blanc {
  align-self: stretch;
  position: relative;
  line-height: var(--line-height-21-71);
}
.spanratio {
  margin: 0 !important;
  position: absolute;
  top: 23px;
  left: 23px;
  border-radius: var(--br-999);
  background-color: var(--color-grey-11-85);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3_5) var(--padding-8) var(--padding-3_5)
    var(--padding-9);
  z-index: 2;
  font-size: var(--font-size-11);
  color: var(--color-white-solid);
}
.bg,
.divswatch2 {
  position: relative;
}
.bg {
  letter-spacing: var(--letter-spacing-0-88);
  line-height: var(--font-size-17);
  font-weight: var(--font-weight-600);
}
.divswatch2 {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  background-color: var(--color-gold-100);
  overflow: hidden;
  flex-shrink: 0;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  box-sizing: border-box;
  isolation: isolate;
}
.divswatch2,
.divswatch3,
.spanratio3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divswatch3 {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  background-color: var(--color-yellowgreen);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  position: relative;
  isolation: isolate;
  color: var(--color-white-solid);
}
.spanratio3 {
  margin: 0 !important;
  position: absolute;
  top: 23px;
  left: 23px;
  border-radius: var(--br-999);
  background-color: var(--color-white-85);
  padding: var(--padding-3_5) var(--padding-8) var(--padding-3_5)
    var(--padding-9);
  z-index: 2;
  font-size: var(--font-size-11);
  color: var(--color-grey-11);
}
.divswatch4 {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  background-color: var(--color-darkorange-200);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  position: relative;
  isolation: isolate;
  color: var(--color-white-solid);
}
.divswatch-parent,
.divswatch4,
.spanratio4 {
  display: flex;
  align-items: flex-start;
}
.spanratio4 {
  margin: 0 !important;
  position: absolute;
  top: 23px;
  left: 23px;
  border-radius: var(--br-999);
  background-color: var(--color-white-85);
  flex-direction: column;
  padding: var(--padding-3_5) var(--padding-10);
  z-index: 2;
  font-size: var(--font-size-11);
  color: var(--color-grey-11);
}
.divswatch-parent {
  justify-content: center;
  gap: var(--gap-40);
  text-align: left;
  font-size: var(--font-size-28);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divswatch5,
.divswatch6 {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  border: var(--border-1);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  position: relative;
  isolation: isolate;
}
.divswatch5 {
  background-color: var(--color-peachpuff);
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-grey-11);
}
.divswatch6 {
  background-color: var(--color-red-200);
}
.divswatch6,
.divswatch7,
.typographie {
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
}
.divswatch7 {
  height: var(--height-195);
  width: var(--width-195);
  border-radius: var(--br-18);
  background-color: var(--color-maroon);
  border: var(--border-1);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-22) var(--padding-22);
  position: relative;
  isolation: isolate;
}
.typographie {
  border-bottom: var(--border-1);
  padding: var(--padding-100) var(--padding-40);
  z-index: 2;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divchapter-head-parent3,
.divchapter-head5,
.typographie {
  align-self: stretch;
  display: flex;
  max-width: 100%;
}
.divchapter-head-parent3 {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-50);
}
.divchapter-head5 {
  height: var(--height-100);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-yellow-50);
  font-family: var(--font-family-Font-3);
}
.divchapter-num5,
.p-wrapper,
.p4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divchapter-num5 {
  height: var(--height-22);
  width: var(--width-200);
}
.p-wrapper,
.p4 {
  max-width: 100%;
}
.p-wrapper {
  width: var(--width-1600);
}
.p4 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) 0.6px;
  box-sizing: border-box;
  gap: var(--gap-40);
}
.trois-typographies-pour {
  width: 744px;
  position: relative;
  line-height: var(--line-height-26-4);
  display: flex;
  align-items: center;
}
.component-14-parent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-20);
  max-width: 100%;
}
.component-14 {
  height: 315px;
  width: 520px;
  border-radius: var(--br-22);
  background-color: var(--color-gray-100);
  border: var(--border-1);
  box-sizing: border-box;
  flex-direction: column;
  padding: 37px var(--padding-36);
  text-align: left;
  font-size: var(--font-size-111);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-3);
}
.component-14,
.component-14-inner,
.divtypo-spec-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.component-14-inner {
  align-self: stretch;
  height: 232px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0_1);
  box-sizing: border-box;
}
.divtypo-spec-parent {
  width: 446px;
  flex-direction: column;
  gap: var(--gap-10);
}
.display-titres {
  position: relative;
  letter-spacing: var(--letter-spacing-1-981);
  line-height: var(--line-height-17);
  text-transform: uppercase;
}
.divtypo-sample-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-40);
  font-size: var(--fs-60);
  color: var(--color-white-solid);
  font-family: var(--font-fredoka-one);
}
.fredoka-one {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: -1.28px;
  font-weight: 400;
  font-family: inherit;
}
.div,
.divtypo-name {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.div {
  font-size: var(--font-size-18);
  font-family: var(--font-family-Font-3);
}
.divtypo-name {
  padding: var(--padding-0) var(--padding-0) 0.9px;
}
.impact-visuel {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-0-18);
  line-height: var(--line-height-27-9);
  font-weight: var(--font-weight-6001);
}
.divtypo-desc {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--font-size-14);
  color: var(--color-grey-60);
}
.avec-ses-courbes {
  align-self: stretch;
  position: relative;
  line-height: var(--line-height-21);
}
.component-15-inner,
.divtypo-sample-group {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.component-15-inner {
  height: 221px;
  padding: 0.5px var(--padding-0) 0.6px;
  box-sizing: border-box;
  max-width: 100%;
}
.divtypo-sample-group {
  flex-direction: column;
  gap: var(--gap-40);
  font-size: var(--font-size-64);
  color: var(--color-white-solid);
  font-family: K2D;
}
.din-pro {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-28);
  line-height: var(--line-height-60-8);
  font-weight: 400;
  font-family: inherit;
}
.component-16,
.component-16-inner {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.component-16 {
  width: 520px;
  border-radius: var(--br-22);
  background-color: var(--color-gray-100);
  border: var(--border-1);
  flex-direction: column;
  padding: 35px var(--padding-36);
  text-align: left;
  font-size: var(--font-size-111);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-3);
}
.component-16-inner {
  align-self: stretch;
  height: 241px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0_1);
}
.chinehilla {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-28);
  line-height: var(--line-height-60-8);
  font-weight: var(--font-weight-400);
  font-family: inherit;
}
.divchapter-head-parent4,
.iconographie {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.iconographie {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  align-items: flex-start;
  padding: var(--padding-100) var(--padding-40);
  z-index: 5;
  text-align: left;
  font-size: var(--font-size-11);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.divchapter-head-parent4 {
  width: var(--width-1840);
  height: 1158px;
  align-items: flex-end;
  position: relative;
  isolation: isolate;
  gap: var(--gap-50);
}
.divchapter-head6,
.frame-wrapper3 {
  width: var(--width-1840);
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.divchapter-head6 {
  justify-content: space-between;
  gap: var(--gap-20);
  min-height: var(--min-h-100);
  z-index: 0;
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-yellow-50);
  font-family: var(--font-family-Font-3);
}
.frame-wrapper3 {
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) 24px;
  box-sizing: border-box;
}
.frame-group,
.iconography-design-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.frame-group {
  gap: var(--gap-40);
}
.iconography-design-wrapper {
  width: 1364px;
  text-align: left;
  font-size: var(--font-size-161);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-3);
}
.liconographie-a-t {
  width: 924px;
  position: relative;
  line-height: var(--line-height-26-41);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.piste-logo-parent {
  display: flex;
  align-items: flex-start;
  gap: 45px;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-11);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.piste-logo {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.component-3-parent {
  width: 378px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.component-3 {
  align-self: stretch;
  height: 224px;
  position: relative;
  border-radius: var(--br-25) var(--br-25) var(--br-0) var(--br-0);
  background-color: var(--color-whitesmoke);
  border-top: var(--border-11);
  border-right: var(--border-12);
  border-left: var(--border-13);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.pimentcooked-2-icon {
  position: absolute;
  top: 34px;
  left: 43px;
  width: 292px;
  height: 156px;
  object-fit: cover;
  flex-shrink: 0;
}
.divtrack-body,
.divtrack-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.divtrack-body {
  align-self: stretch;
  border-radius: var(--br-0) var(--br-0) var(--br-25) var(--br-25);
  background-color: var(--color-gray-100);
  border-right: var(--border-12);
  border-bottom: var(--border-2);
  border-left: var(--border-13);
  padding: var(--padding-28) var(--padding-29) var(--padding-26);
}
.divtrack-name {
  width: 318px;
}
.piments-jauge {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-0-88);
  line-height: var(--font-size-17);
  text-transform: uppercase;
}
.iconescooked-2 {
  position: absolute;
  top: 36px;
  left: 54px;
  width: 269px;
  height: 153px;
  object-fit: cover;
  flex-shrink: 0;
}
.piste-logo3 {
  width: 1306px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.component-33 {
  align-self: stretch;
  height: 373px;
  position: relative;
  border-radius: var(--br-25) var(--br-25) var(--br-0) var(--br-0);
  background-color: var(--color-whitesmoke);
  border-top: var(--border-11);
  border-right: var(--border-12);
  border-left: var(--border-13);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.mascottecooked-1-icon {
  position: absolute;
  top: 88px;
  left: 105px;
  width: 1153.1px;
  height: 198px;
  object-fit: cover;
}
.piste-logo4 {
  margin: 0 !important;
  position: absolute;
  top: 226px;
  left: 1228px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  z-index: 1;
  text-align: left;
  font-size: var(--font-size-11);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.component-34 {
  width: 468px;
  height: 373px;
  position: relative;
  border-radius: var(--br-25) var(--br-25) var(--br-0) var(--br-0);
  background-color: var(--color-whitesmoke);
  border-top: var(--border-11);
  border-right: var(--border-12);
  border-left: var(--border-13);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.marmittetransparantcooked-2-icon {
  position: absolute;
  height: calc(100% - 7px);
  top: 4px;
  bottom: 3px;
  left: 25px;
  max-height: 100%;
  width: 417px;
  object-fit: cover;
  flex-shrink: 0;
}
.divtrack-body4,
.logo {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.divtrack-body4 {
  width: 468px;
  border-radius: var(--br-0) var(--br-0) var(--br-25) var(--br-25);
  background-color: var(--color-gray-100);
  border-right: var(--border-12);
  border-bottom: var(--border-2);
  border-left: var(--border-13);
  padding: var(--padding-28) var(--padding-29) var(--padding-26);
}
.logo {
  align-self: stretch;
  border-bottom: var(--border-1);
  padding: var(--padding-100) var(--padding-40);
  z-index: 3;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divchapter-num7 {
  height: 87.3px;
  width: var(--width-200);
  gap: 5.3px;
}
.divchapter-num7,
.p-parent,
.p5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.p-parent {
  width: var(--width-1600);
  gap: var(--gap-40);
}
.p5 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) 0.6px;
}
.le-logo-est {
  position: relative;
  line-height: var(--line-height-26-4);
}
.piste-logo-wrapper {
  align-self: stretch;
  flex-wrap: wrap;
  align-content: flex-start;
}
.component-35,
.piste-logo-wrapper,
.piste-logo5 {
  display: flex;
  align-items: flex-start;
}
.piste-logo5 {
  width: 786px;
  flex-direction: column;
}
.component-35 {
  align-self: stretch;
  height: 500px;
  border-radius: var(--br-25) var(--br-25) var(--br-0) var(--br-0);
  background-color: var(--color-darkorange-100);
  border-top: var(--border-11);
  border-right: var(--border-12);
  border-left: var(--border-13);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  padding: 3px 64px 3.6px;
}
.logo-cooked-sur-fond-orange {
  width: 656px;
  position: relative;
  border-radius: 16px;
  max-height: 100%;
  object-fit: cover;
}
.divtrack-body5 {
  align-self: stretch;
  border-radius: var(--br-0) var(--br-0) var(--br-25) var(--br-25);
  background-color: var(--color-gray-100);
  border-right: var(--border-12);
  border-bottom: var(--border-2);
  border-left: var(--border-13);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-28) var(--padding-29) var(--padding-26);
  gap: var(--line-height-11);
  text-align: left;
  font-size: var(--font-size-26);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-3);
}
.le-logo-cooked,
.logo-cooked {
  align-self: stretch;
  position: relative;
}
.logo-cooked {
  margin: 0;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-0-52);
  line-height: var(--line-height-27-3);
  font-weight: var(--font-weight-6001);
  font-family: inherit;
}
.le-logo-cooked {
  line-height: var(--line-height-21-7);
}
.divchapter-head-parent6,
.publiciter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.publiciter {
  border-bottom: var(--border-1);
  box-sizing: border-box;
  padding: var(--padding-100) var(--padding-40);
  z-index: 7;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divchapter-head-parent6 {
  width: var(--width-1840);
  gap: var(--gap-50);
}
.verify-wrapper {
  width: 1404px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
}
.verify,
.verify-wrapper {
  display: flex;
  align-items: flex-start;
}
.pour-vrifier-la {
  height: 80px;
  width: 924px;
  position: relative;
  line-height: var(--line-height-26-4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.image-target,
.image-target-wrapper {
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.image-target-wrapper {
  width: var(--width-1840);
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-20) var(--padding-0)
    var(--padding-100);
  box-sizing: border-box;
}
.image-target {
  align-items: flex-end;
  gap: var(--gap-40);
}
.advertise-visuals {
  height: 517px;
  width: 700px;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-111);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-3);
}
.divmascot-poses2 {
  height: 517px;
  width: 700px;
  position: relative;
  border-radius: var(--br-24);
  background-color: var(--color-whitesmoke);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}
.spanmascot-tag2 {
  position: absolute;
  bottom: 19px;
  left: 19px;
  border-radius: var(--br-999);
  background-color: var(--color-grey-11-851);
  display: flex;
  align-items: flex-start;
  padding: var(--padding-5_5) var(--padding-11) var(--padding-5_5)
    var(--padding-12);
  white-space: nowrap;
  flex-shrink: 0;
}
.rseaux-sociaux {
  height: var(--height-17);
  width: 118px;
  position: relative;
  letter-spacing: var(--letter-spacing-1-1);
  line-height: var(--line-height-17);
  text-transform: uppercase;
  font-weight: var(--font-weight-6001);
  display: inline-block;
}
.cookedmocupsinstaetaffiche-1-icon {
  position: absolute;
  top: 39px;
  left: 92px;
  width: 515px;
  height: 440px;
  object-fit: cover;
  z-index: 1;
  flex-shrink: 0;
}
.divmascot-poses-container {
  height: 515px;
  width: 700px;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-111);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-3);
}
.divmascot-poses3 {
  border-radius: var(--br-24);
  background-color: var(--color-whitesmoke);
  border: var(--border-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 60px var(--padding-18) 17px;
  gap: 14px;
}
.panneau-cooked-1-wrapper {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-26) var(--padding-0) 25px;
}
.panneau-cooked-1-icon {
  width: 611.4px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.spanmascot-tag3 {
  border-radius: var(--br-999);
  background-color: var(--color-grey-11-851);
  display: flex;
  align-items: flex-start;
  padding: var(--padding-5_5) var(--padding-11) var(--padding-5_5)
    var(--padding-12);
}
.affiche-publicitaire {
  height: var(--height-17);
  width: 145px;
  position: relative;
  letter-spacing: var(--letter-spacing-1-1);
  line-height: var(--line-height-17);
  text-transform: uppercase;
  font-weight: var(--font-weight-6001);
  display: inline-block;
}
.component-36,
.vido {
  align-self: stretch;
  box-sizing: border-box;
}
.vido {
  border-bottom: var(--border-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-100) var(--padding-40);
  max-width: 100%;
  z-index: 4;
  text-align: left;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.component-36 {
  height: 500px;
  position: relative;
  border-radius: var(--br-25) var(--br-25) var(--br-0) var(--br-0);
  background-color: var(--color-chocolate);
  border-top: var(--border-11);
  border-right: var(--border-12);
  border-left: var(--border-13);
  overflow: hidden;
  flex-shrink: 0;
}
.demo-cooked-1 {
  position: absolute;
  height: calc(100% - 14px);
  top: 7.4px;
  bottom: 6.6px;
  left: 69px;
  width: 648px;
  flex-shrink: 0;
}
.interact-prototype {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-17);
  color: var(--color-grey-11);
  font-family: var(--font-family-Font-1);
}
.test-interactf {
  align-self: stretch;
  border-bottom: var(--border-1);
  box-sizing: border-box;
  padding: var(--padding-100) var(--padding-40);
  flex-shrink: 0;
  z-index: 1;
}
.frame-parent2,
.frame-section,
.test-interactf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}
.frame-parent2 {
  align-self: stretch;
  gap: 101px;
}
.frame-section {
  gap: var(--gap-50);
  text-align: left;
  font-size: var(--font-size-14);
  color: var(--color-yellow-50);
  font-family: var(--font-family-Font-3);
}
.divchapter-head10 {
  width: var(--width-1840);
  height: var(--height-100);
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 107.56199645996094px;
  gap: var(--gap-40);
  overflow: auto;
}
.h2chapter-title10 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-5_1) var(--padding-0) var(--padding-6_1);
  grid-column: 2;
  grid-row: 1;
  font-size: var(--font-size-561);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.plongez-dans-lexprience {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-12);
  line-height: var(--line-height-58-8);
  font-weight: var(--font-weight-700);
  font-family: inherit;
}
.div-wrapper,
.div4,
.divprose3 {
  display: flex;
  align-items: flex-start;
}
.div-wrapper {
  width: 1240px;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-16);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.div4,
.divprose3 {
  flex-direction: column;
}
.div4 {
  width: 760px;
  max-width: 100%;
}
.divprose3 {
  width: 100%;
  max-width: var(--width-760);
}
.iphone-cooked-test-page-2-parent {
  width: 1608px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  max-width: 100%;
}
.iphone-cooked-test-page-2,
.page-application {
  display: flex;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}
.iphone-cooked-test-page-2 {
  width: 425px;
  height: 866px;
  align-items: flex-start;
  padding: 6.8px 15.9px 7.2px;
  text-align: center;
  font-size: 17px;
  color: var(--color-white-solid);
  font-family: var(--font-sf-pro);
}
.page-application {
  height: 852px;
  width: 393px;
  border-radius: 40px;
  background-color: var(--color-white-solid);
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) 31px;
  gap: 129px;
  z-index: 0;
}
.iphone-background-icon {
  width: 100%;
  height: 854.6px;
  position: absolute;
  margin: 0 !important;
  right: 0;
  bottom: -2.6px;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 0;
}
.status-bar-parent {
  width: 393px;
  height: 561px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36.5px;
  z-index: 5;
  flex-shrink: 0;
}
.status-bar,
.time {
  height: 54px;
  display: flex;
  align-items: flex-start;
}
.status-bar {
  width: 393px;
  gap: 112px;
}
.time {
  width: 140.5px;
  padding: 18.4px 51.6px 13.6px 51.9px;
  box-sizing: border-box;
}
.time2 {
  height: var(--height-22);
  width: 37px;
  position: relative;
  line-height: var(--lh-22);
  font-weight: 600;
  display: inline-block;
}
.levels {
  height: 54px;
  width: 140.5px;
  display: flex;
  align-items: flex-end;
  padding: 23px var(--padding-30) var(--padding-18);
  box-sizing: border-box;
  gap: 7.4px;
}
.cellular-connection-icon {
  height: 12.2px;
  width: 19.2px;
  position: relative;
  z-index: 3;
}
.battery,
.wifi-icon {
  height: 12.3px;
  width: 17.1px;
  position: relative;
}
.battery {
  height: 13px;
  width: 27.3px;
  z-index: 1;
}
.border {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: calc(50% - 13.65px);
  border-radius: 4.3px;
  border: 1px solid var(--color-white-solid);
  box-sizing: border-box;
  width: 25px;
  opacity: 0.35;
}
.cap-icon {
  position: absolute;
  height: 31.54%;
  top: 36.92%;
  bottom: 31.54%;
  left: calc(50% + 12.35px);
  max-height: 100%;
  width: 1.3px;
}
.capacity {
  position: absolute;
  height: 69.23%;
  top: 15.38%;
  bottom: 15.38%;
  left: calc(50% - 11.65px);
  border-radius: 2.5px;
  background-color: var(--color-white-solid);
  width: 21px;
}
.app-icons-parent,
.frame-wrapper5 {
  height: 355px;
  display: flex;
  align-items: flex-start;
}
.frame-wrapper5 {
  width: 363px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 31px;
  box-sizing: border-box;
}
.app-icons-parent {
  width: 332px;
  position: relative;
  isolation: isolate;
}
.app-icons {
  height: 386px;
  width: 331px;
  position: absolute;
  margin: 0 !important;
  bottom: -31px;
  left: 0;
  object-fit: cover;
  z-index: 0;
  flex-shrink: 0;
}
.frame-parent3 {
  height: 355px;
  width: 332px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 0.4px;
  box-sizing: border-box;
  gap: 38.2px;
  z-index: 1;
  flex-shrink: 0;
}
.xapp-iconsfacetime-parent {
  width: 331.2px;
  height: var(--height-60);
  display: flex;
  align-items: flex-start;
  gap: 30.4px;
}
.xapp-iconsfacetime {
  border-radius: var(--br-12);
}
.xapp-iconsfacetime,
.xapp-iconspodcasts {
  height: var(--height-60);
  width: var(--width-60);
  position: relative;
  object-fit: cover;
}
.app-cooked,
.app-cooked-wrapper {
  height: 79px;
  display: flex;
  box-sizing: border-box;
}
.app-cooked-wrapper {
  width: 91px;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 31px;
  font-size: var(--fs-16);
  font-family: var(--font-sf-compact);
}
.app-cooked {
  width: var(--width-60);
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-65) var(--padding-0) var(--padding-0);
  position: relative;
  isolation: isolate;
  gap: 51px;
}
.notification {
  margin-top: -75px;
  margin-right: -11px;
  width: var(--width-24);
  height: var(--height-24);
  position: relative;
  flex-shrink: 0;
  z-index: 3;
}
.badge {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.badge2 {
  top: calc(50% - 12px);
  right: 0;
  border-radius: var(--br-100);
  background-color: var(--color-red-100);
  height: var(--height-24);
}
.app-logo-cooked-simple,
.badge2,
.number {
  width: 100%;
  position: absolute;
  left: 0;
}
.number {
  top: calc(50% - 9.5px);
  display: inline-block;
}
.app-logo-cooked-simple {
  height: var(--height-60);
  margin: 0 !important;
  top: 0;
  right: 0;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.app-cooked2 {
  width: var(--width-60);
  height: var(--height-14);
  position: relative;
  font-size: var(--fs-12);
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.app-logo-cooked-simple2,
.logo-elements {
  position: absolute;
  margin: 0 !important;
  flex-shrink: 0;
}
.logo-elements {
  width: 38.9px;
  height: 37.3px;
  top: 772.4px;
  left: 312.6px;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  z-index: 2;
}
.app-logo-cooked-simple2 {
  height: var(--height-60);
  width: var(--width-60);
  top: -11.4px;
  left: -10.6px;
  z-index: 0;
}
.group-icon {
  height: 37.3px;
  width: 38.9px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.container-fields,
.container-fields-wrapper {
  height: 131px;
  display: flex;
  align-items: flex-start;
}
.container-fields-wrapper {
  width: 361px;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  z-index: 3;
  flex-shrink: 0;
  font-size: var(--fs-12);
  font-family: var(--font-sfpro);
}
.container-fields {
  width: 341px;
  flex-direction: column;
  gap: 31px;
}
.search-field,
.search-field-wrapper,
.search-field2 {
  height: var(--height-30);
  display: flex;
  align-items: flex-start;
}
.search-field-wrapper {
  width: 203px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 125px;
  box-sizing: border-box;
}
.search-field,
.search-field2 {
  width: 78px;
}
.search-field2 {
  overflow: hidden;
  flex-shrink: 0;
  padding: var(--padding-7) var(--padding-10) var(--padding-7) var(--padding-11);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}
.dock-background {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(135.9px);
  border-radius: 35px;
  background-color: var(--color-gray-300);
  z-index: 0;
  flex-shrink: 0;
}
.search {
  height: var(--height-16);
  width: 57px;
  position: relative;
  line-height: 16px;
  font-weight: 600;
  display: inline-block;
  z-index: 1;
  flex-shrink: 0;
}
.phone-parent {
  width: 341px;
  height: 70px;
  display: flex;
  align-items: flex-end;
  gap: var(--gap-30);
  font-size: var(--fs-16);
  font-family: var(--font-sf-compact);
}
.dock-background-parent,
.safari-parent {
  height: var(--height-60);
  display: flex;
  align-items: flex-start;
}
.safari-parent {
  width: 197px;
  padding: var(--padding-0) 47px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-30);
}
.dock-background-parent {
  width: var(--width-60);
  position: relative;
  isolation: isolate;
}
.dock-background2 {
  height: 98px;
  width: 369px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 49px);
  left: -200px;
  backdrop-filter: blur(68px);
  border-radius: 41px;
  background-color: var(--color-gray-300);
  z-index: 0;
  flex-shrink: 0;
}
.messages-icon {
  height: var(--height-60);
  width: var(--width-60);
  position: relative;
  object-fit: cover;
  z-index: 1;
  flex-shrink: 0;
}
.notification-wrapper {
  height: 70px;
  width: var(--width-24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 46px;
  box-sizing: border-box;
}
.notification2 {
  width: var(--width-24);
  height: var(--height-24);
  position: relative;
}
.iphone-icon {
  height: 865.7px;
  width: 424.8px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
  flex-shrink: 0;
}
.divproto-fallback {
  align-self: stretch;
  height: 81.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12.1px;
  text-align: center;
  font-size: var(--item-spacing-12);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.si-le-prototype {
  position: relative;
  line-height: var(--line-height-18-6);
}
.component-37 {
  cursor: pointer;
  border: var(--stroke-weight-1) solid var(--color-gray-200);
  padding: var(--padding-14) 25px;
  background-color: transparent;
  border-radius: var(--br-999);
  display: flex;
  align-items: center;
  gap: var(--item-spacing-12);
}
.span5 {
  height: 20.1px;
  width: 185.8px;
  position: relative;
}
.hyperlink-phrase {
  position: absolute;
  top: -1px;
  left: 0;
  font-size: var(--font-size-13);
  letter-spacing: var(--letter-spacing-0-13);
  line-height: var(--lh-20_2);
  font-weight: var(--font-weight-600);
  font-family: var(--font-family-Font-1);
  color: var(--color-white-solid);
  text-align: left;
  display: flex;
  align-items: center;
  width: 186.1px;
  text-decoration: none;
}
.icon-redirect {
  position: absolute;
  height: 41.43%;
  width: 41.43%;
  top: 29.29%;
  right: 29.29%;
  bottom: 29.29%;
  left: 29.29%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.autres-projets,
.divother-projects-eyebrow-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.autres-projets {
  align-items: center;
  padding: var(--padding-100) var(--padding-40);
  box-sizing: border-box;
  gap: var(--gap-50);
  flex-shrink: 0;
  max-width: 100%;
  z-index: 2;
  margin-top: -0.2px;
  position: relative;
}
.divother-projects-eyebrow-parent {
  align-items: flex-start;
  gap: var(--gap-10);
  text-align: left;
  font-size: var(--font-size-11);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.divother-projects-eyebrow {
  align-self: stretch;
  height: var(--height-17);
  display: flex;
  align-items: flex-start;
}
.continuer-la-visite {
  height: var(--height-17);
  width: var(--width-1840);
  position: relative;
  letter-spacing: var(--letter-spacing-1-98);
  line-height: var(--font-size-17);
  text-transform: uppercase;
  font-weight: var(--font-weight-500);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.h2other-projects-title {
  align-self: stretch;
  height: 81px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-9);
  box-sizing: border-box;
  font-size: var(--font-size-72);
  color: var(--color-white-solid);
}
.autres-projets2 {
  margin: 0;
  height: 72px;
  width: var(--width-1840);
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-44);
  line-height: var(--font-size-72);
  font-weight: var(--font-weight-700);
  font-family: inherit;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.divother-projects-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: var(--gap-50);
  max-width: 100%;
}
.component-362,
.divmini-card-thumbmargin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.component-362 {
  width: 448.5px;
  border-radius: var(--br-18);
  background-color: var(--color-gray-100);
  border: var(--border-1);
  box-sizing: border-box;
  padding: var(--padding-12) var(--padding-12) var(--padding-18);
  max-width: 100%;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-10-5);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-1);
}
.divmini-card-thumbmargin {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) var(--padding-14);
}
.divmini-card-thumb-icon {
  align-self: stretch;
  border-radius: var(--br-12);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.divmini-card-meta,
.divmini-card-metamargin,
.divmini-card-name {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-6);
}
.divmini-card-meta,
.divmini-card-name {
  padding: var(--padding-0) var(--padding-8);
}
.divmini-card-name {
  font-size: var(--font-size-17);
  color: var(--color-white-solid);
}
.nerion-soft {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-0-17);
  line-height: var(--lh-26_4);
  font-weight: var(--font-weight-600);
  color: inherit;
  text-decoration: none;
}
.component-4,
.divmini-card-thumbmargin2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.component-4 {
  height: 412.9px;
  width: 448.5px;
  border-radius: var(--br-18);
  background-color: var(--color-gray-100);
  border: var(--border-1);
  box-sizing: border-box;
  padding: var(--padding-12) var(--padding-12) var(--padding-18);
  max-width: 100%;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-30);
  color: var(--color-white-95);
  font-family: var(--font-family-Font-1);
}
.divmini-card-thumbmargin2 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) var(--padding-14);
  text-align: center;
}
.divmini-card-thumb,
.divmini-card-thumb-placeholde {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divmini-card-thumb {
  border-radius: var(--br-12);
  overflow: hidden;
}
.divmini-card-thumb-placeholde {
  flex: 1;
  background: linear-gradient(
    126.87deg,
    var(--color-grey-10),
    var(--color-orange-23)
  );
  padding: 134.2px var(--padding-16) 135.7px;
  box-sizing: border-box;
  max-width: 100%;
}
.hunter-x-rp {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-0-3);
  line-height: var(--line-height-46-5);
  font-weight: var(--font-weight-700);
  font-family: inherit;
  text-shadow: var(--text-shadow-1);
}
.divmini-card-metamargin2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-6);
  font-size: var(--font-size-10-5);
  color: var(--color-grey-60);
}
.gestion-de-communaut {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-1-26);
  line-height: 16.3px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.divmini-card-thumb-placeholde2 {
  align-self: stretch;
  flex: 1;
  background: linear-gradient(
    126.87deg,
    var(--color-azure-36),
    var(--color-azure-53)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 134.2px var(--padding-16) 135.7px;
  box-sizing: border-box;
  max-width: 100%;
}
.component-5 {
  height: var(--height-100);
  width: var(--width-200);
  border-radius: var(--br-18);
  background-color: var(--color-yellow-50);
  border: var(--stroke-weight-1) solid var(--color-yellow-50);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--padding-18) var(--padding-9) var(--padding-8);
  gap: 12px;
  cursor: pointer;
}
.minicard-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-14);
}
.text7 {
  height: 27px;
  width: 152px;
  position: relative;
  letter-spacing: var(--letter-spacing-0-17);
  line-height: var(--lh-26_4);
  font-weight: var(--font-weight-600);
  color: inherit;
  display: inline-block;
  text-decoration: none;
}
.svgmini-card-cta-arrowmargin {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0_1) var(--padding-0) 0.9px;
}
.component-17 {
  height: var(--height-30);
  width: 30px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.vector-icon3 {
  position: absolute;
  height: 41.67%;
  width: 41.67%;
  top: 29.33%;
  right: 29%;
  bottom: 29%;
  left: 29.33%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  filter: brightness(0);
}
.next-project {
  align-self: stretch;
  border-bottom: var(--border-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-40) var(--padding-100);
  z-index: 9;
  text-align: left;
  font-size: var(--font-size-111);
  color: var(--color-grey-60);
  font-family: var(--font-family-Font-3);
}
.component-18 {
  align-self: stretch;
  min-height: 155px;
  border-radius: var(--br-24);
  background-color: var(--color-gray-100);
  border: var(--border-1);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: var(--padding-40);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.div5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--item-spacing-xs);
  flex: 1;
  min-width: 0;
}
.projet-suivant {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-1-981);
  line-height: var(--line-height-17);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.divnext-name {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--font-size-48);
  color: var(--color-white-solid);
}
.cooked-branding {
  margin: 0;
  width: auto;
  max-width: 100%;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--letter-spacing-1-441);
  line-height: var(--font-size-48);
  font-weight: var(--font-weight-6001);
  font-family: inherit;
  display: flex;
  align-items: center;
}
.divnext-arrow {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-color: var(--color-yellow-50);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.component-43 {
  width: 22px;
  height: var(--height-22);
  position: relative;
  overflow: hidden;
}
.vector-icon4 {
  position: absolute;
  height: 41.82%;
  width: 41.82%;
  top: 29.09%;
  right: 29.09%;
  bottom: 29.09%;
  left: 29.09%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.footer {
  align-self: stretch;
  background-color: var(--color-grey-14);
  border-top: var(--border-1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px var(--padding-36) var(--padding-30);
  z-index: 10;
  text-align: left;
  font-size: var(--font-size-13);
  color: var(--color-white-solid);
  font-family: var(--font-family-Font-1);
}
.divfooter-top {
  align-self: stretch;
  border-bottom: var(--border-1);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 170.89100646972656px;
  gap: var(--gap-40);
  padding-bottom: var(--padding-40);
  overflow: auto;
}
.divfooter-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 60.7px;
  gap: 22.1px;
  grid-column: 1;
  grid-row: 1;
  flex-shrink: 0;
  font-size: var(--font-size-141);
  color: var(--color-grey-60);
}
.alogo-icon {
  width: 44px;
  height: var(--height-44);
  object-fit: cover;
  cursor: pointer;
}
.p8 {
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--width-360);
}
.uxui-designer-bas {
  position: relative;
  line-height: var(--line-height-21-71);
}
.divfooter-col {
  width: var(--width-345_6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--font-size-16);
  grid-column: 2;
  grid-row: 1;
  flex-shrink: 0;
}
.navigation {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--letter-spacing-0-78);
  line-height: var(--lh-20_2);
  font-weight: var(--font-weight-600);
}
.li,
.ul {
  flex-direction: column;
}
.ul {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  font-size: var(--font-size-141);
  color: var(--color-grey-60);
}
.li {
  padding: var(--padding-6) var(--padding-0);
}
.component-7,
.li {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.text8 {
  flex: 1;
  position: relative;
  line-height: var(--line-height-21-71);
  color: inherit;
  text-decoration: none;
}
.divfooter-col2,
.divfooter-col3 {
  width: var(--width-345_6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 33.7px;
  box-sizing: border-box;
  gap: var(--font-size-16);
  grid-column: 3;
  grid-row: 1;
  flex-shrink: 0;
}
.divfooter-col3 {
  grid-column: 4;
}
.divfooter-bottom,
.span6 {
  align-self: stretch;
  display: flex;
}
.divfooter-bottom {
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 25px var(--padding-0) var(--padding-0);
  gap: 0 var(--gap-20);
  z-index: 2;
  color: var(--color-grey-60);
}
.span6 {
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-0_1) var(--padding-0);
}
.design-et-cod,
.ilan-bargain {
  height: 21px;
  width: 247.2px;
  position: relative;
  line-height: var(--lh-20_2);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.design-et-cod {
  width: 322.1px;
}
@media screen and (max-width: 1890px) {
  .detail-projet {
    flex-wrap: wrap;
  }
  .divchapter-head-parent {
    height: auto;
  }
  .divchapter-head {
    flex-wrap: wrap;
  }
  .divchapter-head-group {
    height: auto;
  }
  .divprose-parent {
    flex-wrap: wrap;
  }
  .divprose2 {
    width: 100%;
  }
  .component-17-parent {
    flex: 1;
  }
  .divchapter-head-parent2,
  .persona-inner {
    height: auto;
  }
  .divchapter-head5 {
    height: auto;
    flex-wrap: wrap;
  }
  .component-14-parent {
    flex-wrap: wrap;
  }
  .divchapter-head-parent4 {
    height: auto;
  }
  .divchapter-head6 {
    flex-wrap: wrap;
  }
  .divchapter-head-parent6 {
    height: auto;
  }
  .image-target {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1425px) {
  .detail-projet2 {
    flex-wrap: wrap;
  }
  .divchapter-head-parent {
    height: auto;
  }
  .divchapter-head {
    flex-wrap: wrap;
  }
  .persona {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .persona-inner {
    height: auto;
  }
  .da-couleurs {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-parent2 {
    height: auto;
  }
  .frame-wrapper2 {
    padding-left: var(--padding-40);
    padding-right: var(--padding-40);
    box-sizing: border-box;
  }
  .couleur {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .divchapter-head5 {
    height: auto;
    flex-wrap: wrap;
  }
  .iconographie {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-parent4 {
    height: auto;
  }
  .divchapter-head6 {
    flex-wrap: wrap;
  }
  .logo,
  .publiciter {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-parent6 {
    height: auto;
  }
  .image-target-wrapper {
    padding-left: 50px;
    box-sizing: border-box;
  }
  .test-interactf,
  .vido {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 950px) {
  .case-hero {
    gap: 16px;
    padding-bottom: var(--padding-32);
    box-sizing: border-box;
  }
  .cooked {
    font-size: var(--fs-60);
    line-height: 90px;
  }
  .detail-projet2 {
    gap: var(--gap-20);
  }
  .contexte {
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-parent {
    height: auto;
    gap: var(--gap-25);
  }
  .divchapter-head {
    flex-wrap: wrap;
  }
  .objectifs-contraintes {
    font-size: var(--fs-45);
    line-height: var(--lh-45);
  }
  .divprose {
    max-width: 100%;
  }
  .wireframe {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-group {
    gap: var(--gap-25);
  }
  .divprose-parent {
    gap: var(--gap-50);
  }
  .divprose2 {
    max-width: 100%;
    min-width: 100%;
  }
  .component-17-parent {
    gap: var(--gap-50);
    flex-wrap: wrap;
    min-width: 100%;
  }
  .persona {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .persona-inner {
    height: auto;
  }
  .divchapter-head-container,
  .persona-inner {
    gap: var(--gap-25);
  }
  .frame-parent {
    gap: var(--gap-20);
  }
  .da-couleurs {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .divchapter-head-parent2 {
    height: auto;
    gap: var(--gap-25);
  }
  .des-couleurs-qui {
    font-size: var(--fs-45);
    line-height: var(--lh-47);
  }
  .divchapter-prose-parent {
    gap: var(--gap-20);
  }
  .divchapter-prose {
    max-width: 100%;
  }
  .divswatch-parent {
    gap: var(--gap-20);
    flex-wrap: wrap;
  }
  .typographie {
    padding-top: var(--padding-65);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .divchapter-head-parent3 {
    gap: var(--gap-25);
  }
  .divchapter-head5 {
    height: auto;
    flex-wrap: wrap;
  }
  .p-wrapper,
  .p4 {
    gap: var(--gap-20);
  }
  .fredoka-one {
    font-size: 48px;
  }
  .chinehilla,
  .din-pro {
    font-size: 51px;
    line-height: 49px;
  }
  .iconographie {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .divchapter-head-parent4 {
    height: auto;
    gap: var(--gap-25);
  }
  .divchapter-head6 {
    flex-wrap: wrap;
  }
  .frame-group {
    gap: var(--gap-20);
  }
  .piste-logo-parent {
    flex-wrap: wrap;
  }
  .logo {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .p-parent {
    gap: var(--gap-20);
  }
  .component-35 {
    padding-left: var(--padding-32);
    padding-right: var(--padding-32);
    box-sizing: border-box;
  }
  .publiciter {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .divchapter-head-parent6 {
    height: auto;
    gap: var(--gap-25);
  }
  .image-target-wrapper {
    padding-left: 25px;
    box-sizing: border-box;
  }
  .image-target {
    gap: var(--gap-20);
  }
  .divmascot-poses3 {
    padding-top: 39px;
    padding-bottom: var(--padding-20);
    box-sizing: border-box;
  }
  .test-interactf,
  .vido {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .frame-parent2 {
    gap: var(--gap-50);
  }
  .frame-section {
    gap: var(--gap-25);
  }
  .plongez-dans-lexprience {
    font-size: var(--fs-45);
    line-height: var(--lh-47);
  }
  .divprose3 {
    max-width: 100%;
  }
  .iphone-cooked-test-page-2-parent {
    gap: 35px;
  }
  .autres-projets {
    gap: var(--gap-25);
    padding-bottom: var(--padding-65);
    box-sizing: border-box;
  }
  .autres-projets2 {
    font-size: 58px;
    line-height: 58px;
  }
  .divother-projects-grid {
    gap: var(--gap-25);
  }
  .hunter-x-rp {
    font-size: var(--fs-24);
    line-height: 37px;
  }
  .cooked-branding {
    font-size: 38px;
    line-height: 38px;
  }
}
@media screen and (max-width: 450px) {
  .navigation-principale {
    display: none;
  }
  .cooked {
    font-size: 37px;
    line-height: 60px;
  }
  .divchapter-head-parent {
    height: auto;
  }
  .divchapter-head {
    flex-wrap: wrap;
  }
  .objectifs-contraintes {
    font-size: var(--fs-34);
    line-height: var(--lh-34);
  }
  .wireframe {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .component-17-parent,
  .divprose-parent {
    gap: var(--gap-25);
  }
  .divchapter-head-parent2,
  .persona-inner {
    height: auto;
  }
  .des-couleurs-qui {
    font-size: var(--fs-34);
    line-height: var(--lh-35);
  }
  .couleur {
    gap: var(--gap-20);
  }
  .f9fafb {
    font-size: var(--fs-22);
    line-height: var(--lh-35);
  }
  .typographie {
    padding-top: var(--padding-42);
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .divchapter-head5 {
    height: auto;
    flex-wrap: wrap;
  }
  .component-14-inner,
  .divtypo-sample-parent {
    gap: var(--gap-20);
  }
  .fredoka-one {
    font-size: 36px;
  }
  .component-15-inner,
  .divtypo-sample-group {
    gap: var(--gap-20);
  }
  .din-pro {
    font-size: 38px;
    line-height: var(--lh-36);
  }
  .component-16-inner {
    gap: var(--gap-20);
  }
  .chinehilla {
    font-size: 38px;
    line-height: var(--lh-36);
  }
  .divchapter-head-parent4 {
    height: auto;
  }
  .divchapter-head6 {
    flex-wrap: wrap;
  }
  .iconography-design-wrapper {
    gap: var(--gap-20);
  }
  .piste-logo-parent {
    gap: 22px;
  }
  .logo-cooked {
    font-size: 21px;
    line-height: var(--lh-22);
  }
  .divchapter-head-parent6 {
    height: auto;
  }
  .test-interactf {
    padding-top: 27px;
    padding-bottom: 27px;
    box-sizing: border-box;
  }
  .frame-parent2 {
    gap: var(--gap-25);
  }
  .plongez-dans-lexprience {
    font-size: var(--fs-34);
    line-height: var(--lh-35);
  }
  .iphone-cooked-test-page-2-parent {
    gap: 17px;
  }
  .frame-parent3 {
    height: 355px;
  }
  .autres-projets {
    padding-bottom: var(--padding-42);
    box-sizing: border-box;
  }
  .autres-projets2 {
    font-size: 43px;
    line-height: 43px;
  }
  .hunter-x-rp {
    font-size: var(--fs-18);
    line-height: var(--lh-28);
  }
  .cooked-branding {
    font-size: 29px;
    line-height: 29px;
  }
}


/* ============================================================
   Custom overrides (Cooked) — added on top of the generated CSS
   ============================================================ */

/* --- Section 10 — video plays inside .demo-cooked-1 frame --- */
.demo-cooked-1 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: #000;
}

/* --- Section 11 — Figma prototype iframe inside the iPhone frame ---
   The fake home-screen mockup is kept as a frame but its inner content
   is hidden so the Figma iframe shows through. */
.page-application .figma-proto-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  z-index: 50;
  background: #000;
}
/* The bezel image is purely decorative — let clicks reach the iframe */
.iphone-cooked-test-page-2 .iphone-icon {
  pointer-events: none;
}
/* Hide all the fake home-screen pieces; iframe takes over */
.page-application .iphone-background-icon,
.page-application .status-bar-parent,
.page-application .frame-wrapper5,
.page-application .app-cooked-wrapper,
.page-application .logo-elements,
.page-application .container-fields-wrapper {
  display: none !important;
}

/* --- Kill stray scroll bars on chapter headings --- */
.divchapter-head2,
.divchapter-head10 {
  overflow: visible !important;
  height: auto !important;
}

/* --- Prevent the prose text in section 11 from being scrollable --- */
.test-interactf .divprose3,
.test-interactf .div4,
.test-interactf .div-wrapper,
.test-interactf .titre {
  overflow: visible !important;
  max-height: none !important;
}


/* --- Section 06 — marmite GIF: fully visible, top-aligned --- */
.marmittetransparantcooked-2-icon {
  object-fit: contain !important;
  object-position: center top !important;
}