/*==================================================
  LE CHEMIN D'AVELYE - FEUILLE DE STYLE
  Version v22 : code réorganisé et commenté

  SOMMAIRE
  01. Variables de thème
  02. Base HTML et accessibilité
  03. Décorations de fond et parallaxe
  04. Structure de page
  05. En-tête, logo et slogan
  06. Accueil
  07. Offres / cartes de cours
  08. Section À propos
  09. Coordonnées
  10. Pied de page
  11. Animations
  12. Responsive
==================================================*/

/*==================================================
  01. VARIABLES DE THÈME
==================================================*/

:root {
  --font-title:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script:"Allisson", "Allison", "Segoe Script", "Brush Script MT", cursive;
  --cream:#fbf3e5;
  --paper:#fffaf0;
  --ink:#171314;
  --text:#42372d;
  --muted:#8d7a68;
  --gold:#d6a23c;
  --border:rgba(218,163,55,.25);
  --shadow:0 22px 70px rgba(91,67,30,.11);
}

* {
  box-sizing:border-box;
}

.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--text);
  background:#fbf6ed;
}

body {
  position:relative;
  overflow-x:hidden;
}

/*==================================================
  03. DÉCORATIONS DE FOND ET PARALLAXE
==================================================*/

.page-floral {
  position:fixed;
  top:0;
  bottom:auto;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:.94;
  will-change:background-position;
  background-repeat:repeat-y;
  background-size:100% auto;
  contain:paint;
}

.page-floral-left {
  left:0;
  width:260px;
  background-image:url("../img/fond-gauche-repeat.webp");
  background-position:left var(--floral-parallax-y,0px);
}

.page-floral-right {
  right:0;
  width:331px;
  background-image:url("../img/fond-droite-repeat.webp");
  background-position:right var(--floral-parallax-y,0px);
}

/*==================================================
  04. STRUCTURE DE PAGE
==================================================*/

.page-shell {
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  margin:0 auto;
  padding:28px 18px 42px;
}

.hero-card {
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 56px);
  padding:46px clamp(18px,4vw,58px) 26px;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

.hero-card:before {
  content:none;
}

/*==================================================
  05. EN-TÊTE, LOGO ET SLOGAN
==================================================*/

.hero {
  position:relative;
  text-align:center;
  max-width:760px;
  margin:0 auto 34px;
}

.brand-logo {
  width:250px;
  height:auto;
  object-fit:contain;
  margin:0 auto 18px;
  display:block;
}

h1 {
  margin:0;
  font-family:var(--font-title);
  font-size:clamp(2.45rem,7vw,5.25rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--ink);
  font-weight:500;
}

.baseline {
  margin:13px 0 0;
  font-size:clamp(.98rem,2vw,1.16rem);
  line-height:1.35;
  color:#6b4f31;
}

.baseline span {
  color:var(--gold);
  padding:0 8px;
}

.signature {
  margin:24px auto 0;
  max-width:900px;
  font-family:var(--font-script);
  font-size:clamp(3.4rem,7vw,6.8rem);
  line-height:.82;
  color:#d7902d;
  font-weight:400;
}

.ornament {
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:center;
  margin:24px auto 0;
  color:var(--gold);
}

.ornament span {
  height:1px;
  width:92px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.ornament i {
  font-style:normal;
  font-size:.9rem;
}

/*==================================================
  06. TEXTE D’ACCUEIL
==================================================*/

.welcome {
  position:relative;
  text-align:center;
  max-width:650px;
  margin:0 auto 46px;
  font-size:clamp(1.04rem,2vw,1.22rem);
  line-height:1.9;
  color:#2f2a25;
}

.welcome p {
  margin:0 0 10px;
}

/*==================================================
  07. OFFRES / CARTES DE COURS
==================================================*/

.offers {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin:0 auto 52px;
  max-width:1060px;
}

.offer {
  background:rgba(255,255,255,.74);
  border:1px solid rgba(216,162,60,.18);
  border-radius:22px;
  padding:30px 24px 26px;
  min-height:250px;
  text-align:center;
  box-shadow:0 14px 40px rgba(64,43,15,.055);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;
}

.offer:hover,.offer:focus {
  outline:none;
  transform:translateY(-5px);
  box-shadow:0 24px 60px rgba(64,43,15,.12);
  border-color:rgba(214,162,60,.48);
  background:rgba(255,255,255,.90);
}

.icon {
  margin:0 auto 18px;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 6px 10px rgba(214,162,60,.18));
}

.icon img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.offer h3 {
  font-family:var(--font-title);
  font-size:1.32rem;
  line-height:1.35;
  font-weight:500;
  color:var(--ink);
  margin:0 0 18px;
}

.offer p {
  font-size:.98rem;
  line-height:1.55;
  margin:0;
  color:#897565;
}

/*==================================================
  08. SECTION À PROPOS
==================================================*/

.about-section {
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,390px) minmax(0,1fr);
  gap:clamp(34px,6vw,72px);
  align-items:center;
  max-width:1040px;
  margin:0 auto 54px;
  padding:8px 0 6px;
}

.about-visual {
  position:relative;
  justify-self:center;
  width:min(312px,100%);
}

.about-visual img {
  display:block;
  width:100%;
  height:auto;
  background:transparent;
}

.about-text {
  text-align:left;
  font-family:var(--font-body);
  font-size:clamp(1.04rem,1.7vw,1.23rem);
  line-height:1.9;
  color:#2f2a25;
}

.about-text h2 {
  font-family:var(--font-title);
  color:#b47418;
  margin:0;
  font-weight:600;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
  text-shadow:0 2px 4px rgba(104,66,16,.18);
}

.about-title-rule {
  position:relative;
  width:136px;
  height:2px;
  margin:16px 0 24px;
  background:linear-gradient(90deg,rgba(180,116,24,.08),rgba(180,116,24,.78),rgba(180,116,24,.08));
}

.about-title-rule span {
  position:absolute;
  left:50%;
  top:13px;
  transform:translateX(-50%);
  width:88px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#b47418,transparent);
}

.about-text p {
  margin:0 0 18px;
}

.about-text strong {
  color:#b47418;
  font-weight:600;
}

/*==================================================
  09. COORDONNÉES
==================================================*/

.contact-card {
  position:relative;
  max-width:1040px;
  margin:0 auto 48px;
  padding:0 0 8px;
  background:transparent;
  border:0;
  box-shadow:none;
  text-align:center;
}

.contact-coordinates h2 {
  font-family:var(--font-title);
  color:#b47418;
  margin:0;
  font-weight:600;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1;
  text-shadow:0 2px 4px rgba(104,66,16,.18);
}

.contact-title-rule {
  position:relative;
  margin:16px auto 28px;
  height:2px;
  background:linear-gradient(90deg,rgba(199,143,45,.08),rgba(199,143,45,.72),rgba(199,143,45,.08));
}

.contact-title-rule span {
  position:absolute;
  left:50%;
  top:13px;
  transform:translateX(-50%);
  width:88px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#b47418,transparent);
}

.contact-items {
  display:grid;
  grid-template-columns:minmax(170px,.85fr) minmax(250px,1.35fr) minmax(165px,.9fr);
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:0 4px;
  max-width:100%;
  overflow:hidden;
}

.contact-item {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.5vw,18px);
  min-width:0;
  min-height:74px;
  font-family:var(--font-body);
  font-size:clamp(.92rem,1.55vw,1.35rem);
  line-height:1.18;
  color:#2e2926;
  text-align:left;
}

.contact-icon {
  flex:0 0 auto;
  width:clamp(48px,5.4vw,64px);
  height:clamp(48px,5.4vw,64px);
  border-radius:50%;
  display:grid;
  place-items:center;
  border:3px solid #bd7b15;
  color:#bd7b15;
  background:rgba(255,250,241,.28);
  font-family:Georgia,serif;
  font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1;
  box-shadow:0 2px 4px rgba(104,66,16,.12);
}

.facebook-icon {
  background:#bd7b15;
  color:#fff;
  font-family:Arial,sans-serif;
  font-weight:700;
  font-size:clamp(2.35rem,4.6vw,3.2rem);
  align-items:end;
  overflow:hidden;
  padding-top:10px;
}

.contact-card a {
  color:#2e2926;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  min-width:0;
  overflow-wrap:anywhere;
}

.contact-card [data-safe="phone"] {
  white-space:nowrap;
}

.facebook-contact a {
  text-decoration:none;
  font-weight:500;
}

.contact-bottom-ornament {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:34px auto 0;
  color:#d6a23c;
}

.contact-bottom-ornament span {
  height:2px;
  flex:1;
  max-width:430px;
  background:linear-gradient(90deg,transparent,rgba(199,143,45,.55));
}

.contact-bottom-ornament span:last-child {
  background:linear-gradient(90deg,rgba(199,143,45,.55),transparent);
}

.contact-bottom-ornament i {
  font-style:normal;
  font-size:2.6rem;
  line-height:1;
  color:#c58a2a;
}

.safe-link {
  color:#2f2a25;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

/*==================================================
  10. PIED DE PAGE
==================================================*/

.footer {
  position:relative;
  text-align:center;
  color:#6b5749;
}

.footer .small {
  font-size:clamp(3.4rem,7vw,6.8rem);
  line-height:.78;
  margin:0 auto 18px;
  text-align:center;
  display:block;
  width:100%;
  max-width:900px;
}

.footer p {
  margin:4px 0;
}

.footer small {
  color:#a59383;
}

/*==================================================
  11. ANIMATIONS
==================================================*/

.reveal {
  opacity:0;
  transform:translateY(16px);
  animation:reveal .8s ease forwards;
}

.welcome {
  animation-delay:.1s;
}

.offers .offer:nth-child(1) {
  animation-delay:.16s;
}

.offers .offer:nth-child(2) {
  animation-delay:.23s;
}

.offers .offer:nth-child(3) {
  animation-delay:.3s;
}

.offers .offer:nth-child(4) {
  animation-delay:.37s;
}

.contact-card {
  animation-delay:.44s;
}

.footer {
  animation-delay:.52s;
}

@keyframes reveal {
  to {
    opacity:1;
    transform:none;
  }
}

.facebook-line {
  margin-top:14px!important;
}

.facebook-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,#f5df9b,#d6a23c);
  color:#3d2d12!important;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 10px 24px rgba(131,91,22,.12);
  border:1px solid rgba(201,144,42,.32);
  transition:transform .25s ease,box-shadow .25s ease;
}

.facebook-button:before {
  content:"f";
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  font-family:Arial,sans-serif;
  font-weight:700;
  border:1px solid rgba(61,45,18,.35);
  font-size:.95rem;
}

.facebook-button:hover,.facebook-button:focus {
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(131,91,22,.18);
  outline:none;
}

/*==================================================
  12. RESPONSIVE
==================================================*/

@media (max-width:860px) {
  .contact-items {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    justify-items:stretch;
  }
  .contact-item {
    justify-content:flex-start;
    max-width:520px;
    width:100%;
    margin:0 auto;
  }
  .contact-title-rule {
    margin-bottom:22px;
  }
  .facebook-contact a br {
    display:none;
  }
}

@media (min-width:861px) and (max-width:1040px) {
  .contact-items {
    grid-template-columns:minmax(160px,.75fr) minmax(250px,1.25fr) minmax(145px,.8fr);
    gap:10px;
  }
  .contact-item {
    font-size:clamp(.95rem,1.55vw,1.22rem);
  }
  .contact-icon {
    width:48px;
    height:48px;
  }
  .facebook-icon {
    font-size:2.35rem;
  }
}

@media (max-width:1180px) {
  .page-floral {
    opacity:.48;
  }
  .page-shell {
    width:min(960px,100%);
  }
}

@media (max-width:920px) {
  .offers {
    grid-template-columns:repeat(2,1fr);
  }
  .about-section {
    grid-template-columns:1fr;
    gap:22px;
    text-align:center;
  }
  .about-text {
    text-align:center;
  }
  .about-title-rule {
    margin-left:auto;
    margin-right:auto;
  }
  .about-visual {
    width:min(360px,100%);
  }
}

@media (max-width:640px) {
  .page-floral {
    display:block;
    opacity:.40;
    background-repeat:repeat-y;
    background-size:100% auto;
  }
  .page-floral-left {
    left:0;
    width:clamp(78px,24vw,104px);
    background-position:left var(--floral-parallax-y,0px);
  }
  .page-floral-right {
    right:0;
    width:clamp(92px,28vw,118px);
    background-position:right var(--floral-parallax-y,0px);
  }
  .about-section {
    margin-bottom:38px;
  }
  .about-text {
    font-size:1rem;
    line-height:1.75;
  }
  .about-visual {
    width:min(310px,100%);
  }
  .page-shell {
    padding:16px 14px 28px;
  }
  .hero-card {
    border-radius:0;
    padding:32px 20px 22px;
  }
  .brand-logo {
    width:148px;
  }
  .offers {
    grid-template-columns:1fr;
    gap:16px;
  }
  .offer {
    min-height:auto;
    padding:24px 22px;
  }
  .contact-card {
    align-items:flex-start;
    padding:22px 18px;
    gap:16px;
  }
  .contact-avatar {
    width:54px;
    height:54px;
  }
  .signature {
    max-width:100%;
    font-size:clamp(3.3rem,13vw,3.9rem);
  }
  .ornament span {
    width:72px;
  }
  .footer .small {
    font-size:3.3rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .reveal {
    opacity:1;
    transform:none;
  }
  .page-floral {
    background-position-y:top;
  }
}