/*
Theme Name: Mes Éphémères
Theme URI: https://mes-ephemeres.com
Author: Vivien Faivre
Author URI: https://mes-ephemeres.com
Description: Thème WordPress sur-mesure pour Mes Éphémères — reprise fidèle du site React (Angélique Blampey, création florale événementielle).
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mes-ephemeres
Tags: florist, portfolio, one-page, custom-colors
*/

/* =====================================================================
   PARTIE 1 — REPRISE À L'IDENTIQUE DE src/index.css DU SITE REACT
   Aucune valeur modifiée.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Outfit:wght@300;400;500&display=swap');

:root {
  /* Nouvelle Palette : Luxe naturel, discret, contemporain */
  --color-blanc-casse: #F9F9F8;
  --color-ivoire: #F2EFE9;
  --color-beige-mineral: #DCD8D3;
  --color-lin: #C2BBB2;
  --color-gris-chaud: #9A958F;
  --color-brun-leger: #8C7B6C;
  --color-vert-sombre: #2A3628;
  --color-vert-sauge: #6B7F62;
  --color-noir-doux: #1A1A1A;
  
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Outfit', sans-serif;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1.5rem;
  --spacing-md: 2.5rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-blanc-casse);
  color: var(--color-noir-doux);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Typographie Éditoriale */
h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

h1 { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.1; margin-bottom: var(--spacing-sm); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: var(--spacing-md); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; margin-bottom: 1rem; color: var(--color-gris-chaud); }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.6;
}

/* Utilities */
.text-center { text-align: center; }
.container { padding: 0 5%; max-width: 1400px; margin: 0 auto; }
.section { padding: var(--spacing-xl) 0; }
.section-sm { padding: var(--spacing-lg) 0; }

/* Animations douces */
.fade-in {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Navbar Minimaliste */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 2rem 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  transition: background 0.5s ease, padding 0.5s ease, color 0.5s ease;
  color: #FFFFFF;
}

.navbar.scrolled, .navbar.solid {
  background: rgba(249, 249, 248, 0.95);
  backdrop-filter: blur(10px);
  color: var(--color-noir-doux);
  padding: 1rem 5%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-cta {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Hero Section */
.hero {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  color: #FFFFFF;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.65);
}

.hero-content {
  z-index: 1;
  max-width: 800px;
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
}

.btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 2.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 2px;
}

.btn-primary {
  background: var(--color-vert-sauge);
  color: #FFFFFF;
  border: 1px solid var(--color-vert-sauge);
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-vert-sauge);
}

.btn-white {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.btn-white:hover {
  background: #FFFFFF;
  color: var(--color-noir-doux);
}

/* Intro Section */
.intro-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-noir-doux);
}

/* Grid Layouts (Éditorial) */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

.editorial-grid.reverse .editorial-text {
  order: -1;
}

.editorial-img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
}

.editorial-text {
  max-width: 500px;
  margin: 0 auto;
}

.editorial-text p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  text-align: justify;
}

/* Timeline (Processus) */
.timeline {
  max-width: 800px;
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

.timeline-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-vert-sauge);
  line-height: 1;
}

.timeline-content h4 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.timeline-content p {
  text-align: justify;
}

/* Portfolio Masonry (Respiration) */
.portfolio-masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.portfolio-item-large {
  grid-column: span 2;
  height: 80vh;
}

.portfolio-item {
  height: 60vh;
}

.portfolio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-wrapper {
  overflow: hidden;
  position: relative;
}

.portfolio-wrapper:hover .portfolio-img {
  transform: scale(1.03);
}

/* Formulaire Contact */
.contact-form {
  max-width: 700px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--color-gris-chaud);
}

.form-control {
  width: 100%;
  padding: 1rem 0;
  border: none;
  border-bottom: 1px solid var(--color-beige-mineral);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--color-noir-doux);
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-bottom-color: var(--color-noir-doux);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Footer */
footer {
  background: var(--color-ivoire);
  padding: var(--spacing-lg) 5%;
  text-align: center;
}

footer .footer-logo {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

footer p {
  margin-bottom: 0.5rem;
  color: var(--color-gris-chaud);
}

@media (max-width: 768px) {
  /* Typographie */
  h1 { font-size: 2.2rem; margin-top: 2rem; }
  h1 span { font-size: 2rem !important; }
  h2 { font-size: 1.8rem; }
  
  /* Sections et Container */
  .section, .section-sm { padding: 3rem 0; }
  .container { padding: 0 1rem; }
  
  /* Navbar (empiler sur mobile) */
  .navbar {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  .navbar.scrolled, .navbar.solid {
    padding: 1rem;
  }
  .logo img {
    height: 50px !important;
  }
  .nav-links {
    display: flex; /* Rendre visible sur mobile */
    gap: 1.5rem;
    font-size: 0.8rem;
    width: 100%;
    justify-content: center;
  }

  /* Hero Section */
  .hero-content {
    margin-top: 5rem; /* Laisser de la place pour la navbar empilée */
  }
  .hero p {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }

  /* Grille Editoriale et Services */
  .editorial-grid, .services-grid { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  .editorial-img { 
    height: 60vh; 
  }
  .editorial-grid.reverse .editorial-text { order: 1; }
  .editorial-text {
    padding: 15% 5% !important;
  }

  /* Masonry (Portfolio) */
  .portfolio-masonry { 
    grid-template-columns: 1fr; 
    gap: 2px;
  }
  .portfolio-item-large, .portfolio-item { 
    grid-column: span 1; 
    height: 50vh; 
  }

  /* Timeline */
  .timeline-item { 
    flex-direction: column; 
    gap: 0.5rem; 
  }
  .timeline-number {
    font-size: 1.5rem;
  }

  /* Formulaire */
  .contact-form {
    padding: 0 1rem;
  }
}
.hero-logo-title {
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 300;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
}
.hero-logo-subtitle {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 1rem 0 0 0;
  color: #fff;
}

@media (max-width: 768px) {
  .hero-logo-title { font-size: 2.8rem; }
  .hero-logo-subtitle { font-size: 0.9rem; letter-spacing: 0.15em; }
}

/* =====================================================================
   PARTIE 2 — ADAPTATIONS WORDPRESS
   Le rendu visuel reste celui du React. On ajoute uniquement ce dont
   WordPress a besoin et qui n'existe pas dans un site React.
   ===================================================================== */

/* La barre d'administration WordPress est fixée en haut de l'écran.
   Sans ceci, elle passerait par-dessus le menu du site. */
.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .navbar { top: 46px; }
}

/* Le sélecteur universel du React met tout à zéro : on protège la
   barre d'administration pour qu'elle garde son apparence normale. */
#wpadminbar, #wpadminbar * { box-sizing: content-box; }

/* Images insérées par WordPress (médiathèque, contenu d'article) */
img { max-width: 100%; height: auto; }
.editorial-img, .portfolio-img, .hero-bg { max-width: none; }

/* Contenu rédigé dans l'éditeur WordPress (pages libres, mentions légales) */
.entry-content { max-width: 800px; margin: 0 auto; }
.entry-content p { margin-bottom: 1.5rem; color: var(--color-gris-chaud); font-size: 1.1rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1.5rem 1.5rem; color: var(--color-gris-chaud); }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content a { text-decoration: underline; }

/* =====================================================================
   PARTIE 3 — HABILLAGE DU FORMULAIRE CONTACT FORM 7

   Mesures relevées sur le site React en ligne (fenêtre de 1280 px) :
     formulaire ......... 700 px de large, centré
     champs pleine largeur 700 px
     champs par paire ... 334 px + 32 px d'écart + 334 px
     bouton ............. 700 px, soit toute la largeur du formulaire

   Les règles ci-dessous s'appliquent au formulaire où qu'il se trouve
   dans la page, pour qu'il garde cette présentation même s'il est
   inséré depuis l'éditeur de la page.
   ===================================================================== */

/* Le formulaire garde toujours sa largeur de 700 px, centré. */
.wpcf7,
.wpcf7-form {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* L'enveloppe que le plugin place autour de chaque champ ne doit pas
   casser la largeur ni la mise en colonnes. */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Tous les champs reprennent exactement l'apparence de .form-control */
.wpcf7-form .wpcf7-form-control,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: 1rem 0;
	border: none;
	border-bottom: 1px solid var(--color-beige-mineral);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--color-noir-doux);
	border-radius: 0;
	transition: border-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form .wpcf7-form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-bottom-color: var(--color-noir-doux);
}

.wpcf7-form textarea,
.wpcf7-form textarea.wpcf7-form-control {
	resize: vertical;
	min-height: 120px;
}

/* Les textes d'aide en gris clair, comme dans le React */
.wpcf7-form ::placeholder {
	color: var(--color-lin);
	opacity: 1;
}

/* Le bouton d'envoi : identique au React — toute la largeur du
   formulaire, jamais davantage. */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 100%;
	text-align: center;
	padding: 1rem 2.5rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--color-vert-sauge);
	color: #FFFFFF;
	border: 1px solid var(--color-vert-sauge);
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
	background: transparent;
	color: var(--color-vert-sauge);
}

/* L'indicateur d'envoi passe sous le bouton au lieu de le pousser. */
.wpcf7-spinner {
	display: block;
	margin: 1rem auto 0 auto;
	background-color: var(--color-vert-sauge);
}

/* Messages du plugin : ton doux, aligné sur la charte */
.wpcf7 form .wpcf7-response-output {
	max-width: 700px;
	margin: 2.5rem auto 0 auto;
	padding: 1rem 1.5rem;
	border: 1px solid var(--color-beige-mineral);
	border-radius: 2px;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	text-align: center;
	color: var(--color-noir-doux);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-vert-sauge);
	color: var(--color-vert-sombre);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--color-brun-leger);
	color: var(--color-brun-leger);
}

/* Petit message sous un champ mal rempli */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--color-brun-leger);
}
.wpcf7-form .wpcf7-not-valid {
	border-bottom-color: var(--color-brun-leger);
}

/* Filet de sécurité : si le gabarit du formulaire n'a pas encore été
   collé dans l'extension, le plugin sort les champs les uns sous les
   autres dans des paragraphes. On leur donne au moins l'espacement
   des .form-group du React, pour que la page reste présentable. */
.wpcf7-form > p {
	margin-bottom: 2rem;
}
.wpcf7-form label {
	display: block;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	color: var(--color-gris-chaud);
}

@media (max-width: 768px) {
	.wpcf7,
	.wpcf7-form {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------
   AJUSTEMENTS DEMANDÉS PAR LE PORTEUR DU PROJET (écarts assumés
   par rapport à la maquette React, relevés le 24/08/2026)

   1. Tous les intitulés du formulaire ont la même typographie.
      Sur le React, la dernière question était en Cormorant Garamond
      noir 16 px, les autres en Outfit gris 13,6 px majuscules.
   2. L'espace avant le bouton passe de 72 px à 40 px, soit à peine
      plus que l'espace entre deux questions (32 px).

   Les marques de priorité sont nécessaires : ces valeurs sont écrites
   directement sur les éléments par le gabarit du formulaire.
   --------------------------------------------------------------------- */

.wpcf7-form label,
.wpcf7-form .form-group label {
	display: block !important;
	font-family: var(--font-sans) !important;
	font-size: 0.85rem !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--color-gris-chaud) !important;
	margin-bottom: 0.5rem !important;
}

/* L'espace avant le bouton.

   Une marge haute ne suffit pas : selon la façon dont l'extension
   enveloppe le bouton, elle fusionne avec la marge basse du champ
   précédent, ou pas — le résultat est imprévisible.
   On neutralise donc toute marge et on utilise un espace intérieur,
   qui ne fusionne jamais. L'écart devient certain :
   32 px du champ précédent + 8 px ici = 40 px. */

.wpcf7-form .text-center,
.wpcf7-form > div:last-child,
.wpcf7-form > p:last-of-type {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0.5rem !important;
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpcf7-form .wpcf7-submit {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Cas où le bouton n'est enveloppé par rien du tout. */
.wpcf7-form > input[type="submit"],
.wpcf7-form > button[type="submit"] {
	margin-top: 0.5rem !important;
}

/* ---------------------------------------------------------------------
   ESPACE FANTÔME SOUS LES CHAMPS

   Un champ de saisie se comporte par défaut comme un mot dans une
   phrase : le navigateur réserve sous lui la place des lettres qui
   descendent sous la ligne, comme le « p » de « papa ». Cela ajoute
   quelques pixels invisibles sous chaque champ — et surtout sous la
   grande zone de texte, juste avant le bouton.

   On demande donc aux champs de se comporter comme des blocs.
   --------------------------------------------------------------------- */

.wpcf7-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select {
	display: block;
	vertical-align: top;
}

/* La zone de texte garde la hauteur de la maquette React. */
.wpcf7-form textarea {
	height: 120px;
	min-height: 120px;
}

/* Verrouillage de l'espace avant le bouton : 32 px du dernier champ
   + 8 px, soit 40 px — à peine plus que les 32 px entre deux
   questions. Sur les navigateurs qui l'ignorent, la règle est sans
   effet et l'espace reste celui calculé plus haut. */
.wpcf7-form .form-group:has(textarea) {
	margin-bottom: 2rem !important;
}

/* ---------------------------------------------------------------------
   CRÉDITS PHOTOGRAPHIQUES — bas de la page Réalisations

   Remerciement collectif, sans attribution image par image.
   Volontairement discret : un filet fin le sépare de l'appel à
   l'action, l'intitulé reprend la typographie des titres de rubrique,
   les noms celle des textes éditoriaux.
   --------------------------------------------------------------------- */

.credits-photos {
	max-width: 900px;
	margin: 6rem auto 0 auto;
	padding-top: 3rem;
	border-top: 1px solid var(--color-beige-mineral);
	text-align: center;
}

.credits-intitule {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--color-gris-chaud);
	margin-bottom: 1rem;
}

.credits-mot {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--color-gris-chaud);
	margin-bottom: 2rem;
}

.credits-liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	font-family: var(--font-serif);
	font-size: 1.1rem;
	color: var(--color-brun-leger);
}

/* Un point discret sépare les noms, sans jamais se retrouver seul
   en début de ligne : il est attaché au nom qui le précède. */
.credit-nom {
	position: relative;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.credit-nom::after {
	content: "·";
	position: absolute;
	right: -0.9rem;
	color: var(--color-lin);
}

.credit-nom:last-child::after {
	content: none;
}

.credit-nom:hover {
	opacity: 1;
	color: var(--color-vert-sauge);
	border-bottom-color: var(--color-vert-sauge);
}

@media (max-width: 768px) {
	.credits-photos {
		margin-top: 4rem;
		padding-top: 2.5rem;
	}
	.credits-mot {
		font-size: 1rem;
	}
	.credits-liste {
		flex-direction: column;
		gap: 1rem;
		font-size: 1rem;
	}
	/* Empilés, les points de séparation n'ont plus lieu d'être. */
	.credit-nom::after {
		content: none;
	}
}