/* ============================================================
   S'envoler vers soi — Design system
   Source : export AppDrag (public/config/config.json + fonts.json)
   Nommage des classes de texte : convention WeWeb Atelier Digital
   Categorie-[Alignement][Graisse]-[TaillePx]-[Couleur]
   ============================================================ */

/* -------- Polices (embarquées en local) -------- */
@font-face {
  font-family: "Kite One";
  src: url("../fonts/KiteOne-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grota Sans Rd";
  src: url("../fonts/GrotaSansRd-Light.woff2") format("woff2"),
       url("../fonts/GrotaSansRd-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grota Sans Rd";
  src: url("../fonts/GrotaSansRd-LightIt.woff2") format("woff2"),
       url("../fonts/GrotaSansRd-LightIt.woff") format("woff");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Grota Sans Rd";
  src: url("../fonts/GrotaSansRd-Medium.woff2") format("woff2"),
       url("../fonts/GrotaSansRd-Medium.woff") format("woff");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grota Sans Rd";
  src: url("../fonts/GrotaSansRd-MediumIt.woff2") format("woff2"),
       url("../fonts/GrotaSansRd-MediumIt.woff") format("woff");
  font-weight: 500 700; font-style: italic; font-display: swap;
}

/* -------- 1. Tokens de couleur (palette AppDrag) --------
   Nom WeWeb   Token                 Palette AppDrag
   Prune       --color-prune         Dark Primary Color   #883c65
   Rose        --color-rose          Primary Color        #ffeaf1
   Peche       --color-peche         Light Primary Color  #ffdfd1
   Gris        --color-gris          Text Color           #727272
   Canard      --color-canard        Secondary Text Color #428c8c
   Creme       --color-creme         Divider Color        #ffedd8
   Beige       --color-beige         Beige crème          #fff2dc
   Blanc       --color-blanc                              #ffffff        */
:root {
  --color-prune:  #883c65;
  --color-rose:   #ffeaf1;
  --color-peche:  #ffdfd1;
  --color-gris:   #727272;
  --color-canard: #428c8c;
  --color-creme:  #ffedd8;
  --color-beige:  #fff2dc;
  --color-blanc:  #ffffff;

  --font-title: "Kite One", "Segoe Print", cursive, sans-serif;
  --font-body:  "Grota Sans Rd", "Nunito", system-ui, sans-serif;

  --bs-primary: var(--color-prune);
  --bs-primary-rgb: 136, 60, 101;
  --bs-body-color: var(--color-gris);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-weight: 300;
  --bs-link-color: var(--color-prune);
  --bs-link-color-rgb: 136, 60, 101;
  --bs-link-hover-color: var(--color-canard);
  --bs-link-hover-color-rgb: 66, 140, 140;
}

/* -------- 2. Balises de texte -------- */
body { font-family: var(--font-body); font-weight: 300; color: var(--color-gris); background: var(--color-blanc); }
h1, h2, h3, h4, h5 { font-family: var(--font-title); font-weight: 400; line-height: 1.2; }
h1 { font-size: 2.8125rem; color: var(--color-prune); text-align: center; margin-bottom: 1.5rem; }  /* Titre 1 — 45px */
h2 { font-size: 1.875rem;  color: var(--color-gris);  margin-bottom: 1rem; }                          /* Titre 2 — 30px */
h3 { font-size: 1.25rem;   color: var(--color-prune); margin-bottom: .75rem; }                        /* Titre 3 — 20px */
h4 { font-size: 1.25rem;   color: var(--color-prune); margin-bottom: .75rem; }                        /* Sous-titre — 20px */
p, li { font-size: 1.25rem; line-height: 1.45; }                                                       /* Body — 20px */
strong, b, .fw-bold { font-weight: 600; }
a { text-decoration: none; }
@media (max-width: 767.98px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.5rem; }
  p, li { font-size: 1.0625rem; }
}

/* -------- 2bis. Classes de texte nommées (convention WeWeb) -------- */
.Titre-CR-45px-Prune { font-family: var(--font-title); font-weight: 400; font-size: 2.8125rem; text-align: center; color: var(--color-prune); }
.Titre-GR-30px-Gris  { font-family: var(--font-title); font-weight: 400; font-size: 1.875rem;  text-align: left;   color: var(--color-gris); }
.Titre-CR-30px-Gris  { font-family: var(--font-title); font-weight: 400; font-size: 1.875rem;  text-align: center; color: var(--color-gris); }
.Titre-CR-20px-Prune { font-family: var(--font-title); font-weight: 400; font-size: 1.25rem;   text-align: center; color: var(--color-prune); }
.Titre-GR-20px-Prune { font-family: var(--font-title); font-weight: 400; font-size: 1.25rem;   text-align: left;   color: var(--color-prune); }
.Titre-CR-20px-Gris  { font-family: var(--font-title); font-weight: 400; font-size: 1.25rem;   text-align: center; color: var(--color-gris); }
.Body-GR-20px-Gris   { font-family: var(--font-body);  font-weight: 300; font-size: 1.25rem;   text-align: left;   color: var(--color-gris); }
.Body-CR-20px-Gris   { font-family: var(--font-body);  font-weight: 300; font-size: 1.25rem;   text-align: center; color: var(--color-gris); }
.Body-GB-20px-Gris   { font-family: var(--font-body);  font-weight: 600; font-size: 1.25rem;   text-align: left;   color: var(--color-gris); }
.Body-CR-16px-Blanc  { font-family: var(--font-body);  font-weight: 300; font-size: 1rem;      text-align: center; color: var(--color-blanc); }
.Label-CR-18px-Prune { font-family: var(--font-title); font-weight: 400; font-size: 1.125rem;  text-align: center; color: var(--color-prune); }

/* -------- 3. Fonds & sections -------- */
.section      { padding: 4rem 0; position: relative; }
.bg-prune     { background-color: var(--color-prune); }
.bg-rose      { background-color: var(--color-rose); }
.bg-peche     { background-color: var(--color-creme); }
.bg-beige     { background-color: var(--color-beige); }
.section-bgimg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.section-strip { padding: 1.5rem 0; }

/* Vague de séparation (reprend les séparateurs AppDrag) */
.section + .section::before, .page-title + .section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-prune), #b8628f 50%, var(--color-prune));
  opacity: .85;
}
.section-strip::before, .section-strip + .section::before { display: none; }

/* Bandeau de titre des pages intérieures */
.page-title {
  background-color: var(--color-creme);
  padding: 2.25rem 0;
}
.page-title h1 { margin: 0; }

/* Hero de l'accueil */
.hero-home { background-size: cover; background-position: center top; padding: 5rem 0 4rem; }
.hero-home h1 { font-size: 3.5rem; }
.hero-home p { text-align: center; }

/* Listes à puces (anciennes lignes « * ») */
.list-bullets { padding-left: 1.2rem; margin-bottom: 1rem; }
.list-bullets li { margin-bottom: .35rem; }
.list-bullets li::marker { color: var(--color-prune); }

/* -------- 4. Boutons -------- */
.btn-brand {
  font-family: var(--font-title); font-size: 1.125rem;
  background: var(--color-prune); color: var(--color-blanc);
  border: 0; border-radius: 10px; padding: .6rem 1.4rem; transition: background-color .2s, color .2s;
}
.btn-brand:hover, .btn-brand:focus { background: var(--color-gris); color: var(--color-rose); }
.btn-brand-light {
  font-family: var(--font-title); font-size: 1rem;
  background: var(--color-rose); color: var(--color-prune);
  border: 0; border-radius: 10px; padding: .5rem 1.1rem;
}
.btn-brand-light:hover, .btn-brand-light:focus { background: var(--color-gris); color: var(--color-rose); }

/* -------- 5. Cartes, encadrés, galeries -------- */
.card-brand { border: 2px solid var(--color-prune); border-radius: 2rem; background: var(--color-rose); }
.card-brand .card-body { padding: 2rem 1.5rem; }
.card-brand .card-title { color: var(--color-prune); }
.card-brand p { font-size: 1.0625rem; }
.card-icon { width: 64px; height: 64px; object-fit: contain; display: block; margin-left: auto; margin-right: auto; }
.card-img-top-brand { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; }
.card-soft { border: 2px solid var(--color-peche); border-radius: 10px; background: var(--color-blanc); }
.bg-rose .card-brand, .bg-peche .card-brand { background: var(--color-blanc); }

.info-box { border: 2px solid var(--color-peche); border-radius: 10px; padding: 1rem 1.25rem; height: 100%; text-align: center; }
.info-box h4 { color: var(--color-gris); margin: .35rem 0; }

.gallery-item { margin: 0; position: relative; overflow: hidden; border-radius: 10px; }
.gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s; }
.gallery-item:hover .gallery-img { transform: scale(1.04); }
.gallery-item .gallery-caption {
  margin: 0;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1rem; font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 1.125rem;
  color: var(--color-prune); background: rgba(255, 234, 241, .62); opacity: 0; transition: opacity .3s;
}
.gallery-item:hover .gallery-caption, a:focus .gallery-caption { opacity: 1; }
.section-strip .gallery-img { aspect-ratio: 1 / 1; border: 3px solid var(--color-rose); border-radius: 10px; }
.section-strip .row > * { flex: 0 0 auto; width: 16.666%; }
@media (max-width: 767.98px) { .section-strip .row > * { width: 33.333%; } }

.logos .logo-img { width: 100%; height: 90px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logos .gallery-item:hover .logo-img { filter: none; opacity: 1; }

/* Témoignages */
.testimonial { background: rgba(255, 255, 255, .88); border-radius: 10px; padding: 1.75rem; height: 100%; text-align: center; }
.testimonial-quote { font-style: italic; font-size: 1.0625rem; margin-bottom: 1rem; }
.testimonial-author { font-family: var(--font-body); font-size: 1rem; margin-bottom: 0; }

/* Citation */
.quote-band h2 { text-align: center; color: var(--color-prune); font-size: 1.625rem; }

/* Formulaire */
.form-brand .form-control, .form-brand .form-select {
  background: var(--color-rose); border: 2px solid var(--color-gris); border-radius: 10px;
  font-family: var(--font-title); color: var(--color-gris); min-height: 44px;
}
.map-embed { border: 0; width: 100%; min-height: 380px; border-radius: 10px; }

/* -------- 6. Navbar -------- */
.navbar-brand-bar { background: var(--color-prune); padding: .5rem 0; }
.navbar-brand-bar .navbar-brand img { height: 90px; width: auto; }
.navbar-brand-bar .nav-link {
  font-family: var(--font-title); font-size: 1rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-blanc); border-bottom: 3px solid transparent;
}
.navbar-brand-bar .nav-link:hover, .navbar-brand-bar .nav-link:focus,
.navbar-brand-bar .nav-link.active, .navbar-brand-bar .nav-link.show { color: var(--color-rose); border-bottom-color: #fc78a5; }
.navbar-brand-bar .dropdown-menu { background: var(--color-gris); border: 0; border-radius: 0 0 10px 10px; }
.navbar-brand-bar .dropdown-item { font-family: var(--font-title); color: var(--color-blanc); }
.navbar-brand-bar .dropdown-item:hover, .navbar-brand-bar .dropdown-item.active { background: var(--color-prune); color: var(--color-rose); }
.navbar-brand-bar .navbar-toggler { border-color: var(--color-peche); }
.navbar-brand-bar .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) { .navbar-brand-bar .navbar-brand img { height: 64px; } }

/* -------- 7. Footer -------- */
.footer-brand { background: var(--color-prune); color: var(--color-blanc); padding: 3rem 0 2rem; }
.footer-brand p, .footer-brand li { font-size: 1rem; color: var(--color-blanc); }
.footer-brand a { color: var(--color-blanc); }
.footer-brand a:hover { color: var(--color-peche); }
.footer-brand .footer-logo { height: 140px; width: auto; }
.footer-brand .footer-col { border-left: 1px solid rgba(255, 255, 255, .45); }
.footer-brand .social a { font-size: 1.75rem; }
@media (max-width: 991.98px) { .footer-brand .footer-col { border-left: 0; } }
.Titre-GR-30px-Prune { font-family: var(--font-title); font-weight: 400; font-size: 1.875rem; text-align: left; color: var(--color-prune); }
@media (min-width: 992px) { .section-bgimg.bg-fixed, .hero-home { background-attachment: fixed; } }
.hero-home { background-position: center; }

/* -------- 8. Compléments pages -------- */
.icon-sm { width: 48px; height: 48px; object-fit: contain; }
.bg-prune, .bg-prune p, .bg-prune a, .bg-prune h1, .bg-prune h2, .bg-prune h3, .bg-prune h4 { color: var(--color-blanc); }
.bg-prune .icon-sm { filter: brightness(0) invert(1); }
.contact-logo { max-width: 220px; height: auto; }
.contact-infos .contact-col + .contact-col { border-left: 1px solid rgba(255, 255, 255, .45); }
.info-box p:last-child, .info-box h4:last-child { margin-bottom: 0; }
.section .row .img-fluid { width: 100%; }
.footer-brand .btn-brand-light { color: var(--color-prune); } .footer-brand .btn-brand-light:hover { color: var(--color-rose); }
.legal-logo { max-width: 260px; height: auto; } .legal-info { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.6; }
.info-box img.img-fluid { margin-top: .75rem; }
@media (max-width: 767.98px) { .hero-home h1 { font-size: 2.5rem; } .hero-home { padding: 3rem 0; } }

/* -------- 9. Images de fond en <img> (importables par Bootstrap Studio) -------- */
.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.has-bg > .bg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.has-bg > .bg-veil { position: absolute; inset: 0; z-index: -1; }
.bg-veil-blanc { background: rgba(255, 255, 255, .85); }
.bg-veil-rose  { background: rgba(255, 234, 241, .85); }