/* ===========================================================
   Marie Alin — it's maigo
   Palette: white background, dark navy blue, dark green accent
   =========================================================== */

:root {
  --color-navy: #16324a;
  --color-navy-light: #274a68;
  --color-green-dark: #2e4d3a;
  --color-green-light: #e8efe9;
  --color-white: #ffffff;
  --color-cream: #f7f6f2;
  --color-text: #223038;
  --color-text-light: #5a6b73;
  --color-border: #e2e6e4;

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif;

  --radius: 14px;
  --radius-lg: 24px;
  --container-width: 1120px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 0.9, 0.34, 1.1);

  --shadow-sm: 0 2px 10px rgba(22, 50, 74, 0.06);
  --shadow-md: 0 12px 32px rgba(22, 50, 74, 0.1);
  --shadow-lg: 0 24px 60px rgba(22, 50, 74, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--color-navy);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2.section-title, h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; color: var(--color-text); }

a { color: var(--color-green-dark); text-decoration: none; transition: color 0.15s var(--ease-out); }
a:hover { text-decoration: underline; }

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

.section { padding: clamp(56px, 9vw, 128px) 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-mark {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}
.brand-sub {
  font-size: 0.72rem;
  color: var(--color-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--color-navy);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a.active {
  border-bottom-color: var(--color-green-dark);
  text-decoration: none;
}
.site-nav a.nav-cta {
  background: var(--color-navy);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  border-bottom: none;
}
.site-nav a.nav-cta:hover { background: var(--color-green-dark); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 0.85rem;
}
.lang-link { color: var(--color-text-light); font-weight: 600; }
.lang-link.is-current { color: var(--color-navy); text-decoration: underline; }
.lang-sep { color: var(--color-border); }

/* ---------- Flash messages ---------- */
.flash-container { padding-top: 16px; }
.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.flash-success { background: var(--color-green-light); color: var(--color-green-dark); border: 1px solid var(--color-green-dark); }
.flash-error { background: #fbeaea; color: #8a2b2b; border: 1px solid #d98a8a; }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(120% 140% at 15% 0%, var(--color-cream) 0%, var(--color-white) 60%);
  padding: clamp(64px, 10vw, 140px) 0;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-subtitle {
  color: var(--color-text-light);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 46ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-visual { display: flex; justify-content: center; }
.torii-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px) scale(1.015); text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--color-navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-green-dark); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); }
.btn-outline:hover { background: var(--color-navy); color: #fff; box-shadow: var(--shadow-md); }

/* ---------- Intro / about grids ---------- */
.intro-grid, .about-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.about-grid { grid-template-columns: 1fr 300px; }

.intro-greeting {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-navy);
}
.link-arrow { font-weight: 600; }

/* ---------- Photo placeholders (swap for real photos) ----------
   Traité comme une "vignette" à part entière plutôt qu'un cadre en
   pointillés (qui a un côté "brouillon inachevé") : dégradé doux,
   coins arrondis généreux, ombre portée, et une icône simple — en
   attendant les vraies photos, la page reste présentable. */
.photo-placeholder {
  position: relative;
  background: linear-gradient(155deg, #eef3ee 0%, var(--color-cream) 55%, #eef2f6 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(22, 50, 74, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  text-align: center;
  min-height: 260px;
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease-out);
}
.photo-placeholder::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4d3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M21 16l-5-5-4 4-2-2-5 5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: var(--shadow-sm);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 20px));
}
.photo-placeholder span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 40px;
}
.photo-portrait { aspect-ratio: 4 / 5; }
.photo-portrait-tall { aspect-ratio: 3 / 4; min-height: 340px; }

/* Real uploaded photos (replaces the dashed placeholder once an image has
   been added via the admin panel) */
.photo-real {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.photo-real.photo-portrait { aspect-ratio: 4 / 5; }
.photo-real.photo-portrait-tall { aspect-ratio: 3 / 4; min-height: 340px; }
.service-photo.photo-real { min-height: 220px; aspect-ratio: 4 / 3; }

/* ---------- Quicklinks cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  display: block;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s var(--ease-out), transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 14px; }
.card-link { color: var(--color-green-dark); font-weight: 700; }

/* ---------- Actualités (page d'accueil) ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.news-card {
  display: block;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s var(--ease-out), transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
  color: inherit;
}
.news-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.news-card-thumb { display: block; margin: -20px -20px 16px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.news-card-thumb img { width: 100%; height: 160px; object-fit: cover; display: block; }
.news-card-date { display: block; font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 6px; }
.news-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.news-card p { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 14px; }
.news-card-link { color: var(--color-green-dark); font-weight: 700; }
.news-view-all { margin-top: 28px; text-align: center; }

/* ---------- Philosophy ---------- */
.philosophy-section { background: linear-gradient(160deg, var(--color-navy) 0%, #0f2536 100%); color: #fff; }
.philosophy-section .section-title { color: #fff; }
.philosophy-section p { color: #dbe4ea; }
.philosophy-inner { max-width: 760px; }
.philosophy-lead {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff !important;
  border-left: 3px solid var(--color-green-light);
  padding-left: 16px;
}

/* ---------- Instagram ---------- */
.instagram-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.instagram-tile {
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--color-green-light), var(--color-cream));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(22, 50, 74, 0.05);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.instagram-tile:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); }

/* ---------- Closing CTA ---------- */
.closing-section { background: linear-gradient(135deg, var(--color-green-light) 0%, #eef4ee 100%); }
.closing-inner { text-align: center; max-width: 640px; }

/* ---------- Page header ---------- */
.page-header { padding-bottom: 24px; }
.page-intro, .page-note { color: var(--color-text-light); font-size: 1.05rem; }
.page-note { font-style: italic; }

/* ---------- Timeline (About) ---------- */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.timeline-grid-secondary { margin-bottom: 0; }
.timeline-list, .lang-list { list-style: none; padding: 0; margin: 0; }
.timeline-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline-date { font-weight: 700; color: var(--color-green-dark); font-size: 0.85rem; }
.timeline-text { color: var(--color-text); }
.lang-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border); }

/* ---------- Services ---------- */
.service-block {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  padding: 48px 0;
  align-items: start;
}
.service-block:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.service-block-alt { direction: rtl; }
.service-block-alt > * { direction: ltr; }
.service-photo { min-height: 220px; }
.service-examples-title { font-size: 0.95rem; color: var(--color-green-dark); margin-top: 20px; }
.service-examples { padding-left: 20px; }
.service-examples li { margin-bottom: 6px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-form .form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-weight: 600; font-size: 0.9rem; color: var(--color-navy); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-green-dark);
}
.form-error { color: #8a2b2b; font-size: 0.85rem; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }

.contact-direct {
  background: var(--color-cream);
  border-radius: var(--radius);
  padding: 28px;
}
.contact-direct p { margin-bottom: 16px; }
.config-note { font-size: 0.8rem; color: var(--color-text-light); font-style: italic; margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: #cdd8de;
  margin-top: 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 48px 0 24px;
}
.footer-brand .brand-mark { color: #fff; }
.footer-brand p { color: #b7c4cb; font-size: 0.9rem; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a, .footer-social a { color: #cdd8de; }
.footer-social p { margin-bottom: 8px; font-weight: 600; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 16px 0;
  font-size: 0.82rem;
  color: #90a0a8;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-inner, .intro-grid, .about-grid, .instagram-inner,
  .timeline-grid, .service-block, .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .service-block { direction: ltr; }
  .hero-visual { order: -1; max-width: 220px; margin: 0 auto 24px; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .site-nav.is-open { display: flex; }
  .lang-switch { margin-left: 0; margin-top: 10px; }
}

/* ===========================================================
   Ponts avec les blocs Gutenberg natifs (v2)
   Permet d'utiliser les blocs standards de l'éditeur (Bouton,
   Groupe, Colonnes...) et de retrouver automatiquement le design
   du site, sans plugin de "page builder".
   =========================================================== */

/* wp_nav_menu() enveloppe chaque lien de menu dans un <li> ; le design
   d'origine attendait des liens <a> directement enfants de .site-nav /
   .footer-nav (flexbox). "display: contents" fait disparaître la boîte
   du <li> lui-même tout en gardant son contenu (le lien) dans le flux
   flex du parent — pas besoin de retoucher le CSS existant. */
.site-nav li, .footer-nav li { display: contents; }

/* Bloc Bouton : le style par défaut ("Remplissage") ressemble à
   .btn-primary ; le style natif "Contour" ressemble à .btn-outline. */
.wp-block-button__link {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 999px;
  padding: 13px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.wp-block-button__link:hover { background: var(--color-navy-light); transform: translateY(-1px) scale(1.015); box-shadow: var(--shadow-md); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--color-navy); color: #fff; }
.wp-block-buttons { gap: 16px; }

/* Style de bloc personnalisé "Carte" pour le bloc Groupe — reprend
   l'apparence de .card (utilisé à l'origine pour les liens rapides de
   la page d'accueil). Déclaré côté PHP via register_block_style()
   (voir functions.php) sous le nom "card", ce qui le fait apparaître
   dans le panneau "Styles" du bloc Groupe dans l'éditeur. */
.wp-block-group.is-style-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--color-cream);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
}
.wp-block-group.is-style-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Style de bloc personnalisé "Bloc service" pour le bloc Groupe —
   reprend l'apparence de .service-block (photo + texte côte à côte)
   utilisé sur la page Services. */
.wp-block-group.is-style-service-block {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 782px) {
  .wp-block-group.is-style-service-block { grid-template-columns: 1fr; }
}

/* Alignements natifs "large" / "pleine largeur" (l'éditeur les propose
   grâce à add_theme_support('align-wide') dans functions.php) — sans
   ces deux règles, choisir "Pleine largeur" dans l'éditeur ne change
   rien à l'affichage. Recette standard WordPress. */
.alignwide { margin-left: calc(25% - 25vw); margin-right: calc(25% - 25vw); max-width: 1400px; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

/* ---------- Bandeau photo défilant ----------
   Style de bloc "Bandeau défilant" (voir functions.php) appliqué à un
   bloc Galerie natif : Ajouter un bloc > Galerie > ajoutez vos photos,
   puis dans le panneau "Styles" à droite choisissez "Bandeau
   défilant". Fonctionnne aussi bien avec les espaces réservés actuels
   qu'avec de vraies photos une fois ajoutées. Pour un bandeau qui
   traverse tout l'écran, réglez en plus l'alignement du bloc sur
   "Pleine largeur" dans la barre d'outils du bloc. */
.wp-block-gallery.is-style-scrolling-band {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 20px;
  padding: 0;
  list-style: none;
}
.wp-block-gallery.is-style-scrolling-band.alignfull { padding: 0 24px; }
.wp-block-gallery.is-style-scrolling-band .wp-block-image {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  margin: 0;
}
.wp-block-gallery.is-style-scrolling-band .wp-block-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: var(--shadow-sm);
}
/* La classe .is-marquee-ready n'est ajoutée que par JavaScript, une
   fois les photos dupliquées pour un bouclage sans à-coup — voir
   main.js. Sans JavaScript, le bandeau reste un simple bloc défilable
   au doigt/à la molette (overflow: hidden ci-dessus devient le seul
   souci potentiel ; en pratique les navigateurs sans JS sont rarissimes
   et le contenu reste visible, juste non-animé). */
.wp-block-gallery.is-style-scrolling-band.is-marquee-ready {
  animation: marquee-scroll var(--marquee-duration, 32s) linear infinite;
}
.wp-block-gallery.is-style-scrolling-band.is-marquee-ready:hover,
.wp-block-gallery.is-style-scrolling-band.is-marquee-ready:focus-within {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.is-style-scrolling-band.is-marquee-ready {
    animation: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===========================================================
   Animation d'apparition au défilement (voir assets/js/main.js)
   La classe .reveal n'est ajoutée que par JavaScript, juste avant
   d'observer l'élément : sans JavaScript (ou navigateur très ancien),
   le contenu reste visible normalement, sans aucune dépendance à ce
   bloc CSS pour être lisible.
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }