/* ============================================================
   MADELEINE & CLAUDIA — style.css
   ============================================================ */

/* ---------- Fonts locales (priorité) + fallback Google ---------- */
@font-face {
  font-family: 'Varela Round';
  src: url('../fonts/VarelaRound-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --rouge:        #d04447;   /* couleur exacte de la maquette InDesign */
  --rouge-sombre: #a83335;
  --mauve:        #D27DB4;
  --mauve-pale:   #faf0f6;
  --blanc:        #ffffff;
  --texte:        #2d1f27;
  --texte-clair:  #5c3d4a;

  /* Typos : Varela Round pour les titres de section, Nunito pour le logo/accroches */
  --font-titre:   'Nunito', serif;
  --font-accent:  'Nunito', sans-serif;
  --font-logo:    'Nunito', sans-serif;
  --font-corps:   'Varela Round', sans-serif;

  --w:  940px;
  --px: 24px;
  --radius:     14px;
  --shadow:     0 8px 32px rgba(208,68,71,.15);
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-corps); background: var(--blanc); color: var(--texte); line-height: 1.6; overflow-x: hidden; }
img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

.inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ===========================================================
   ARABESQUES DÉCORATIVES
   =========================================================== */
.arabesque {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 1;
}

/* Header — arabesque haut-gauche */
.arabesque--header-gauche {
  top: -20px;
  left: 0px;
  width: 140px;
  transform: rotate(290deg);
}

/* Header — arabesque bas-droite (miroir horizontal + vertical) */
.arabesque--header-droite {
  bottom: -8px;
  right: -12px;
  width: 130px;
  transform: rotate(100deg);
}

/* Section mauve — arabesque bas-droite */
.arabesque--mauve-droite {
  bottom: 30px;
  right: -100px;
  width: 300px;
  transform: rotate(44deg);
  opacity: 1;
}

/* ===========================================================
   VAGUES SVG
   Règle : background CSS = couleur qui ARRIVE
           fill SVG        = couleur qui PART
   Ponts vers le BAS  : M0,0  ... L1440,0  Z  (ferme en haut)
   Ponts vers le HAUT : M0,18 ... L1440,18 Z  (ferme en bas)
   =========================================================== */
.wave { display: block; width: 100%; overflow: hidden; line-height: 0; }
.wave svg { display: block; width: 100%; }
.wave--vers-blanc { background: var(--blanc); }
.wave--vers-mauve { background: var(--mauve); }
.wave--vers-rouge { background: var(--blanc); }
/* Variante : les ponts dépassent PAR-DESSUS la section suivante */
.wave--overlap {
  position: relative;
  z-index: 15;
  margin-bottom: -1px; /* évite le pixel blanc entre vague et section */
}


/* ===========================================================
   1. HEADER — fond rouge, logo seul
   =========================================================== */
.site-header {
  background: var(--rouge);
  text-align: center;
  padding: 32px var(--px) 30px;
  position: relative;
  overflow: hidden;
}
.site-header::before,
.site-header::after {
  content: '';
  position: absolute;
  width: 120px; height: 120px;
  pointer-events: none;
}
.site-header::before { top: 0; left: 0; }
.site-header::after  { bottom: 0; right: 0; transform: rotate(180deg); }

/* Logo — Nunito ExtraBold comme la maquette */
.logo-text {
  display: inline-block;
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
  line-height: 1.05;
  position: relative; z-index: 1;
  text-transform: lowercase;
}
.logo-text .amp { font-size: 1.1em; }
.logo-img { height: 80px; width: auto; margin: 0 auto; }


/* ===========================================================
   2. ZONE BLANCHE — accroche + bouton + étoiles + galerie
   =========================================================== */
.accroche {
  text-align: center;
  padding: 44px var(--px) 0;
  position: relative;            /* ancre le bouton en position absolute */
}
.accroche-tag {
  font-family: var(--font-accent);
  font-size: .94rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 10px;
}
.accroche-titre {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800; color: var(--rouge);
  margin-bottom: 12px; line-height: 1.15;
   text-transform: uppercase;
}
.accroche-sous-titre {
  font-size: .86rem; color: var(--rouge);
  margin: 0 auto;
  font-weight: 300; line-height: 1.6;
   text-transform: uppercase;
}

/* --- Bouton à cheval ---
   Position absolute ancrée en bas de .accroche,
   centrée horizontalement, dépassant de ~26px vers le bas.
   .accroche a un padding-bottom = hauteur_bouton/2 + gap visuel
*/
.accroche {
  padding-bottom: 56px; /* 48px hauteur bouton + 8px d'air au-dessus de l'image */
}
/* --- Bouton à cheval ---
   Technique simple et fiable :
   - le bouton est dans le flux normal, centré
   - .etoiles-wrapper a un margin-top négatif = -(hauteur bouton / 2)
   - le bouton a un z-index supérieur à l'image
   La hauteur du bouton est ~52px → margin négatif = -26px
*/
.btn-contact-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  bottom: -40px;        /* dépasse vers le bas */
  z-index: 20;            /* au-dessus de l'image étoilée */
}

.btn-contact {
  display: inline-block;
  background: var(--rouge); color: #fff;
  font-family: var(--font-corps); font-weight: 500;
  font-size: .92rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 46px;
  border-radius: var(--radius); border: 3px solid var(--rouge);
  cursor: pointer; transition: var(--transition);
  border: 2px solid white;
}
.btn-contact:hover {
  background: var(--rouge-sombre); border-color: var(--rouge-sombre);
    border: 2px solid white;

}

/* --- Bandeau étoilé --- */
.etoiles-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -44px; /* le bouton est déjà géré par translateY(50%) */
}
.etoiles-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--px);
}
.etoiles-bandeau {
  width: 100%; height: 190px;
  border-radius: 12px; overflow: hidden;
  background: #05090f url('../images/hero-bg.webp') center/cover no-repeat;
  position: relative;
}
/* Ponts vers le haut PAR-DESSUS le bas de l'image étoilée */
.etoiles-ponts {
  position: absolute;
  bottom: -1px; left: -5px; right: -5px;
  line-height: 0;
  z-index: 2;
}
.etoiles-ponts svg { display: block; width: 100%; }

/* --- Galerie --- */
.galerie-outer {
  max-width: var(--w);
  margin: 20px auto 0;
  padding: 0 var(--px) 48px;
}
.galerie-img { width: 100%; height: auto; border-radius: 0; }
.galerie-placeholder {
  width: 100%; height: 300px;
  background: #f0e8ec; border: 2px dashed #c8a0b4; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-clair); font-style: italic; font-size: .9rem;
}


/* ===========================================================
   3. EXPERTISES — fond mauve, fullwidth
   =========================================================== */
.expertises {
  background: var(--mauve);
  padding: 8px 0 64px;
  position: relative;
  overflow: hidden;
}

.titre-section {
  display: flex; align-items: center; gap: 20px;
  padding: 40px 0 36px;
}
.titre-section h2 {
  font-family: var(--font-accent);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: normal;
  color: #fff;
  white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .06em;
}
.titre-section h2.rouge { color: var(--rouge); }

.titre-section h2.rouge::after { background: var(--rouge); }
.titre-section .ligne {
  flex: 1; height: 2px; border-radius: 1px;
  background: rgb(255, 255, 255);
}
.titre-section.rouge-theme .ligne { background: var(--rouge); }

.expertises-liste {
  max-width: var(--w);
  margin: 0 auto; padding: 0 var(--px);
  display: flex; flex-direction: column; gap: 16px;
}
.expertise-item {
  background: rgb(255, 255, 255);
  border-radius: var(--radius); padding: 22px 26px;
  transition: var(--transition);
}
.expertise-item:nth-child(odd)  { margin-right: 40px; border:  4px solid var(--rouge); }
.expertise-item:nth-child(even) { margin-left:  40px; border:  4px solid var(--rouge); }
.expertise-item:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.expertise-item:nth-child(odd):hover  { transform: translateX( 4px); }
.expertise-item:nth-child(even):hover { transform: translateX(-4px); }

.expertise-titre {
  font-family: var(--font-accent); font-weight: normal;
  font-size: .9rem; color: var(--rouge);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px;
}
.expertise-desc { font-size: .87rem; color: var(--texte-clair); line-height: 1.65; }


/* ===========================================================
   4. CLIENTS — fond blanc, fullwidth
   =========================================================== */
.clients {
  background: var(--blanc);
  padding: 8px 0 64px;
}

.logos-grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 12px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--px);
  align-items: center;
}
.logo-item {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; box-shadow: none;
  border-radius: 0; padding: 8px;
  aspect-ratio: 1;
  transition: var(--transition);
}
.logo-item:hover { transform: translateY(-3px); }
.logo-item img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(15%); transition: var(--transition);
}
.logo-item:hover img { filter: grayscale(0%); }
.logo-placeholder { font-size: .67rem; color: var(--texte-clair); text-align: center; font-style: italic; opacity: .6; }

/* Option B — Carrousel */
.logos-carrousel-wrapper {
  max-width: var(--w); margin: 0 auto; padding: 0 var(--px);
  overflow: hidden; position: relative;
}
.logos-carrousel-wrapper::before,
.logos-carrousel-wrapper::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 50px; z-index: 2; pointer-events: none;
}
.logos-carrousel-wrapper::before { left: 0;  background: linear-gradient(to right, var(--blanc), transparent); }
.logos-carrousel-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--blanc), transparent); }
.logos-carrousel-track { display: flex; gap: 16px; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.logos-carrousel-track .logo-item { flex: 0 0 calc(33.333% - 11px); }
.carrousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: var(--rouge); color: #fff; border: none; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(208,68,71,.3); transition: var(--transition);
}
.carrousel-btn:hover { background: var(--rouge-sombre); }
.carrousel-btn.prev { left: -44px; }
.carrousel-btn.next { right: -44px; }


/* ===========================================================
   5. FOOTER
   =========================================================== */
footer {
  background: var(--rouge);
  color: rgba(255,255,255,.9);
  text-align: center;
  padding: 28px var(--px);
  font-size: .85rem;
  position: relative;
}
footer a { color: rgba(255,255,255,.8); transition: var(--transition); }
footer a:hover { color: #fff; text-decoration: underline; }
.footer-sep { margin: 0 10px; opacity: .4; }


/* ===========================================================
   MODALES
   =========================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45,20,25,.65); backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box {
  background: #fff; border-radius: 20px; padding: 40px 36px;
  max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto;
  position: relative; box-shadow: 0 24px 80px rgba(45,20,25,.3);
  transform: translateY(24px) scale(.97);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin; scrollbar-color: #D27DB4 transparent;
}
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; font-size: 1.5rem;
  color: var(--texte-clair); cursor: pointer; line-height: 1;
  transition: var(--transition);
}
.modal-close:hover { color: var(--rouge); transform: rotate(90deg); }
.modal-titre { font-family: var(--font-titre); font-size: 1.7rem; color: var(--rouge); margin-bottom: 6px; }
.modal-sous-titre { font-size: .88rem; color: var(--texte-clair); margin-bottom: 28px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .82rem; font-weight: 500; color: var(--texte-clair); }
.form-group label .req { color: var(--rouge); }
.form-group input,
.form-group textarea {
  border: 1.5px solid #e8d5d8; border-radius: 10px;
  padding: 11px 14px; font-family: var(--font-corps); font-size: .9rem;
  color: var(--texte); background: var(--mauve-pale);
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(208,68,71,.1); background: #fff;
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-upload-label {
  display: flex; align-items: center; gap: 10px;
  border: 2px dashed #D27DB4; border-radius: 10px; padding: 14px 16px;
  cursor: pointer; background: var(--mauve-pale);
  transition: var(--transition); font-size: .88rem; color: var(--texte-clair);
}
.form-upload-label:hover { border-color: var(--rouge); color: var(--rouge); }
.form-upload-label input { display: none; }
.upload-icon { font-size: 1.3rem; }
.upload-filename { font-style: italic; font-size: .82rem; margin-top: 4px; color: var(--rouge); }
.form-rgpd {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .82rem; color: var(--texte-clair); line-height: 1.5;
}
.form-rgpd input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--rouge); flex-shrink: 0; }
.btn-envoyer {
  width: 100%; background: var(--rouge); color: #fff;
  border: 2px solid var(--rouge); border-radius: 50px; padding: 14px;
  font-family: var(--font-corps); font-size: 1rem; font-weight: 500;
  cursor: pointer; transition: var(--transition); margin-top: 8px;
}
.btn-envoyer:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); }
.btn-envoyer:disabled { opacity: .6; cursor: not-allowed; }

/* FriendlyCaptcha */
.frc-captcha {
  margin-bottom: 4px;
  border-radius: 10px;
  overflow: hidden;
}
/* Harmonise la couleur du widget avec la charte */
.frc-captcha .frc-button {
  background: var(--mauve-pale) !important;
  border-color: #e8d5d8 !important;
  color: var(--texte-clair) !important;
  font-family: var(--font-corps) !important;
}
.form-message {
  text-align: center; padding: 12px; border-radius: 10px;
  font-size: .88rem; margin-top: 12px; display: none;
}
.form-message.success { background: #e8f5e9; color: #2e7d32; display: block; }
.form-message.error   { background: #fce4ec; color: #c62828; display: block; }
.mentions-content h2 { font-family: var(--font-titre); font-size: 1.3rem; color: var(--rouge); margin: 20px 0 8px; }
.mentions-content p,
.mentions-content address { font-size: .88rem; color: var(--texte-clair); line-height: 1.7; font-style: normal; margin-bottom: 4px; }


/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 768px) {
  .expertise-item:nth-child(odd)  { margin-right: 14px; }
  .expertise-item:nth-child(even) { margin-left:  14px; }
  .form-grid  { grid-template-columns: 1fr; }
  .modal-box  { padding: 28px 20px; }
}

@media (max-width: 600px) {
  :root { --px: 14px; }
  .logos-grille { grid-template-columns: repeat(5, 1fr); gap: 8px 4px; }
  .logo-item { padding: 4px; }
  .expertise-item:nth-child(odd)  { margin-right: 0; }
  .expertise-item:nth-child(even) { margin-left:  0; }
  .expertise-item { padding: 16px 14px; }
  .etoiles-bandeau { height: 140px; }
}


/* ===========================================================
   ANIMATIONS
   =========================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.accroche-tag        { animation: fadeUp .6s .10s ease both; }
.accroche-titre      { animation: fadeUp .6s .22s ease both; }
.accroche-sous-titre { animation: fadeUp .6s .34s ease both; }
.btn-contact-wrap    { animation: fadeUp .6s .46s ease both; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }