/*
Theme Name: Amène ta Quille — Enfant
Theme URI: https://byo.eaudevigne.com
Author: Eau de Vigne
Author URI: https://eaudevigne.com
Description: Thème enfant de Twenty Twenty-Five pour « Amène ta Quille par Eau de Vigne » — site de réservation restaurant avec droit de bouchon & vin bio apporté. Design system terre/vigne/lie, polices auto-hébergées Fraunces + Inter.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atq
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   Amène ta Quille — styles globaux du thème enfant
   Les tokens (palette, typo) viennent de theme.json.
   Ici : reset léger + utilitaires transverses non couverts par les blocs.
   ========================================================================== */

:root {
  /* Dérivés tons clairs (utilisés dans les patterns / composants) */
  --atq-sable-clair: #efe7d7;
  --atq-carte: #fdfaf3;
  --atq-vigne-clair: #eef2e8;
  --atq-alerte-clair: #fbeede;
  --atq-lie-clair: #fdf5f2;
  --atq-papier: #F7F1E7;
  --atq-terre: #3E2A22;
  --atq-vigne: #4C6141;
  --atq-lie: #7A2E33;
  --atq-alerte: #B5701F;
  --atq-sable: #E4DBCB;
  --atq-encre: #2A231F;
  /* Rayons & ombres (esthétique papier, ombres minimales) */
  --atq-radius-sm: 6px;
  --atq-radius: 9px;
  --atq-radius-lg: 14px;
  --atq-shadow-focus: 0 0 0 3px rgba(76, 97, 65, .18);
}

/* Reset marges par défaut du thème parent sur le body FSE */
body { -webkit-font-smoothing: antialiased; }

/* Lisibilité longue lecture */
.entry-content, .wp-block-post-content { line-height: 1.65; }

/* Focus visible cohérent (anneau vigne) sur tous éléments focalisables */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--atq-shadow-focus);
  border-radius: var(--atq-radius-sm);
}

/* Cible tactile minimum (accessibilité) */
button, a, input, select, textarea { min-height: 44px; }
a.wp-block-button__link { min-height: 0; }

/* Signature « par Eau de Vigne » réutilisable */
.atq-signature {
  font-family: Fraunces, serif;
  font-style: italic;
  color: var(--atq-vigne);
  font-size: 0.9rem;
}
.atq-signature::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--atq-vigne);
  vertical-align: middle;
  margin-right: 8px;
}

/* ==========================================================================
   Turn 2 — Déclinaison desktop (≥ 1024px) + corrections responsive
   Direction 2a « Nappe & carnet » en grand format.
   Mobile-first : ces règles ne s'appliquent qu'au desktop.
   ========================================================================== */

@media (min-width: 1024px) {

  /* CONTENEUR : forcer .wp-block-post-content ET son parent à pleine largeur.
     useRootPaddingAwareAlignments + is-layout-flow imposent 1165px centré — on casse ça. */
  .has-global-padding .wp-block-post-content,
  .has-global-padding.is-layout-constrained .wp-block-post-content,
  .wp-block-post-content {
    max-width: none !important;
    width: 100% !important;
    margin-left: calc(-1 * var(--wp--preset--spacing--50, 1.5rem)) !important;
    margin-right: calc(-1 * var(--wp--preset--spacing--50, 1.5rem)) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Annule la marge négative via le parent (qui a le padding global) */
  .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Les sections alignfull : 100% viewport, contenu interne centré à 1180px */
  .wp-block-post-content > .wp-block-group.alignfull {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(1.25rem, calc((100vw - 1180px) / 2)) !important;
    padding-right: max(1.25rem, calc((100vw - 1180px) / 2)) !important;
    box-sizing: border-box !important;
  }
  /* Le contenu interne des sections (texte, grilles) reste centré à 1180px max */
  .wp-block-post-content > .wp-block-group.alignfull > *:not(.wp-block-image):not(.wp-block-post-template):not(.wp-block-query) {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero : le 1er bloc (.wp-block-post-content > :first-child) devient une grille 2 colonnes.
     Enfants : [header inline][image][texte] → image à droite, texte à gauche. */
  .wp-block-post-content > .wp-block-group.alignfull:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    align-items: stretch;
  }
  /* Header inline : spanne les 2 colonnes en haut */
  .wp-block-post-content > .wp-block-group.alignfull:first-child > .wp-block-group.alignwide {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* Image hero : colonne droite, pleine hauteur */
  .wp-block-post-content > .wp-block-group.alignfull:first-child > .wp-block-image.alignfull {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-height: 520px;
    border-radius: 0 !important;
  }
  .wp-block-post-content > .wp-block-group.alignfull:first-child > .wp-block-image.alignfull img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 520px;
    border-radius: 0 !important;
  }
  /* Texte hero : colonne gauche, centré verticalement */
  .wp-block-post-content > .wp-block-group.alignfull:first-child > .wp-block-group:last-child {
    grid-column: 1;
    grid-row: 2;
    padding: 56px 56px 56px 0;
    align-self: center;
    max-width: 520px;
  }
  /* H1 hero plus grand en desktop (≈82px comme la maquette 2a) */
  .wp-block-post-content > .wp-block-group.alignfull:first-child h1 {
    font-size: clamp(3.5rem, 6vw, 5.1rem) !important;
    line-height: 0.92;
  }
  .wp-block-post-content > .wp-block-group.alignfull:first-child p {
    font-size: 1.1875rem;
  }

  /* Header : top-bar sticky, flou (comme 2a/3e) */
  .atq-header > .wp-block-group {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 241, 231, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--atq-sable);
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 0 !important;
  }

  /* "Comment ça marche" : le conteneur interne des 3 étapes passe en 3 colonnes.
     Cible le 2e bloc alignfull (section comment-ça-marche) → son groupe interne
     .has-global-padding.is-layout-constrained qui contient les 3 étapes + la 4e carte. */
  .wp-block-post-content > .wp-block-group.alignfull:nth-child(2) > .wp-block-group.is-layout-constrained {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  /* La 4e carte "et le resto la sert" prend toute la largeur sous les 3 */
  .wp-block-post-content > .wp-block-group.alignfull:nth-child(2) > .wp-block-group.is-layout-constrained > .wp-block-group:last-child {
    grid-column: 1 / -1;
  }

  /* "par Eau de Vigne" : 2 colonnes (texte + visuel) — comme 2a.
     Cible la section contenant le h2 "œnologue" et son encart interne sable-clair. */
  .wp-block-post-content > .wp-block-group.alignfull:last-child .has-sable-clair-background-color.has-sable-clair-background-color {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }

  /* "Le filtre" : 2 colonnes (texte gauche, badges droite) — comme 2a */
  .has-vigne-background-color.alignfull {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 100%;
    padding: 56px calc((100vw - 1180px) / 2 + 60px) !important;
  }

  /* "Les restos" : grille 3 colonnes pour les cartes (quand il y en a) */
  .wp-block-query .is-layout-flow,
  .wp-block-query .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  /* Padding latéral desktop cohérent pour les sections pleine largeur */
  .wp-block-group.alignfull:not(.atq-header):not(.atq-footer) {
    padding-left: max(1.25rem, calc((100vw - 1180px) / 2)) !important;
    padding-right: max(1.25rem, calc((100vw - 1180px) / 2)) !important;
  }

  /* Contenu interne des sections centré à 1180px max */
  .wp-block-group.alignfull .wp-block-group[style*="padding"] {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Corrections mobile (≤ 430px) — boutons pleine largeur, pas de débordement flex */
@media (max-width: 600px) {
  .wp-block-buttons {
    flex-direction: column;
    gap: 11px;
  }
  .wp-block-buttons .wp-block-button {
    width: 100%;
  }
  .wp-block-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
    display: block;
  }
  .wp-block-group[style*="flex-wrap:nowrap"]:not([style*="justify-content"]) {
    flex-wrap: wrap !important;
  }
}

/* Image hero : ratio propre sur tous écrans, pas d'étirement déformé */
.wp-block-image img {
  width: 100%;
  height: auto;
}