/* =========================================================
   SAFICA
   STYLE RESPONSIVE
   PC / TABLETTE / MOBILE
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  color: #202832;
  background: #ffffff;

  font-family: "DM Sans", Arial, sans-serif;

  line-height: 1.6;
}

img {
  display: block;

  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --red: #e43222;

  --red-dark: #c92b1e;

  --navy: #121a27;

  --text: #202832;

  --muted: #707984;

  --light: #f4f5f6;

  --line: #e1e4e7;

}


/* =========================================================
   NAVBAR
   ========================================================= */

.site-header {

  position: fixed;

  top: 0;

  z-index: 1000;

  width: 100%;

  background: rgba(244, 245, 246, 0.97);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid #e5e7e9;

}


.nav {

  width: min(
    1280px,
    calc(100% - 50px)
  );

  min-height: 90px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


/* =========================================================
   LOGO
   ========================================================= */

.brand {

  display: flex;

  align-items: center;

  width: 210px;

  min-width: 160px;

  height: 70px;

  text-decoration: none;

}


.brand img {

  width: 170px;

  height: 65px;

  object-fit: contain;

  object-position: center;

  mix-blend-mode: multiply;

  filter: grayscale(1);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 30px;

  flex-wrap: wrap;

}


nav a {

  color: #68727e;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;

  transition:
    color 0.2s ease;

}


nav a:hover {

  color: var(--red);

}


/* =========================================================
   ACCUEIL
   ========================================================= */

.hero {

  width: 100%;

  min-height: calc(100vh - 90px);

  display: flex;

  align-items: center;

}


.hero-text {

  width: min(100%, 1100px);

  margin: 0 auto;

  padding: 100px 60px;

}


/* Ligne rouge */

.red-line {

  width: 55px;

  height: 3px;

  margin-bottom: 28px;

  background: var(--red);

}


/* Petit titre */

.eyebrow {

  margin: 0 0 14px;

  color: var(--red);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}


/* =========================================================
   MARQUEE
   ========================================================= */

.marquee {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 15px 0 30px;
    padding: 12px 0;
    white-space: nowrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: marquee 35s linear infinite;
}

.marquee-track span {
    display: inline-block;
    flex-shrink: 0;

    color: var(--navy);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 30px;

    font-weight: 200;
    line-height: 1.1;

    padding-right: 80px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   TEXTES ACCUEIL
   ========================================================= */

.intro {

  max-width: 850px;

  margin: 25px 0 20px;

  color: #58616b;

  font-size: 18px;

  line-height: 1.8;

}


.intro strong {

  color: var(--text);

}


.heritage {

  max-width: 850px;

  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.8;

}


.heritage strong {

  color: var(--text);

}


/* =========================================================
   BOUTONS
   ========================================================= */

.links {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 35px;

}


.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding: 0 20px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  transition: all 0.2s ease;

}


.btn-outline {

  color: var(--text);

  background: #ffffff;

  border: 1px solid var(--line);

}


.btn-outline:hover {

  color: var(--red);

  border-color: var(--red);

  transform: translateY(-2px);

}


/* =========================================================
   HISTOIRE
   ========================================================= */

.simple-section {

  width: 100%;

  min-height: 350px;

  padding: 90px
    max(30px, calc((100% - 1160px) / 2));

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;

  border-top: 1px solid var(--line);

}


.section-left,
.section-right {

  min-width: 0;

}


.simple-section h2 {

  max-width: 600px;

  margin: 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(
    35px,
    4vw,
    52px
  );

  line-height: 1.15;

}


.section-right {

  color: var(--muted);

  font-size: 15px;

  line-height: 1.9;

}


.section-right p {

  margin: 0 0 20px;

}


/* =========================================================
   FONDATRICE
   ========================================================= */

.fondatrice-section {

  width: 100%;

  padding: 90px
    max(30px, calc((100% - 1160px) / 2));

  background: var(--light);

}


.fondatrice-content {

  display: grid;

  grid-template-columns: 1fr 0.75fr;

  gap: 80px;

  align-items: center;

}


.fondatrice-text {

  min-width: 0;

}


.fondatrice-text h2 {

  margin: 0 0 25px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(
    35px,
    4vw,
    52px
  );

  line-height: 1.15;

}


.fondatrice-text p {

  max-width: 650px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.9;

}


.fondatrice-text .lead {

  color: var(--text);

  font-size: 17px;

}


.fondatrice-text .lead span {

  color: var(--muted);

}


.fondatrice-photo {

  width: 100%;

  max-width: 450px;

  margin: 0 auto;

  text-align: center;

}


.fondatrice-photo img {

  width: 100%;

  max-height: 520px;

  object-fit: cover;

  border: 5px solid #ffffff;

  box-shadow:
    0 15px 40px
    rgba(0, 0, 0, 0.08);

}


.photo-caption {

  margin-top: 12px;

  color: var(--muted);

  font-size: 12px;

}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {

  width: 100%;

  padding: 90px
    max(30px, calc((100% - 1160px) / 2));

  border-top: 1px solid var(--line);

}


.contact-inner {

  display: grid;

  grid-template-columns: 0.7fr 1.3fr;

  gap: 80px;

  align-items: start;

}


.contact-header h2 {

  margin: 0;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: clamp(
    38px,
    4vw,
    55px
  );

}


.contact-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 35px;

}


.contact-block {

  min-width: 0;

}


.contact-block h3 {

  margin: 0 0 12px;

  color: var(--navy);

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}


.contact-block p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;

}


.contact-block a {

  display: block;

  margin-bottom: 8px;

  color: var(--text);

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  overflow-wrap: anywhere;

}


.contact-block a:hover {

  color: var(--red);

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  width: 100%;

  min-height: 75px;

  padding: 20px 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  background: #0d131d;

  color: #8d97a3;

  font-size: 11px;

}


/* =========================================================
   TABLETTE LARGE
   901px → 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .nav {

    width:
      calc(100% - 40px);

  }


  .hero-text {

    padding:
      80px 45px;

  }


  .simple-section {

    padding-left: 45px;

    padding-right: 45px;

    gap: 45px;

  }


  .fondatrice-section {

    padding-left: 45px;

    padding-right: 45px;

  }


  .contact-section {

    padding-left: 45px;

    padding-right: 45px;

  }


  .contact-inner {

    gap: 45px;

  }


  .contact-grid {

    gap: 20px;

  }

}


/* =========================================================
   TABLETTE
   769px → 900px
   ========================================================= */

@media (max-width: 900px) {

  .nav {

    min-height: 80px;

  }


  .brand {

    width: 170px;

  }


  .brand img {

    width: 145px;

  }


  nav {

    gap: 18px;

  }


  nav a {

    font-size: 13px;

  }


  /* Histoire */

  .simple-section {

    grid-template-columns: 1fr;

    gap: 30px;

    padding-top: 70px;

    padding-bottom: 70px;

  }


  /* Fondatrice */

  .fondatrice-content {

    grid-template-columns: 1fr;

    gap: 50px;

  }


  .fondatrice-photo {

    width: min(100%, 430px);

  }


  /* Contact */

  .contact-inner {

    grid-template-columns: 1fr;

    gap: 40px;

  }

}


/* =========================================================
   MOBILE
   ≤ 768px
   ========================================================= */

@media (max-width: 768px) {

  body {

    font-size: 14px;

  }


  /* -------------------------
     NAVBAR
     ------------------------- */

  .nav {

    width:
      calc(100% - 28px);

    min-height: auto;

    padding: 12px 0;

    flex-direction: column;

    gap: 10px;

  }


  .brand {

    width: 100%;

    height: 55px;

    justify-content: center;

  }


  .brand img {

    width: 135px;

    height: 52px;

    margin: 0;

  }


  nav {

    width: 100%;

    justify-content: center;

    gap: 8px 18px;

  }


  nav a {

    font-size: 12px;

  }


  /* -------------------------
     HERO
     ------------------------- */

  .hero {

    min-height: auto;

  }


  .hero-text {

    width: 100%;

    padding:
      65px 22px 70px;

  }


  .red-line {

    width: 45px;

    margin-bottom: 22px;

  }


  .eyebrow {

    font-size: 10px;

    letter-spacing: 0.14em;

  }


  /* -------------------------
     MARQUEE
     ------------------------- */

  .marquee {

    margin:
      15px 0 25px;

    padding: 10px 0;

  }


  .marquee-track span {

    font-size: 34px;

  }


  /* -------------------------
     TEXTES
     ------------------------- */

  .intro {

    margin-top: 25px;

    font-size: 16px;

    line-height: 1.75;

  }


  .heritage {

    font-size: 14px;

    line-height: 1.8;

  }


  /* -------------------------
     BOUTONS
     ------------------------- */

  .links {

    width: 100%;

    flex-direction: column;

    gap: 10px;

    margin-top: 28px;

  }


  .btn {

    width: 100%;

    min-height: 48px;

    padding: 0 15px;

    text-align: center;

  }


  /* -------------------------
     HISTOIRE
     ------------------------- */

  .simple-section {

    width: 100%;

    padding:
      65px 22px;

    display: block;

  }


  .section-left {

    margin-bottom: 25px;

  }


  .simple-section h2 {

    font-size: 36px;

    line-height: 1.15;

  }


  .section-right {

    font-size: 14px;

    line-height: 1.8;

  }


  /* -------------------------
     FONDATRICE
     ------------------------- */

  .fondatrice-section {

    padding:
      65px 22px;

  }


  .fondatrice-content {

    display: flex;

    flex-direction: column;

    gap: 40px;

  }


  .fondatrice-text h2 {

    font-size: 36px;

  }


  .fondatrice-text p {

    font-size: 14px;

    line-height: 1.8;

  }


  .fondatrice-text .lead {

    font-size: 16px;

  }


  .fondatrice-photo {

    width: 100%;

    max-width: 360px;

  }


  .fondatrice-photo img {

    max-height: 450px;

  }


  /* -------------------------
     CONTACT
     ------------------------- */

  .contact-section {

    padding:
      65px 22px;

  }


  .contact-inner {

    display: block;

  }


  .contact-header {

    margin-bottom: 35px;

  }


  .contact-header h2 {

    font-size: 40px;

  }


  .contact-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 28px;

  }


  .contact-block {

    padding-bottom: 22px;

    border-bottom:
      1px solid var(--line);

  }


  .contact-block:last-child {

    border-bottom: none;

  }


  /* -------------------------
     FOOTER
     ------------------------- */

  footer {

    min-height: auto;

    padding:
      22px 20px;

    flex-direction: column;

    justify-content: center;

    gap: 7px;

    line-height: 1.6;

    text-align: center;

  }

}


/* =========================================================
   PETIT TELEPHONE
   ≤ 480px
   ========================================================= */

@media (max-width: 480px) {

  .nav {

    width:
      calc(100% - 20px);

  }


  .brand img {

    width: 125px;

  }


  nav {

    gap:
      6px 13px;

  }


  nav a {

    font-size: 11px;

  }


  .hero-text {

    padding:
      55px 18px 60px;

  }


  .marquee-track span {

    font-size: 29px;

  }


  .intro {

    font-size: 15px;

  }


  .heritage {

    font-size: 13px;

  }


  .simple-section {

    padding:
      55px 18px;

  }


  .simple-section h2 {

    font-size: 32px;

  }


  .fondatrice-section {

    padding:
      55px 18px;

  }


  .fondatrice-text h2 {

    font-size: 32px;

  }


  .contact-section {

    padding:
      55px 18px;

  }

}


/* =========================================================
   TRÈS PETIT TELEPHONE
   ≤ 360px
   ========================================================= */

@media (max-width: 360px) {

  nav {

    gap:
      5px 9px;

  }


  nav a {

    font-size: 10px;

  }


  .marquee-track span {

    font-size: 25px;

  }


  .simple-section h2,
  .fondatrice-text h2 {

    font-size: 29px;

  }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

/*
   Les utilisateurs qui désactivent les animations
   ne verront pas le texte défiler.
*/