/* ==========================================================================
   Institut capillaire 5ème Avenue — Design system
   Tokens + classes de texte (convention WeWeb — Atelier Digital)
   Valeurs reprises de public/config/config.json (palette « amber ») + mesures
   DOM de l'export (typographie, fonds de section).
   ========================================================================== */

/* ---------- Polices locales (jamais de CDN) ------------------------------- */
@font-face {
  font-family: "Grota-Bold";
  src: url("../fonts/Grota-Sans-Bold.woff2") format("woff2"),
       url("../fonts/Grota-Sans-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grota-Medium";
  src: url("../fonts/Grota-Sans-Medium.woff2") format("woff2"),
       url("../fonts/Grota-Sans-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grota-Light";
  src: url("../fonts/Grota-Sans-Light.woff2") format("woff2"),
       url("../fonts/Grota-Sans-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kite One";
  src: url("../fonts/KiteOne-Regular.woff2") format("woff2"),
       url("../fonts/KiteOne-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 1. Tokens de couleur (palette amber) -------------------------- */
:root {
  --color-dark-primary:  #dec09e;  /* Dark Primary (tan)   */
  --color-primary:       #f4dec5;  /* Primary (beige)      */
  --color-light-primary: #ffedd8;  /* Light Primary (crème)*/
  --color-text:          #5d4037;  /* Text (brun)          */
  --color-mauve:         #daa2ee;  /* Secondary Text (titres) */
  --color-divider:       #f0d8ff;  /* Divider (lavande)    */
  --color-noir:          #191919;
  --color-gris:          #606060;
  --color-white:         #ffffff;
  --color-rose:          #e91e63;  /* "Octobre Rose" / "Noël" */
  --color-vert:          #2e7d32;  /* "2025" (Noël)        */

  /* Polices par rôle */
  --font-title: "Kite One", "Comic Sans MS", cursive;   /* titres (Kite One) */
  --font-sub:   "Grota-Medium", "Roboto", system-ui, sans-serif; /* sous-titres h2 */
  --font-body:  "Grota-Light", "Roboto", system-ui, sans-serif;  /* corps */
  --font-bold:  "Grota-Bold", "Roboto", system-ui, sans-serif;

  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--color-mauve);
  --bs-link-hover-color: var(--color-dark-primary);
}

/* ==========================================================================
   2. Balises + classes de texte (convention WeWeb)
   Categorie-[Alignement][Graisse]-[TaillePx]-[Couleur]
   ========================================================================== */
body { font-family: var(--font-body); color: var(--color-text); font-weight: 300; line-height: 1.43; font-size: 1.25rem; }

/* Titres = Kite One (mauve par défaut) */
h1, h2, .title-kite { font-family: var(--font-title); color: var(--color-mauve); font-weight: 400; line-height: 1.3; }
h1 { font-size: 2.8125rem; }   /* 45px — titre hero */
h2 { font-size: 1.875rem; }    /* 30px — titres de section */
/* Sous-titres = Grota Medium brun */
h3, .subtitle { font-family: var(--font-sub); font-weight: 500; color: var(--color-text); font-size: 1.25rem; line-height: 1.43; }
p  { font-family: var(--font-body); font-weight: 300; color: var(--color-text); }
strong, b, .fw-bold { font-family: var(--font-sub) !important; font-weight: 500 !important; }
a { text-decoration: none; }

/* --- Titres nommés (Kite One) --- */
.Titre-CR-45px-Mauve { font-family: var(--font-title); font-size: 2.8125rem; text-align: center; color: var(--color-mauve); line-height: 1.4286; }
.Titre-CR-40px-Tan   { font-family: var(--font-title); font-size: 2.5rem;    text-align: center; color: var(--color-dark-primary); line-height: 1.4286; }
.Titre-CR-30px-Mauve { font-family: var(--font-title); font-size: 1.875rem;  text-align: center; color: var(--color-mauve); line-height: 1.4286; }
.Titre-CR-30px-Tan   { font-family: var(--font-title); font-size: 1.875rem;  text-align: center; color: var(--color-dark-primary); line-height: 1.4286; }
.Titre-CR-30px-Rose  { font-family: var(--font-title); font-size: 1.875rem;  text-align: center; color: var(--color-rose); line-height: 1.4286; }

/* --- Sous-titres (Grota Medium brun) --- */
.Sous-CM-20px-Brun { font-family: var(--font-sub); font-weight: 500; font-size: 1.25rem; text-align: center; color: var(--color-text); }
.Sous-GM-20px-Brun { font-family: var(--font-sub); font-weight: 500; font-size: 1.25rem; text-align: left;   color: var(--color-text); }

/* --- Corps (Grota Light brun) --- */
.Body-GR-20px-Brun { font-family: var(--font-body); font-weight: 300; font-size: 1.25rem; text-align: left;   color: var(--color-text); line-height: 1.43; }
.Body-CR-20px-Brun { font-family: var(--font-body); font-weight: 300; font-size: 1.25rem; text-align: center; color: var(--color-text); line-height: 1.43; }

.text-mauve { color: var(--color-mauve) !important; }
.text-tan   { color: var(--color-dark-primary) !important; }
.text-rose  { color: var(--color-rose) !important; }
.text-vert  { color: var(--color-vert) !important; }
.text-brun  { color: var(--color-text) !important; }

/* ==========================================================================
   3. Fonds de section
   ========================================================================== */
.bg-creme    { background-color: var(--color-light-primary); }       /* #ffedd8 */
.bg-beige    { background-color: var(--color-primary); }             /* #f4dec5 */
.bg-lavande  { background-color: rgba(240, 216, 255, .53); }         /* divider 53% */
.bg-tan      { background-color: var(--color-dark-primary); }
.section { padding: 4rem 0; }

/* ==========================================================================
   4. Fonds en <img> (seul format importé 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-creme { background: rgba(255,237,216,.85); }

/* ==========================================================================
   5. Boutons (repris de config buttons1/buttons2)
   ========================================================================== */
.btn-lavande {
  font-family: var(--font-title); font-weight: 400; font-size: 1.25rem;
  color: var(--color-gris); background-color: var(--color-divider);
  border: 2px solid var(--color-divider); border-radius: 10px; padding: 10px; transition: none;
}
.btn-lavande:hover { color: var(--color-gris); background-color: var(--color-mauve); border-color: var(--color-mauve); }
.btn-beige {
  font-family: var(--font-title); font-weight: 400; font-size: 1.25rem;
  color: var(--color-gris); background-color: var(--color-primary);
  border: 2px solid var(--color-primary); border-radius: 10px; padding: 10px; transition: none;
}
.btn-beige:hover { color: var(--color-gris); background-color: var(--color-dark-primary); border-color: var(--color-dark-primary); }

/* ==========================================================================
   6. Header / Navbar (crème translucide, liens mauve Kite One)
   ========================================================================== */
.navbar-brand-bar { background-color: rgba(255,237,216,.8); padding: 0; min-height: 121px; }
.navbar-brand-bar .navbar-brand { padding: 0; }
.navbar-brand-bar .navbar-brand img { height: 120px; width: auto; }
.navbar-brand-bar .nav-link {
  font-family: var(--font-title); font-weight: 700; color: var(--color-mauve); font-size: 1.375rem;
  padding-left: 1rem; padding-right: 1rem;
}
.navbar-brand-bar .nav-link:hover,
.navbar-brand-bar .nav-link:focus,
.navbar-brand-bar .nav-link.active { color: var(--color-dark-primary); }
.navbar-brand-bar .dropdown-menu { background-color: var(--color-light-primary); border: 1px solid var(--color-divider); border-radius: 8px; }
.navbar-brand-bar .dropdown-item { font-family: var(--font-title); color: var(--color-mauve); }
.navbar-brand-bar .dropdown-item:hover { background-color: var(--color-divider); color: var(--color-dark-primary); }
.navbar-brand-bar .navbar-toggler { border-color: var(--color-mauve); }

/* ==========================================================================
   7. Composants de contenu
   ========================================================================== */
/* Galerie hero (3 photos) */
.photo-rounded { border-radius: 12px; width: 100%; height: 100%; object-fit: cover; }
.hero-photo { border-radius: 12px; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Bloc "Femmes / Hommes" : 2 photos | texte | 2 photos */
.collage-img { border-radius: 10px; width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 1.25rem; }

/* FAQ accordéon — barres de l'export : 78px, bordure tan 1px, alternance beige / lavande */
.accordion-5av { margin-left: -17px; margin-right: -13px; }
.accordion-5av .accordion-item { border: 1px solid var(--color-dark-primary); border-radius: 0; margin: 0; background: transparent; }
.accordion-5av .accordion-item:nth-child(odd)  .accordion-button { background: var(--color-primary); }
.accordion-5av .accordion-item:nth-child(even) .accordion-button { background: var(--color-divider); }
.accordion-5av .accordion-button {
  padding: 25px 20px; border-radius: 0 !important; box-shadow: none;
  font-family: var(--font-sub); font-weight: 500; font-size: 18px; line-height: 26px; color: var(--color-text);
}
.accordion-5av .accordion-button::after { display: none; }
.accordion-5av .accordion-button:not(.collapsed) { color: var(--color-text); }
.accordion-5av .accordion-button:focus { box-shadow: none; }
.accordion-5av .accordion-body { font-family: var(--font-body); color: var(--color-text); background: #fff; }

/* Grille partenaires (logos) */
.partner-logo { width: 100%; height: 110px; object-fit: contain; filter: grayscale(100%); opacity: .85; }

/* Octobre Rose / Noël : logo d'association */
.assoc-logo { max-width: 180px; height: auto; }

/* Carte catégorie (image + bandeau-lien lavande) */
.cat-card { position: relative; text-align: center; }
.cat-card .cat-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.cat-card .cat-caption {
  display: block; margin-top: .75rem; background: var(--color-divider);
  font-family: var(--font-title); color: var(--color-mauve); font-size: 1.15rem;
  padding: .5rem 1rem; border-radius: 8px;
}
.cat-card:hover .cat-caption { background: var(--color-mauve); color: #fff; }

/* Galerie produits (modèles de perruques / turbans) */
.product-card { text-align: center; margin-bottom: 1.5rem; }
.product-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.product-card .product-name { font-family: var(--font-sub); color: var(--color-text); font-size: 1rem; margin-top: .5rem; }

/* Avant / Après */
.ba-item { text-align: center; }
.ba-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.ba-label { font-family: var(--font-title); color: var(--color-mauve); margin-top: .4rem; font-size: 1.05rem; }
.ba-name { font-family: var(--font-title); color: var(--color-mauve); font-size: 1.5rem; text-align: center; margin: 1.5rem 0 .75rem; }

/* ==========================================================================
   8. Footer (beige, liens mauve, logos)
   ========================================================================== */
.footer-brand { background-color: rgba(244,222,197,.77); color: var(--color-gris); font-family: var(--font-title); }
.footer-brand .footer-body { padding: 10px 0 0; }
.footer-brand .footer-logo { width: 100%; max-width: 258px; height: 150px; object-fit: contain; }
.footer-brand .biosthetique { width: 100%; max-width: 258px; height: 140px; object-fit: contain; }
.footer-brand a { color: var(--color-mauve); }
.footer-brand a:hover { color: var(--color-dark-primary); }
.footer-brand .footer-nav p,
.footer-brand .footer-coord p { margin: 0; font-size: 1.25rem; line-height: 40.5px; text-align: center; }
.footer-brand .footer-coord { border-left: 2px solid var(--color-dark-primary); color: var(--color-gris); }
.footer-brand .footer-copy { text-align: center; font-size: 1rem; line-height: 23px; color: #9e9e9e; margin: 41px 0 0; padding-bottom: 14px; }
.footer-strip { background-color: var(--color-light-primary); height: 141px; }

/* ==========================================================================
   9. Bannière de sous-page (titre)
   ========================================================================== */
.page-banner { padding: 30px 0 2rem; text-align: center; }
.page-banner h1 { color: var(--color-mauve); }

img { max-width: 100%; }


/* ==========================================================================
   10. Grille AppDrag (Bootstrap 3) : conteneur 1170px, gouttière 30px
   ========================================================================== */
.container { --bs-gutter-x: 30px; }
@media (min-width: 1200px) { .container { max-width: 1170px; } }
.row:not([class*=" g-"]):not([class^="g-"]):not([class*="gx-"]) { --bs-gutter-x: 30px; }

/* ==========================================================================
   11. Séparateurs de section en biais (formes SVG AppDrag, 70px)
   <div class="shape shape-top shape-lavande" aria-hidden="true"><svg …></svg></div>
   ========================================================================== */
.shape { display: block; width: 100%; height: 70px; line-height: 0; }
.shape svg { display: block; width: 100%; height: 100%; }
.shape-creme polygon, .shape-lavande polygon, .shape-tan polygon { fill: currentColor; }
.shape .o5 { opacity: .5; }
.shape-creme   { color: rgba(255,237,216,.8); }
.shape-lavande { color: var(--color-divider); }
.shape-tan     { color: var(--color-dark-primary); }

/* ==========================================================================
   12. Page Perruques (mesures de l'export)
   ========================================================================== */
.txt p { margin-bottom: 28.57px; }
.txt p:last-child { margin-bottom: 0; }
.Titre-CR-40px-Mauve { font-family: var(--font-title); font-size: 2.5rem; line-height: 1.4286; text-align: center; color: var(--color-mauve); }
.Titre-CR-30px-Tan2  { font-family: var(--font-title); font-size: 1.875rem; line-height: 1.4286; text-align: center; color: var(--color-dark-primary); }
.Body-CR-20px-Tan    { font-family: var(--font-title); font-size: 1.25rem; line-height: 1.4286; text-align: center; color: var(--color-dark-primary); }
.Sous-CM-20px-Mauve  { font-family: var(--font-sub); font-weight: 500; font-size: 1.25rem; line-height: 1.4286; text-align: center; color: var(--color-mauve); }
.text-mauve-medium   { font-family: var(--font-sub); font-weight: 500; color: var(--color-mauve); }
.square-photo { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.model-card .model-img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.model-card .model-caption { display: block; background: var(--color-primary); height: 35px; line-height: 35px; text-align: center;
  font-family: var(--font-title); font-size: 1.125rem; color: var(--color-gris); }
.btn-icon { width: 54px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.video-frame { display: block; width: 100%; aspect-ratio: 555/314; border: 0; }

.text-gris { color: var(--color-gris) !important; }

/* Perruques — espacements calés sur l'export (1440px) */
.pp-s1 { padding-top: 100px; }
.pp-s1 .pp-sub { margin: 14px 0 48px; }
.pp-s1 .text-mauve-medium { margin-top: 34px; }
.pp-s1 .txt { margin-bottom: 55px; }
.pp-s2 > .container { padding-top: 50px; }
.pp-photos { margin-top: 61px; }
.pp-photos { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.pp-photos > div { padding: 0 5px; }
.pp-s2 .pp-btns { margin-top: 80px; margin-bottom: 79px; }
.pp-s3 > .container { padding-top: 62px; }
.pp-models-intro { padding-top: 18px; text-align: center; }
.pp-models-intro .pp-intro-img { display: block; width: 100%; height: 300px; object-fit: contain; margin: 32px 0 24px; }
.pp-models-intro p { padding: 0 20px; }
.pp-models { --bs-gutter-x: 0; margin: 0; }
.pp-models > .col { padding: 0 5px; margin-bottom: 10px; }
.pp-models .model-caption { margin: 0; }
.pp-s3 .pp-btns { margin-top: 46px; margin-bottom: 79px; }
.pp-s4 > .container { padding-top: 54px; }
.pp-galaxy-title { margin-bottom: 44px; }
.pp-video { margin-top: 10px; }
.pp-back { margin-top: 65px; margin-bottom: 80px; }

/* Header — grille de l'export : logo centré en col-2, menu centré en col-10, filets tan */
@media (min-width: 992px) {
  .navbar-brand-bar > .container { align-items: stretch; min-height: 121px; }
  .navbar-brand-bar .navbar-brand { flex: 0 0 165px; margin: 0; padding: 0; text-align: center; }
  .navbar-brand-bar .navbar-collapse { margin-left: 30px; align-self: flex-end; padding-bottom: 20px; }
  .navbar-brand-bar .navbar-nav > .nav-item { border-right: 2px solid var(--color-dark-primary); }
  .navbar-brand-bar .navbar-nav > .nav-item:last-child { border-right: 0; }
  .navbar-brand-bar .navbar-nav .nav-link { padding: 0 25px 10px; line-height: 22px; }
}

/* Formulaire (repris de l'export : champs gris clair sans bordure, texte tan) */
.form-ad { display: block; width: 100%; background: #f0f0f0; border: 0; border-radius: 4px; padding: 0 12px;
  font-family: var(--font-sub); font-size: 18px; color: var(--color-dark-primary); }
textarea.form-ad { padding: 8px 12px; resize: vertical; }
.form-ad:focus { outline: 2px solid var(--color-mauve); }

/* La vague crème du header recouvre le haut de la 1re section (comme dans l'export) */
.navbar-brand-bar + .shape { position: relative; z-index: 2; margin-bottom: -70px; }