/*
Theme Name:  Oui
Theme URI:   https://zaa.cc
Description: Thème de blocs de la campagne « Oui ! Des jours heureux sont possibles ». Basé sur le wireframe 1c.
Author:      ZAA
Author URI:  https://zaa.cc
Template:    twentytwentyfive
Version:     0.3.3
Requires at least: 6.6
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oui
*/

/* ============================================================
   Variables
   Les couleurs, polices, rayons et ombres sont définis dans le
   theme.json (variables --wp--preset--* et --wp--custom--*).
   Les alias ci-dessous permettent de réutiliser le CSS de la
   maquette sans dupliquer les valeurs.

   Contrastes validés (WCAG 4,5:1) :
   rose #9e273d / blanc        7,5:1  ✓ boutons, liens
   turquoise #2d7886 / blanc   5,1:1  ✓ boutons secondaires
   noir #1d1d1d / blanc       17,4:1  ✓ texte
   jaune #f7931e + texte noir  7,3:1  ✓ fonds jaunes
   saumon #db5850 / blanc      3,8:1  ✗ décoratif ou grand texte
   ============================================================ */
:root {
  --rose:            var(--wp--preset--color--rose);
  --rose-fonce:      var(--wp--preset--color--rose-fonce);
  --saumon:          var(--wp--preset--color--saumon);
  --jaune:           var(--wp--preset--color--jaune);
  --turquoise:       var(--wp--preset--color--turquoise);
  --turquoise-fonce: var(--wp--preset--color--turquoise-fonce);
  --noir:            var(--wp--preset--color--noir);
  --black:           var(--wp--preset--color--noir);
  --gray-light:      var(--wp--preset--color--gris-pale);
  --gray-mid:        var(--wp--preset--color--gris-moyen);
  --white:           var(--wp--preset--color--blanc);

  --font-heading:   var(--wp--preset--font-family--heading);   /* Please Display : titres */
  --font-body:      var(--wp--preset--font-family--body);      /* Roboto : texte courant */
  --font-condensed: var(--wp--preset--font-family--condensed); /* Roboto Condensed : boutons + navigation */
  --font-poster:    var(--wp--preset--font-family--poster);    /* Please Poster : le mot « Oui » */

  --radius:        var(--wp--custom--radius);      /* 12px */
  --radius-20:     20px;
  --radius-lg:     var(--wp--custom--radius-lg);   /* 24px */
  --radius-pill:   var(--wp--custom--radius-pill); /* 30px */
  --radius-cercle: 50%;
  --shadow:        var(--wp--custom--shadow);
  --shadow-card:   var(--wp--custom--shadow-card);

  --font-scale: 1;

  /* Tailles de texte : définies dans le theme.json (source unique). */
  --fs-xs:   var(--wp--preset--font-size--x-small);
  --fs-sm:   var(--wp--preset--font-size--small);
  --fs-md:   var(--wp--preset--font-size--medium);
  --fs-lg:   var(--wp--preset--font-size--large);
  --fs-xl:   var(--wp--preset--font-size--x-large);
  --fs-xxl:  var(--wp--preset--font-size--xx-large);
  --fs-xxxl: var(--wp--preset--font-size--xxx-large);

  /* Hauteur de l'en-tête fixe (menu centré, une seule barre). */
  --header-height: 72px;
}

/* Accessibilité : mise à l'échelle du texte (widget a11y) */
html { font-size: calc(16px * var(--font-scale)); }

/* Mode contraste élevé */
body.high-contrast {
  --rose:            #6f1b2b;
  --rose-fonce:      #521320;
  --saumon:          #8f2a24;
  --jaune:           #7a4200;
  --turquoise:       #1c4d57;
  --turquoise-fonce: #143a42;
  --noir:            #000000;
  --black:           #000000;
  --white:           #FFFFFF;
}
body.high-contrast * { border-color: #000 !important; }

/* Les boutons Gutenberg utilisent les variables preset WordPress et non
   les alias du thème : en contraste élevé on fonce les presets UNIQUEMENT
   sur les boutons, sans toucher aux fonds de section. */
body.high-contrast .wp-block-button__link,
body.high-contrast .wp-element-button {
  --wp--preset--color--rose: #6f1b2b;
  --wp--preset--color--rose-fonce: #521320;
  --wp--preset--color--turquoise: #1c4d57;
  --wp--preset--color--turquoise-fonce: #143a42;
}

/* Indicateur de focus clavier visible sur tous les éléments interactifs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 2px;
}

/* Respect de « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--noir);
  background: var(--white);
  line-height: 1.7;
  font-size: var(--fs-lg);
  overflow-x: hidden;
}

/* Les liens de contenu sont soulignés pour être repérables sans dépendre
   de la seule couleur (WCAG 1.4.1). Les éléments d'interface sont exclus. */
a { color: var(--rose); text-decoration: underline; }

.wp-block-navigation a,
.wp-block-button__link,
.btn,
.skip-link,
.social-icons a,
.logo-item a,
.oui-overlay a {
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: var(--radius);
}

strong { font-weight: 700; }

img { max-width: 100%; display: block; }
ul { list-style: none; }

/* Utilitaires d'espacement */
.mb-1 { margin-bottom: 1rem; }
.mt-1 { margin-top: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }

/* Contenu masqué visuellement mais présent dans le DOM */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.round-border { border-radius: var(--radius); }

/* ---- Classes typographiques Please (Adobe Fonts) ----
   .oui          Please Poster VF 950 — réservée au mot « Oui »
   .slogan       Please Display VF 900
   .please-text  Please Display VF 400 */
.oui {
  font-family: var(--font-poster);
  font-weight: 950;
}
.slogan {
  font-family: var(--font-heading);
  font-weight: 900;
}
.please-text {
  font-family: var(--font-heading);
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--noir);
  line-height: 1.15;
}

/* Neutralise les marges de flux injectées par l'éditeur dans les grilles */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }

/* Antidote au débordement horizontal mobile : un enfant de grille ne
   rétrécit pas sous son contenu par défaut. */
main .is-layout-grid > * { min-width: 0; }

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--noir);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   EN-TÊTE — barre fixe SOMBRE (wireframe 1c), menu centré, pas de logo
   ============================================================ */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--noir);
  box-shadow: 0 2px 20px rgba(29,29,29,.25);
  transition: box-shadow .3s;
}
#main-header.scrolled { box-shadow: 0 4px 30px rgba(29,29,29,.45); }

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: var(--header-height);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* menu centré (wireframe 1c) */
}

/* Décalage du contenu sous l'en-tête fixe */
body { padding-top: var(--header-height); }

/* Barre d'admin WP : décaler l'en-tête fixe */
body.admin-bar #main-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #main-header { top: 46px; }
}

/* Aperçu dans l'Éditeur de site : l'en-tête est en position fixed, donc
   sans hauteur dans le flux ; on donne au canevas une hauteur minimale. */
.editor-styles-wrapper { min-height: 120px; }

/* ---- Bloc Navigation (menu principal, sur fond noir) ---- */
.main-nav .wp-block-navigation-item__content {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--white);
  padding: .5rem 1rem;
  border-radius: var(--radius);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--white);
}
.main-nav .wp-block-navigation-item__content:hover,
.main-nav .current-menu-item > .wp-block-navigation-item__content {
  background: rgba(255,255,255,.15);
  color: var(--white);
}
/* Hamburger natif (sous 600 px) : blanc sur l'en-tête sombre */
.main-nav .wp-block-navigation__responsive-container-open { color: var(--white); }
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover {
  text-decoration: none;
}
.main-nav .wp-block-navigation__submenu-icon {
  color: var(--noir);
  transition: transform .25s;
}
.main-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon { transform: rotate(180deg); }

/* Sous-menus */
.main-nav .wp-block-navigation__submenu-container {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-mid);
  min-width: 220px;
  overflow: hidden;
}
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: .65rem 1.25rem;
  font-size: var(--fs-md);
  color: var(--noir);
  border-radius: 0;
  white-space: normal;
}
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--gray-light);
  color: var(--rose);
}

/* Élément de menu portant la classe « cta » : bouton rose */
.main-nav .cta > .wp-block-navigation-item__content {
  background: var(--rose);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: .55rem 1.4rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(158,39,61,.35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.main-nav .cta > .wp-block-navigation-item__content:hover {
  background: var(--rose-fonce);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(158,39,61,.45);
}

/* ---- Menu mobile : overlay natif WP (zone navigation-overlay) ---- */
.oui-overlay {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
}
.oui-overlay-top {
  display: flex;
  justify-content: flex-end;
}
.oui-overlay .wp-block-navigation-item__content {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--noir);
  padding: .5rem 0;
}
.oui-overlay .wp-block-navigation-item__content:hover { color: var(--rose); }

/* ============================================================
   SECTIONS COMMUNES
   ============================================================ */
section { padding: 5rem 2rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .75rem;
}
.section-title {
  font-size: var(--fs-xxl);
  font-weight: 800;
  color: var(--noir);
  margin-bottom: 1rem;
}
.section-intro {
  font-size: var(--fs-xl);
  color: var(--noir);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Pastille */
.pill {
  display: inline-block;
  background: var(--gray-light);
  color: var(--rose);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: .3rem .9rem;
  border-radius: var(--radius-20);
  letter-spacing: .05em;
}

/* Fonds utilitaires */
.bg-gray { background: var(--gray-light); }
.bg-rose { background: var(--rose); }
.bg-turquoise { background: var(--turquoise); }

/* Sections sur fond foncé : texte blanc */
.bg-rose h1, .bg-rose h2, .bg-rose h3, .bg-rose p,
.bg-turquoise h1, .bg-turquoise h2, .bg-turquoise h3, .bg-turquoise p {
  color: var(--white);
}
.bg-rose a, .bg-turquoise a { color: var(--white); text-decoration: underline; }

/* Bloc déclaration inversé (wireframe 1c) : texte blanc semi-gras */
.declaration p {
  font-weight: 500;
  line-height: 1.65;
}
.declaration p:last-of-type { font-weight: 800; }

/* Les sections de page sont des groupes pleine largeur */
main .wp-block-group.alignfull { padding: 5rem 2rem; }
@media (max-width: 768px) {
  main .wp-block-group.alignfull { padding: 3.5rem 1.25rem; }
}

/* ============================================================
   HÉROS DE LA CAMPAGNE (wireframe 1c : animation immersive sombre
   plein écran — sera remplacé par le diaporama Slider Revolution)
   ============================================================ */
.hero-campagne,
main .wp-block-group.hero-campagne {
  padding: 0;                 /* le diaporama occupe tout l'espace */
  position: relative;
}
/* Zone d'attente tant que le diaporama Slider Revolution n'existe pas */
.hero-placeholder {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  background: var(--noir);
  padding: 4rem 2rem;
}
/* « OUI ! » géant détouré (contour blanc, intérieur transparent) */
.hero-oui-big {
  font-family: var(--font-poster);   /* le mot « Oui » : Please Poster VF */
  font-weight: 950;
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: .85;
  letter-spacing: -0.02em;
  color: var(--white);                 /* repli sans text-stroke */
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
}
@supports (-webkit-text-stroke: 3px #fff) {
  .hero-oui-big { color: transparent; }
}
/* Pastille rose sous le titre */
.hero-oui-chip {
  background: var(--rose);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  padding: .35rem 1rem;
}

/* ============================================================
   BOUTONS (correspondance maquette ↔ blocs Gutenberg)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-lg);
  padding: .8rem 1.8rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn a { color: inherit; text-decoration: none; }
.btn-primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 6px 20px rgba(158,39,61,.35);
}
.btn-primary:hover { background: var(--rose-fonce); color: #fff; }
.btn-secondary {
  background: var(--turquoise);
  color: #fff;
  box-shadow: 0 6px 20px rgba(45,120,134,.30);
}
.btn-secondary:hover { background: var(--turquoise-fonce); color: #fff; }
.btn-lg { padding: 1rem 2.2rem; font-size: var(--fs-xl); }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(158,39,61,.30);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  box-shadow: none;
  background: transparent;
}

/* CTA pleine largeur (wireframe 1c) : bouton noir, capitales 
.wp-block-button.btn-cta-full { width: 100%; }
.wp-block-button.btn-cta-full .wp-block-button__link {
  width: 100%;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  font-size: var(--fs-lg);
  padding: 1rem 1.5rem;
  background: var(--noir);
  color: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.wp-block-button.btn-cta-full .wp-block-button__link:hover {
  background: var(--rose);
  color: var(--white);
  transform: none;
}*/

/* ============================================================
   LOGOS DES ORGANISATIONS (statique — [oui_organisations])
   Flex avec retour à la ligne, centré. Aucune animation.
   ============================================================ */
/* Bande de logos bordée sur fond blanc (wireframe 1c) */
.logos-band,
main .wp-block-group.logos-band {
  background: var(--white);
  border-top: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  padding: 1rem 0;
}
.logos-marquee {
  margin: 0 auto;
  padding: 1.5rem 2rem;
}
.logos-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3.5rem;
}
.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
.logo-item a { display: flex; align-items: center; }
.logo-item img {
  max-height: 110px;
  height: 110px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  transition: transform .3s;
}
.logo-item a:hover img { transform: scale(1.06); }
.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 170px;
  max-width: 260px;
  height: 110px;
  padding: 0 1.25rem;
  background: var(--gray-light);
  border: 1px dashed var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--rose);
  line-height: 1.25;
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer {
  background: var(--noir);
  color: rgba(255,255,255,.85);
  padding: 3rem 2rem 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.footer p { font-size: var(--fs-md); color: rgba(255,255,255,.85); }
.footer a { color: #fff; text-decoration: underline; }
.footer a:hover { color: var(--gray-mid); }
.footer-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
}
.footer-bottom p { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
/* Nom du site (bloc Titre du site, non lié) dans la ligne de copyright */
.footer-bottom .wp-block-site-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* Réseaux sociaux (structure dans assets/css/social-icons.css) */
.footer .social-icons {
  --social-icon-size: 18px;
  --social-icons-gap: .75rem;
}
.footer .social-icons a { color: #fff; }

/* ============================================================
   WIDGET D'ACCESSIBILITÉ
   ============================================================ */
#a11y-widget {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.a11y-toggle {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-cercle);
  background: var(--turquoise);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(45,120,134,.45);
  transition: background .2s, transform .2s;
  color: #fff;
}
.a11y-toggle:hover { background: var(--turquoise-fonce); transform: scale(1.08); }
.a11y-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.a11y-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 50px rgba(29,29,29,.2);
  padding: 1.5rem;
  width: 240px;
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.a11y-panel.open { display: flex; }
.a11y-panel h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--noir);
  margin-bottom: .25rem;
}
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a11y-option label {
  font-size: var(--fs-md);
  color: var(--noir);
  font-weight: 600;
}
.a11y-controls { display: flex; gap: .4rem; }
.a11y-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gray-mid);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.a11y-btn:hover {
  background: var(--gray-light);
  border-color: var(--turquoise);
}
.a11y-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}
.a11y-toggle-switch input { opacity: 0; width: 0; height: 0; }
.a11y-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-mid);
  border-radius: var(--radius-lg);
  transition: background .2s;
}
.a11y-toggle-switch .slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: var(--radius-cercle);
  transition: transform .2s;
}
.a11y-toggle-switch input:checked + .slider { background: var(--turquoise); }
.a11y-toggle-switch input:checked + .slider::before { transform: translateX(20px); }

/* ============================================================
   ANIMATIONS À L'APPARITION
   ============================================================ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  section { padding: 3.5rem 1.25rem; }
  .footer { padding: 2.5rem 1.25rem 1.5rem; }
}

/* Newsletter */

.zaa-nl-form-intro {
  text-align:center;
  margin-bottom:20px;
}
.zaa-nl-el-input {
  width: 100%;
  margin-bottom:20px;
  max-width: 100% !important;
}
.zaa-form button {
  width:100%;
}
.zaa-nl-form .zaa-nl-el-input {
  border:2px solid var(--black);
}
.zaa-form input:focus-visible, .zaa-form select:focus-visible, textarea:focus-visible, .zaa-form button:focus-visible, summary:focus-visible, .zaa-form [tabindex]:focus-visible {
  outline: 3px solid var(--wp--preset--color--rose-fonce) !important;
}