/*
Theme Name: AgroPoly
Theme URI: https://agropoly.gr
Description: Thème enfant Blocksy pour le site institutionnel de la coopérative AgroPoly (Messénie). Gabarits codés d'après le wireframe validé.
Author: ArtemisLab
Version: 1.12.15
Template: blocksy
Text Domain: agropoly
*/

/* Langues (v1.12.0) : étiquette glissante du connecteur en français.
   Sélecteur plus spécifique que .ap-extranet::after, donc prioritaire.
   À vérifier à l'écran ; si elle déborde, revenir à « EXTRANET ». */
html[lang^="fr"] .ap-extranet::after {
  content: 'ESPACE PRODUCTEUR';
}

/* ============================================================
   1. Jetons de design (repris du design system AgroPoly)
   ============================================================ */
:root {
  --ap-olive: #7F6818;
  --ap-gold: #E2C85F;
  --ap-sand: #E6DCC3;
  --ap-cream: #F7F4EC;
  --ap-white: #FFFFFF;
  --ap-ink: #1B1A16;
  --ap-ink-muted: #47443E;
  --ap-ink-faint: #8A857A;
  --ap-line: rgba(27, 26, 22, 0.14);
  --ap-line-on-deep: rgba(247, 244, 236, 0.34);

  --ap-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ap-display: "Noto Serif Display", "Times New Roman", serif;

  --ap-ease: cubic-bezier(.2, .6, .2, 1);
  --ap-ease-out: cubic-bezier(.16, 1, .3, 1);

  --ap-page-x: 132px;
}

/* ============================================================
   2. Remise à zéro légère
   ============================================================ */
body.ap {
  margin: 0;
  background: var(--ap-cream);
  font-family: var(--ap-sans);
  font-weight: 300;
  color: var(--ap-ink);
  -webkit-font-smoothing: antialiased;
}
body.ap img { max-width: 100%; }
body.ap a { color: var(--ap-olive); text-decoration: none; }
body.ap a:hover { color: color-mix(in oklab, var(--ap-olive) 74%, var(--ap-ink)); }
body.ap h1, body.ap h2, body.ap h3, body.ap p, body.ap ul { margin: 0; }
body.ap *, body.ap *::before, body.ap *::after { box-sizing: border-box; }
.ap-band { height: 64px; background: #7F6818; }

/* ============================================================
   3. En-tête
   ============================================================ */
.ap-header {
  position: relative;
  background: var(--ap-white);
  padding: 32px 40px 26px;
}
.ap-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.ap-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ap-logo img { width: 132px; display: block; }
.ap-logo__tagline {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-ink-muted);
}
.ap-header__actions { justify-self: end; align-self: start; }

/* Connecteur extranet : pastille en relief qui glisse et révèle son étiquette */
.ap-extranet {
  position: relative;
  z-index: 2;
  margin-right: 56px;
  display: inline-block;
  background: transparent;
  color: var(--ap-olive);
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: var(--ap-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 460ms var(--ap-ease);
}
.ap-extranet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFDF7, #F0EBDC);
  box-shadow: 0 7px 16px rgba(74, 60, 14, 0.18), 0 2px 4px rgba(74, 60, 14, 0.10),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
  transition: box-shadow 460ms var(--ap-ease);
}
.ap-extranet::after {
  content: 'ΕΞΤΡΑΝΕΤ';
  position: absolute;
  right: 26px;
  top: 3px;
  bottom: 3px;
  z-index: -2;
  display: flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 24px;
  background: #E9E3D2;
  color: var(--ap-ink);
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(74, 60, 14, 0.16) inset, 0 -1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: width 460ms var(--ap-ease), opacity 300ms 140ms;
}
.ap-extranet:hover { transform: translateX(6px); }
.ap-extranet:hover::before {
  box-shadow: 0 10px 20px rgba(74, 60, 14, 0.20), 0 2px 5px rgba(74, 60, 14, 0.12),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
}
.ap-extranet:hover::after { width: 216px; opacity: 1; }
.ap-extranet:active { transform: translateX(6px) translateY(2px); }
.ap-extranet:active::before { box-shadow: 0 3px 7px rgba(74, 60, 14, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset; }

/* Barre de navigation : pastille blanche posée sur la bande */
.ap-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  max-width: min(28cm, 100vw - 48px);
  margin: 44px 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 10px;
  background: var(--ap-white);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(74, 60, 14, 0.13), 0 3px 8px rgba(74, 60, 14, 0.07);
  list-style: none;
}
.ap-nav li { display: block; }
body.ap .ap-nav a {
  display: block;
  padding: 12px clamp(12px, 1.7vw, 26px);
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-ink);
  white-space: nowrap;
  transition: background 220ms var(--ap-ease), color 220ms var(--ap-ease),
              box-shadow 220ms var(--ap-ease), transform 140ms var(--ap-ease);
}
body.ap .ap-nav a:hover { color: var(--ap-olive); }
body.ap .ap-nav .current-menu-item > a,
body.ap .ap-nav a[aria-current="page"] {
  background: linear-gradient(180deg, #FFFDF7, #F0EBDC);
  box-shadow: 0 7px 16px rgba(74, 60, 14, 0.18), 0 2px 4px rgba(74, 60, 14, 0.10),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
  color: var(--ap-ink);
}
body.ap .ap-nav a:active {
  background: linear-gradient(180deg, #EDE8D8, #F5F1E4);
  box-shadow: 0 3px 6px rgba(74, 60, 14, 0.20) inset, 0 9px 12px -6px rgba(74, 60, 14, 0.26) inset,
              0 -1px 0 rgba(255, 255, 255, 0.9) inset;
  transform: translateY(1px);
}

/* ============================================================
   4. Hero
   ============================================================ */
.ap-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}
.ap-hero__picture {
  position: relative;
  overflow: hidden;
  background: var(--ap-white);
}
.ap-hero__picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 64px 48px;
  background-image: linear-gradient(152deg, #A38C2C 0%, #7F6818 52%, #55450D 100%);
  color: var(--ap-cream);
}
.ap-hero__panel h1 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 16ch;
}
.ap-hero__panel p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  max-width: 42ch;
}

/* ============================================================
   5. Titre de section (type ajouré)
   ============================================================ */
.ap-heading-section {
  padding: 96px 40px;
  display: flex;
  justify-content: center;
}
.ap-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ap-heading h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ap-ink);
  max-width: 20ch;
}
.ap-heading p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ap-ink-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ============================================================
   6. Grille de tuiles
   ============================================================ */
.ap-tiles-section { padding: 0 40px 96px; }
.ap-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ap-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 0.86;
  background: var(--ap-white);
  border-radius: 0;
  text-decoration: none;
  will-change: transform;
  transform-origin: 50% 60%;
}
.ap-tile--deep { background-image: linear-gradient(152deg, #8A7220 0%, #7F6818 55%, #715C14 100%); }
.ap-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 700ms var(--ap-ease-out);
}
.ap-tile:hover img { transform: scale(1.03); }
.ap-tile__label {
  position: absolute;
  font-family: var(--ap-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ap-white);
}
.ap-tile__label--v {
  right: 24px;
  top: 24px;
  bottom: 24px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-size: 26px;
}
.ap-tile__label--h {
  left: 24px;
  top: 24px;
  max-width: 72%;
  font-size: 28px;
}
.ap-tile__link {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ap-sans);
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: var(--ap-white);
}
.ap-tile:not(.ap-tile--deep) .ap-tile__link { color: var(--ap-ink); }
.ap-tile__link--v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  bottom: 24px;
}
.ap-tile__link--v.ap-tile__link--right { left: auto; right: 24px; }
.ap-tile__arrow { transition: transform 220ms var(--ap-ease); }
.ap-tile:hover .ap-tile__link:not(.ap-tile__link--v) .ap-tile__arrow { transform: translateX(4px); }
.ap-tile:hover .ap-tile__link--v .ap-tile__arrow { transform: translateY(4px); }

html:not(.ap-nowobble) .ap-tile:hover { animation: apTileWobble 900ms cubic-bezier(.22,.61,.36,1) 1; z-index: 2; }
@keyframes apTileWobble {
  0%   { transform: translateX(0) rotate(0); }
  18%  { transform: translateX(-4px) rotate(-0.8deg); }
  42%  { transform: translateX(3px) rotate(0.6deg); }
  66%  { transform: translateX(-1.5px) rotate(-0.25deg); }
  85%  { transform: translateX(0.6px) rotate(0.1deg); }
  100% { transform: translateX(0) rotate(0); }
}

/* ============================================================
   7. Questions fréquentes
   ============================================================ */
.ap-faq { background: var(--ap-white); }
.ap-faq__inner {
  padding: 96px 40px;
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ap-faq__intro { display: flex; flex-direction: column; gap: 16px; }
.ap-rule { width: 40px; height: 2px; background: var(--ap-olive); display: block; }
.ap-rule--gold { background: var(--ap-gold); }
.ap-faq__intro h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
.ap-faq__lead {
  margin-top: 16px;
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ap-ink);
  text-wrap: pretty;
}
.ap-body-sm {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
.ap-body-sm strong { font-weight: 500; color: var(--ap-ink); }
.ap-faq__list { display: flex; flex-direction: column; gap: 10px; }
.ap-faq__item {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFDF7, #F0EBDC);
  box-shadow: 0 7px 16px rgba(74, 60, 14, 0.18), 0 2px 4px rgba(74, 60, 14, 0.10),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
  transition: box-shadow 220ms var(--ap-ease), border-radius 220ms var(--ap-ease);
}
.ap-faq__item[open] {
  border-radius: 28px;
  box-shadow: 0 12px 26px rgba(74, 60, 14, 0.20), 0 2px 5px rgba(74, 60, 14, 0.12),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
}
.ap-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 28px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ap-ink);
  transition: color 220ms var(--ap-ease);
}
.ap-faq__item > summary::-webkit-details-marker { display: none; }
.ap-faq__item > summary:hover { color: var(--ap-olive); }
.ap-faq__item > summary::after {
  content: '+';
  flex: none;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.05;
  color: var(--ap-olive);
}
.ap-faq__item[open] > summary::after { content: '–'; }
.ap-faq__item > summary:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }
.ap-faq__body {
  padding: 0 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: apFaqIn 320ms var(--ap-ease);
}
@keyframes apFaqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ap-bullets {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-bullets li { position: relative; padding-left: 20px; }
.ap-bullets li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--ap-gold); }

/* ============================================================
   8. Pied de page
   ============================================================ */
.ap-footer {
  background: var(--ap-olive);
  color: var(--ap-cream);
  padding: 32px 40px 20px;
}
.ap-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.ap-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.ap-footer__brand img { width: 120px; display: block; filter: brightness(0) invert(1); }
.ap-eyebrow {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-cream);
}
.ap-footer__note {
  white-space: pre-line;
  max-width: 34ch;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ap-cream);
  opacity: 0.8;
  text-wrap: pretty;
}
.ap-footer__col { display: flex; flex-direction: column; gap: 6px; }
.ap-footer__col .ap-eyebrow { opacity: 0.6; margin-bottom: 8px; }
/* La colonne « Μενού » est rendue par wp_nav_menu : la liste reprend la mise
   en colonne des liens écrits à la main. */
.ap-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-footer__menu li { margin: 0; }
.ap-footer__menu a { display: block; }
body.ap .ap-footer__col a {
  padding: 2px 0;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-cream);
  transition: opacity 220ms var(--ap-ease);
}
body.ap .ap-footer__col a:hover { color: var(--ap-cream); opacity: 0.7; }
.ap-footer__legal {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--ap-line-on-deep);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* L'opacité s'appliquerait au lien inclus dans la mention : l'atténuation
   passe par la couleur. Le sélecteur est plus spécifique que la règle de
   couleur globale du pied de page, située plus loin dans le fichier. */
body.ap .ap-footer .ap-footer__legal .ap-eyebrow { opacity: 1; color: rgba(247, 244, 236, 0.94); }
body.ap .ap-footer__legal a {
  color: var(--ap-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 220ms var(--ap-ease);
}
body.ap .ap-footer__legal a:hover { opacity: 0.7; }

/* Signature de l'agence : texte puis logo, le lien porté par le logo.
   Le logo est noir sur transparent, inversé en crème pour l'olive. */
.ap-footer__credit { display: flex; align-items: center; gap: 12px; }
/* Le libellé reste en minuscules : l'interlettrage de l'eyebrow est réglé
   pour des capitales, il est resserré ici. */
body.ap .ap-footer__credit .ap-eyebrow { text-transform: none; letter-spacing: 0.04em; }
.ap-footer__credit img {
  display: block;
  width: 104px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity 220ms var(--ap-ease);
}
body.ap .ap-footer__credit a { text-decoration: none; display: block; }
body.ap .ap-footer__credit a:hover img { opacity: 1; }
body.ap .ap-footer__credit a:focus-visible { outline: 2px solid var(--ap-cream); outline-offset: 3px; }

/* ============================================================
   9. Apparition au défilement
   ============================================================ */
[data-ap-reveal] { opacity: 0; }

/* ============================================================
   10. Adaptations écrans réduits
   ============================================================ */
@media (max-width: 1100px) {
  .ap-faq__inner { padding: 96px 88px; }
}
@media (max-width: 1080px) {
  .ap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .ap-header { padding-left: 20px; padding-right: 20px; }
  .ap-nav { flex-wrap: wrap; justify-content: center; gap: 20px; }
  body.ap .ap-nav a { padding-top: 10px; padding-bottom: 10px; }
  .ap-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ap-hero__picture { min-height: 46vh; }
  .ap-heading-section { padding: 64px 24px; }
  .ap-tiles-section { padding: 0 0 64px; }
  .ap-faq__inner { grid-template-columns: minmax(0, 1fr); padding: 64px 24px; gap: 48px; }
  .ap-footer { padding-left: 24px; padding-right: 24px; }
  .ap-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 640px) {
  .ap-hero__panel h1 { font-size: 26px; }
  .ap-heading h2 { font-size: 30px; }
  .ap-tiles { grid-template-columns: minmax(0, 1fr); }
  .ap-heading-section { padding: 48px 20px; }
  .ap-band { height: 40px; }
  .ap-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .ap-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ap-nav { gap: 16px; row-gap: 0; }
  .ap-header__top { grid-template-columns: minmax(0, 1fr); row-gap: 16px; justify-items: center; }
  .ap-header__actions { justify-self: center; }
  .ap-extranet { margin-right: 0; }
}

@media (hover: none) {
  html:not(.ap-nowobble) .ap-tile:hover { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-tile img, .ap-extranet, body.ap .ap-nav a { transition: none; }
  html:not(.ap-nowobble) .ap-tile:hover { animation: none; }
}

/* ============================================================
   11. Priorité sur Blocksy
   Blocksy applique ses propres couleurs et tailles de titre avec une
   spécificité supérieure à nos sélecteurs de composant. On les reprend ici,
   préfixés par body.ap, plutôt que d'utiliser !important partout.
   ============================================================ */
body.ap .ap-hero__panel h1 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ap-cream);
  max-width: 16ch;
}
body.ap .ap-hero__panel p { color: var(--ap-cream); }

body.ap .ap-heading h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--ap-ink);
  max-width: 20ch;
}
body.ap .ap-heading p { color: var(--ap-ink-muted); }

body.ap .ap-faq__intro h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-faq__lead { color: var(--ap-ink); }
body.ap .ap-body-sm { color: var(--ap-ink-muted); }
body.ap .ap-body-sm strong { color: var(--ap-ink); }

body.ap .ap-tile__label { color: var(--ap-white); }
body.ap .ap-tile__link { color: var(--ap-white); }
body.ap .ap-tile:not(.ap-tile--deep) .ap-tile__link { color: var(--ap-ink); }

body.ap .ap-footer,
body.ap .ap-footer .ap-eyebrow,
body.ap .ap-footer__note { color: var(--ap-cream); }

body.ap .ap-logo__tagline { color: var(--ap-ink-muted); }
body.ap .ap-extranet { color: var(--ap-olive); }

@media (max-width: 640px) {
  body.ap .ap-hero__panel h1 { font-size: 26px; }
  body.ap .ap-heading h2 { font-size: 30px; }
}

/* Reponses des questions frequentes saisies dans WordPress : les <p> produits
   par l'editeur recoivent le meme style que les paragraphes du wireframe. */
body.ap .ap-faq__body p,
body.ap .ap-faq__body li {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
body.ap .ap-faq__body strong { font-weight: 500; color: var(--ap-ink); }
body.ap .ap-faq__body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body.ap .ap-faq__body ul li { position: relative; padding-left: 20px; }
body.ap .ap-faq__body ul li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--ap-gold); }


/* ============================================================
   13. Ajustements validés en production (15 sept. 2026)
   ============================================================ */

/* Espace entre la barre de navigation et le hero */
.ap-header { padding-bottom: 48px; }
@media (max-width: 782px) {
  .ap-header { padding-bottom: 32px; }
}

/* Tuile 2 (haut, centre) : lien d'ancrage en haut, le bas de la photo étant occupé */
.ap-tiles > .ap-tile:nth-child(2) { justify-content: flex-start; }
.ap-tiles > .ap-tile:nth-child(2) .ap-tile__link { top: 32px; bottom: auto; }

/* ============================================================
   12. Page « Ο συνεταιρισμός »
   ============================================================ */

/* --- Hero pleine largeur : l'image seule, le texte posé dessus --- */
.ap-phero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 700px;
  overflow: hidden;
  background: var(--ap-white);
}
.ap-phero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ap-phero__inner {
  position: relative;
  width: 100%;
  max-width: 892px;
  padding: 40px 40px 0 var(--ap-page-x);
}
body.ap .ap-phero h1 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.22;
  color: var(--ap-ink);
  max-width: 22ch;
  text-wrap: pretty;
}
body.ap .ap-phero p {
  margin-top: 24px;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
  max-width: 46ch;
}
.ap-scrolldown {
  position: absolute;
  left: var(--ap-page-x);
  bottom: 24px;
  margin-left: -8px;
  width: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}
.ap-scrolldown__label {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-olive);
  transform: rotate(180deg);
  transition: opacity 320ms var(--ap-ease), transform 620ms var(--ap-ease-out),
              letter-spacing 620ms var(--ap-ease-out);
}

/* Le filet : une lueur crème qui descend en boucle, plus rapide au survol */
.ap-scrolldown__line {
  position: relative;
  flex: 0 0 auto;
  width: 1px;
  height: 150px;
  overflow: hidden;
  background: var(--ap-olive);
  transition: opacity 320ms;
}
.ap-scrolldown__line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--ap-cream) 50%, transparent);
  animation: apRuleRun 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes apRuleRun {
  0%   { top: -40%; }
  100% { top: 100%; }
}
.ap-scrolldown:hover .ap-scrolldown__label { transform: rotate(180deg) translateY(10px); letter-spacing: 0.3em; }
.ap-scrolldown:hover .ap-scrolldown__line::after { animation-duration: 1.2s; }

/* Au clic : le libellé s'efface vers le haut, le filet se rétracte vers le bas */
.ap-scrolldown.is-going .ap-scrolldown__label { opacity: 0; transform: rotate(180deg) translateY(-40px); }
.ap-scrolldown.is-going .ap-scrolldown__line {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 620ms var(--ap-ease-out);
}
/* Rétablissement instantané après l'animation de départ (voir agropoly.js) */
.ap-scrolldown.is-reset .ap-scrolldown__label,
.ap-scrolldown.is-reset .ap-scrolldown__line { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ap-scrolldown__line::after { animation: none; }
}

/* --- Enveloppe commune des sections intérieures --- */
.ap-sec { background: var(--ap-white); }
.ap-sec__inner { max-width: 1280px; margin: 0 auto; padding: 96px 40px; }

body.ap .ap-istoria__aside h2,
body.ap .ap-orama__intro h2,
body.ap .ap-engsec__aside h2,
body.ap .ap-axies__intro h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-lead {
  margin-top: 16px;
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-body-sm--ink { color: var(--ap-ink); }

/* --- Textes riches saisis dans WordPress --- */
.ap-prose { display: flex; flex-direction: column; gap: 20px; }
body.ap .ap-prose p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
body.ap .ap-prose strong { font-weight: 500; color: var(--ap-ink); }
body.ap .ap-prose em { font-style: italic; font-weight: 500; }
.ap-prose--wide { max-width: 780px; }
.ap-prose--ink p, body.ap .ap-prose--ink p { color: var(--ap-ink); }
.ap-prose--center p, body.ap .ap-prose--center p { text-align: center; line-height: 1.8; }
.ap-prose blockquote {
  margin: 4px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--ap-gold);
}
body.ap .ap-prose blockquote p {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ap-ink);
}

/* --- Notre histoire --- */
.ap-istoria__inner {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
  padding-bottom: 0;
}
.ap-istoria__aside { display: flex; flex-direction: column; gap: 16px; }
/* L'olivier reste collé à la bande olive, quelle que soit la hauteur de la colonne */
.ap-istoria__img {
  display: block;
  width: 100%;
  max-width: 469px;
  margin-top: auto;
  margin-bottom: -1px;
  padding-top: 40px;
  object-fit: contain;
  object-position: center bottom;
}
.ap-istoria__main {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 96px;
}
.ap-steps { display: flex; flex-direction: column; border-top: 1px solid var(--ap-line); }
body.ap .ap-step {
  display: grid;
  grid-template-columns: 8px 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ap-line);
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ap-ink);
  transition: color 220ms var(--ap-ease);
}
body.ap .ap-step:hover,
body.ap .ap-step.is-active { color: var(--ap-olive); }
.ap-step__mark { display: block; width: 8px; height: 2px; }
.ap-step.is-active .ap-step__mark { background: var(--ap-olive); }
.ap-step__num { color: var(--ap-ink-faint); }
.ap-step:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }

.ap-panels { max-width: 68ch; }
.ap-panel { display: flex; flex-direction: column; gap: 20px; }
.ap-panel + .ap-panel { margin-top: 64px; }
.ap-panel.is-on { margin-top: 0; animation: apPanelIn 400ms var(--ap-ease); }
body.ap .ap-panel h3 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ap-olive);
}
.ap-panel:not(.is-on),
.ap-omada__photo:not(.is-on),
.ap-omada__card:not(.is-on) { display: none; }
@keyframes apPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- L'équipe --- */
.ap-omada__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; }
body.ap .ap-omada__head h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ap-ink);
  max-width: 18ch;
  text-wrap: pretty;
}
/* La colonne des miniatures garde sa largeur exacte ; c'est le texte qui cède */
.ap-omada__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 135px 290px auto;
  gap: 32px;
  align-items: end;
}
.ap-omada__text { align-self: end; max-width: 46ch; }
.ap-omada__portrait {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
}
.ap-omada__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: apPanelIn 400ms var(--ap-ease);
}
.ap-omada__side { display: flex; flex-direction: column; gap: 40px; align-self: end; }
.ap-omada__cards { padding-top: 24px; }
.ap-omada__card { display: flex; flex-direction: column; gap: 12px; animation: apPanelIn 400ms var(--ap-ease); }
body.ap .ap-omada__num {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ap-ink-faint);
}
body.ap .ap-omada__name {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-omada__role {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-olive);
}
body.ap .ap-omada__bio {
  margin-top: 8px;
  max-width: 44ch;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
/* Miniatures toutes à la même taille, la personne active comprise */
.ap-omada__thumbs { display: grid; grid-template-columns: repeat(3, 135px); gap: 16px; }
.ap-thumb { display: block; }
/* Miniatures en noir et blanc, le grand portrait seul reste en couleur */
.ap-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  filter: grayscale(1);
  transition: filter 320ms var(--ap-ease);
}
.ap-thumb:hover img { filter: grayscale(0.7); }
.ap-thumb--lead { align-self: end; width: 135px; }
.ap-thumb__bar {
  display: block;
  height: 2px;
  margin-top: 6px;
  background: transparent;
  transition: background 220ms var(--ap-ease);
}
.ap-thumb:hover .ap-thumb__bar { background: rgba(127, 104, 24, 0.35); }
.ap-thumb.is-active .ap-thumb__bar { background: var(--ap-olive); }

/* --- Vision, mission, philosophie --- */
.ap-orama { background: rgba(202, 200, 192, 0.30); }
.ap-orama__inner {
  display: grid;
  grid-template-columns: minmax(200px, 300px) repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.ap-orama__intro { display: flex; flex-direction: column; gap: 16px; }
.ap-orama__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 24px;
  border-left: 1px solid rgba(27, 26, 22, 0.18);
}
/* Filets de même hauteur : chaque colonne s'étire sur la plus haute. */
@media (min-width: 901px) { .ap-orama__col { align-self: stretch; } }
.ap-orama__num {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(127, 104, 24, 0.55);
}
body.ap .ap-orama__col h3 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ap-ink);
}

/* --- Nos valeurs --- */
.ap-axies__inner {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ap-axies__intro { display: flex; flex-direction: column; gap: 16px; }
.ap-axies__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.ap-axia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 46px;
  padding: 66px 24px 32px;
  border: 2px solid var(--ap-olive);
  border-radius: 16px;
  background: var(--ap-white);
}
.ap-axia__media {
  position: absolute;
  top: -46px;
  left: 50%;
  margin-left: -46px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
}
.ap-axia__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ap .ap-axia h3 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: var(--ap-ink);
}

/* --- Écrans réduits --- */
@media (max-width: 1100px) {
  .ap-istoria__inner { gap: 40px; }
  .ap-istoria__main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ap-omada__stage { grid-template-columns: 135px minmax(0, 240px) minmax(0, 1fr); gap: 32px; }
  .ap-omada__text { grid-column: 1 / -1; }
  .ap-orama__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-axies__inner { gap: 40px; }
}
@media (max-width: 900px) {
  .ap-phero { display: block; min-height: 0; }
  .ap-phero__img { position: relative; height: 46vh; }
  .ap-phero__inner { padding: 32px 24px 8px; }
  .ap-scrolldown { display: none; }
  .ap-sec__inner { padding: 64px 24px; }
  .ap-istoria__inner { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .ap-istoria__img { max-width: 320px; margin-top: 24px; margin-bottom: 0; }
  .ap-istoria__main { padding-bottom: 0; }
  .ap-omada__stage { grid-template-columns: 135px minmax(0, 1fr); gap: 24px; align-items: end; }
  .ap-omada__text,
  .ap-omada__side { grid-column: 1 / -1; }
  .ap-omada__head { margin-bottom: 40px; }
  .ap-omada__portrait { max-width: 260px; }
  .ap-omada__side { gap: 32px; }
  .ap-orama__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-orama__col { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid rgba(27, 26, 22, 0.18); }
  .ap-axies__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-left: 0; padding-right: 0; }
  .ap-axies__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ap-omada__stage { grid-template-columns: minmax(0, 1fr); }
  .ap-omada__thumbs { grid-template-columns: repeat(3, minmax(0, 135px)); }
  body.ap .ap-omada__name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-panel.is-on, .ap-omada__photo, .ap-omada__card { animation: none; }
}

/* ============================================================
   14. Page « Παραγωγοί »
   ============================================================ */

/* --- Petits élements partagés par la page --- */
.ap-kicker {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
body.ap .ap-prose--sm p {
  font-size: 13px;
  line-height: 1.85;
}
.ap-prose--sm { gap: 16px; }
body.ap .ap-arrowlink {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  color: var(--ap-olive);
}
.ap-figs { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 8px; }
.ap-fig { display: flex; flex-direction: column; gap: 8px; }
.ap-fig__val {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--ap-olive);
}
.ap-fig__label {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}

/* --- Hero de la page « Παραγωγοί » : titre long, mêmes tailles que le wireframe --- */
body.ap .ap-phero--prod h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 30ch;
}
body.ap .ap-phero--prod p { max-width: calc(46ch + 2cm); }

/* --- Chapeau de la campagne --- */
.ap-prodhead__grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
}
.ap-prodhead__aside { display: flex; flex-direction: column; gap: 16px; }
body.ap .ap-prodhead__aside h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ap-ink);
}
body.ap .ap-prodhead__lead { max-width: 64ch; }

/* --- Sommaire des trois panneaux --- */
.ap-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ap-line);
  margin-top: 64px;
}
.ap-rail__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 20px 0;
  margin-top: -2px;
  border-top: 2px solid transparent;
  transition: border-color 260ms var(--ap-ease);
}
.ap-rail__num {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ap-ink-faint);
}
.ap-rail__label {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
  transition: color 260ms var(--ap-ease);
}
.ap-rail__item.is-active { border-top-color: var(--ap-olive); }
.ap-rail__item.is-active .ap-rail__label { color: var(--ap-ink); }
.ap-rail__item:hover .ap-rail__label,
.ap-rail__item:hover .ap-rail__num { color: var(--ap-olive); }

/* --- Les trois panneaux empilés --- */
.ap-stack { position: relative; margin-top: 40px; }
.ap-spanel {
  position: sticky;
  top: 0;
  min-height: 74vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ap-white);
  border-top: 2px solid var(--ap-olive);
  box-shadow: 0 -26px 54px rgba(27, 26, 22, 0.10);
}
.ap-spanel--cream { background: var(--ap-cream); }
.ap-spanel__art {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}
.ap-spanel__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 48px;
  max-width: 620px;
}
body.ap .ap-spanel__copy h3 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-spanel__note {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ap-ink);
}

/* Les quatre étapes du panneau du moulin */
.ap-mills { display: flex; flex-direction: column; }
.ap-mill {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--ap-line);
}
.ap-mill__num {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ap-olive);
  padding-top: 2px;
}
.ap-mill__text { display: flex; flex-direction: column; gap: 2px; }
.ap-mill__title {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-mill p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}

/* --- La relation, les conditions, les outils --- */
.ap-pair {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 64px;
  margin-top: 80px;
  padding-top: 40px;
}
.ap-pair:first-child { margin-top: 0; }
.ap-pair--olive { border-top: 2px solid var(--ap-olive); }
.ap-pair--hair { border-top: 1px solid var(--ap-line); align-items: start; }
.ap-pair__col { display: flex; flex-direction: column; gap: 16px; }
body.ap .ap-pair h3 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.3;
  color: var(--ap-ink);
  text-wrap: pretty;
}

/* --- Nous rejoindre --- */
.ap-join__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 64px;
}
.ap-join__copy { display: flex; flex-direction: column; gap: 16px; }
body.ap .ap-join__copy h2 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.14;
  color: var(--ap-ink);
  max-width: 22ch;
  text-wrap: pretty;
}
.ap-join__prose { max-width: 52ch; }
.ap-contacts { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.ap-contact {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--ap-ink-muted);
}
body.ap a.ap-contact { color: var(--ap-ink-muted); }
.ap-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(27, 26, 22, 0.12);
  border-radius: 999px;
  color: var(--ap-ink-faint);
  transition: color 220ms var(--ap-ease), border-color 220ms var(--ap-ease);
}
.ap-contact--lead, body.ap a.ap-contact--lead { color: var(--ap-ink); }
.ap-contact--lead .ap-contact__label { font-weight: 500; letter-spacing: 0.02em; }
.ap-contact--lead .ap-contact__icon { color: var(--ap-olive); }
body.ap a.ap-contact:hover { color: var(--ap-olive); }
body.ap a.ap-contact:hover .ap-contact__icon { color: var(--ap-olive); border-color: rgba(127, 104, 24, 0.34); }

/* --- Formulaire --- */
.ap-form { background: var(--ap-cream); border-radius: 18px; padding: 32px; }
.ap-form__title {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ap-ink);
}
.ap-form__fields { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.ap-form__plugin { margin-top: 20px; }
.ap-field { display: block; }
.ap-field__label {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ap-ink-muted);
}
body.ap .ap-field input,
body.ap .ap-field textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  background: var(--ap-white);
  border: 1px solid rgba(27, 26, 22, 0.10);
  border-radius: 10px;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ap-ink);
  outline: none;
}
body.ap .ap-field textarea { resize: vertical; }
body.ap .ap-field input:focus,
body.ap .ap-field textarea:focus { border-color: var(--ap-olive); }
body.ap .ap-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 13px 22px;
  background: var(--ap-olive);
  color: var(--ap-cream);
  border: 0;
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ap-ease);
}
body.ap .ap-submit:hover { background: color-mix(in oklab, var(--ap-olive) 86%, var(--ap-ink)); }
body.ap .ap-form__note {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
}

/* --- Formulaire WPForms : habillage aux jetons AgroPoly ---
   S'applique uniquement au formulaire posé dans le bloc crème de la page
   « Παραγωγοί ». Le rouge #A23B22 sert exclusivement aux erreurs de
   saisie : c'est un état fonctionnel, il n'entre pas dans la palette.

   WPForms 1.8+ pilote son apparence par variables CSS posées sur le
   conteneur du formulaire. On les redéfinit ici pour que l'habillage
   tienne même si le plugin change ses sélecteurs. */
.ap-form .wpforms-container,
.ap-form .wpforms-container-full {
  --wpforms-field-background-color: var(--ap-white);
  --wpforms-field-border-color: rgba(27, 26, 22, 0.10);
  --wpforms-field-text-color: var(--ap-ink);
  --wpforms-field-border-radius: 10px;
  --wpforms-field-border-size: 1px;
  --wpforms-label-color: var(--ap-ink-muted);
  --wpforms-label-sublabel-color: var(--ap-ink-faint);
  --wpforms-label-error-color: #A23B22;
  --wpforms-button-background-color: var(--ap-olive);
  --wpforms-button-text-color: var(--ap-cream);
  --wpforms-button-border-radius: 999px;
  --wpforms-button-border-size: 0;
}
.ap-form .wpforms-container,
.ap-form .wpforms-container-full { margin: 0; }
.ap-form .wpforms-form .wpforms-field-container { display: flex; flex-direction: column; gap: 16px; }
.ap-form .wpforms-form .wpforms-field { padding: 0; }
body.ap .ap-form .wpforms-form .wpforms-field-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--ap-ink-muted);
}
body.ap .ap-form .wpforms-form .wpforms-required-label {
  color: var(--ap-olive) !important;
  border: 0;
}
body.ap .ap-form .wpforms-form .wpforms-field-sublabel {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 11px;
  color: var(--ap-ink-faint);
}
body.ap .ap-form .wpforms-form input[type="text"],
body.ap .ap-form .wpforms-form input[type="email"],
body.ap .ap-form .wpforms-form input[type="tel"],
body.ap .ap-form .wpforms-form input[type="url"],
body.ap .ap-form .wpforms-form input[type="number"],
body.ap .ap-form .wpforms-form select,
body.ap .ap-form .wpforms-form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 11px 14px;
  background: var(--ap-white);
  border: 1px solid rgba(27, 26, 22, 0.10);
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ap-ink);
  transition: border-color 220ms var(--ap-ease);
}
body.ap .ap-form .wpforms-form textarea { resize: vertical; min-height: 110px; }
body.ap .ap-form .wpforms-form input:focus,
body.ap .ap-form .wpforms-form select:focus,
body.ap .ap-form .wpforms-form textarea:focus {
  border-color: var(--ap-olive);
  outline: none;
  box-shadow: none;
}
body.ap .ap-form .wpforms-form ::placeholder { color: var(--ap-ink-faint); opacity: 1; }
.ap-form .wpforms-form .wpforms-submit-container { padding: 8px 0 0; }
body.ap .ap-form .wpforms-form button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px !important;
  background: var(--ap-olive) !important;
  color: var(--ap-cream) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ap-ease);
}
body.ap .ap-form .wpforms-form button.wpforms-submit:hover { background: color-mix(in oklab, var(--ap-olive) 86%, var(--ap-ink)); }
body.ap .ap-form .wpforms-form button.wpforms-submit:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }
body.ap .ap-form .wpforms-form button.wpforms-submit[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Erreurs de saisie */
body.ap .ap-form .wpforms-form label.wpforms-error,
body.ap .ap-form .wpforms-form em.wpforms-error {
  display: block;
  margin-top: 6px;
  font-family: var(--ap-sans);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #A23B22;
}
body.ap .ap-form .wpforms-form input.wpforms-error,
body.ap .ap-form .wpforms-form textarea.wpforms-error,
body.ap .ap-form .wpforms-form select.wpforms-error { border-color: #A23B22; }

/* Message de confirmation */
body.ap .wpforms-confirmation-container-full {
  margin: 20px 0 0;
  padding: 20px 22px;
  background: var(--ap-white);
  border: 0;
  border-top: 2px solid var(--ap-gold);
  border-radius: 0 0 10px 10px;
}
body.ap .wpforms-confirmation-container-full p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ap-ink);
}

/* ============================================================
   14. Page « Δεσμεύσεις »
   ============================================================ */

/* Hero : visuel détouré posé à droite sur un gris très clair */
.ap-phero--eng { background: #F6F7F7; }
.ap-phero--eng .ap-phero__img { object-fit: contain; object-position: right center; }
body.ap .ap-phero--eng h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 30ch;
}
body.ap .ap-phero--eng p { max-width: calc(46ch + 2cm); }

/* Colonne de gauche + colonne de contenu, commune aux trois sections */
.ap-engsec__grid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.ap-engsec__aside { display: flex; flex-direction: column; gap: 16px; }
.ap-engsec__note { margin-top: 8px; }
.ap-engsec__main { display: flex; flex-direction: column; gap: 48px; }
.ap-engsec__text { max-width: 68ch; }
.ap-engsec__closing {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ap-olive);
  max-width: 48ch;
  text-wrap: pretty;
}

/* Les six étapes de la chaîne qualité : un filet vertical relie les pastilles */
.ap-chain { display: flex; flex-direction: column; }
.ap-chain__link {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 32px;
}
.ap-chain__link::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: rgba(107, 114, 64, 0.30);
}
.ap-chain__link:last-child::before { display: none; }
.ap-chain__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ap-white);
  border: 1px solid var(--ap-olive);
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ap-olive);
}
.ap-chain__text { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.ap-chain__title {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-chain__text p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}

/* Certifications : bande grise, logos sur cartes blanches */
.ap-certs { background-color: #CAC8C04D; }
.ap-sec__inner--tight { padding-top: 64px; padding-bottom: 64px; }
.ap-certs__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ap-certs__aside { display: flex; flex-direction: column; gap: 16px; }
.ap-certs__label {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ap-ink);
}
.ap-certs__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ap-cert {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 20px 16px;
  background: var(--ap-white);
  border-radius: 14px;
  transition: transform 220ms var(--ap-ease), box-shadow 220ms var(--ap-ease);
}
.ap-cert:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 26, 22, 0.07); }
@media (prefers-reduced-motion: reduce) {
  .ap-cert { transition: none; }
  .ap-cert:hover { transform: none; }
}
.ap-cert img { display: block; width: auto; height: 54px; max-width: 100%; }

/* Environnement : trois cartes crème */
.ap-envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ap-env {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--ap-cream);
  border-radius: 18px;
}
.ap-env__kicker {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
body.ap .ap-env__title {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ap-olive);
  text-wrap: pretty;
}

/* Terroir : photographie, repères, texte */
.ap-terroir {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}
.ap-terroir__media { display: flex; flex-direction: column; gap: 20px; }
.ap-terroir__img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 480px;
  object-fit: cover;
  border: 1px solid var(--ap-line);
}
.ap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid var(--ap-line);
  padding-top: 20px;
}
.ap-stat { display: flex; flex-direction: column; gap: 3px; }
.ap-stat__val {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ap-olive);
}
.ap-stat__label {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
/* La colonne de texte réserve en bas la hauteur du bloc de repères :
   la phrase en italique tombe ainsi au bas de la photographie. */
.ap-terroir__text { display: flex; flex-direction: column; gap: 20px; padding-bottom: 81px; }
.ap-terroir__end {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--ap-line);
}
.ap-terroir__claim {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.32;
  color: var(--ap-ink);
  max-width: 34ch;
  text-wrap: pretty;
}
.ap-terroir__quote {
  font-family: var(--ap-display);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ap-olive);
  max-width: 42ch;
}

@media (max-width: 1100px) {
  .ap-engsec__grid,
  .ap-certs__grid,
  .ap-terroir { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-certs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-envs { gap: 14px; }
  .ap-env { padding: 24px 22px; }
  .ap-terroir__media { max-width: 460px; }
  .ap-terroir__img { min-height: 0; aspect-ratio: 4 / 5; }
  .ap-terroir__text { padding-bottom: 0; }
  .ap-terroir__end { margin-top: 24px; }
}
@media (max-width: 640px) {
  .ap-certs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-envs { grid-template-columns: minmax(0, 1fr); }
  .ap-phero--eng .ap-phero__img { object-position: right bottom; opacity: 0.35; }
}

/* ============================================================
   15. Page « Πόροι »
   ============================================================ */
body.ap .ap-phero--res h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 30ch;
}
body.ap .ap-phero--res p { max-width: calc(46ch + 2cm); }

/* Le rythme de la campagne : trois temps sur un filet */
.ap-beats__kicker {
  display: block;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
.ap-beats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 24px;
  border-top: 1px solid rgba(107, 114, 64, 0.30);
}
.ap-beat { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.ap-beat::before {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ap-white);
  border: 1px solid var(--ap-olive);
}
.ap-beat__title {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
}
body.ap .ap-beat p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
  max-width: 34ch;
  text-wrap: pretty;
}

/* Citation détachée, filet doré à gauche */
.ap-pull {
  margin-top: 8px;
  padding-left: 24px;
  border-left: 2px solid var(--ap-gold);
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ap-ink);
  max-width: 44ch;
  text-wrap: pretty;
}

/* Maquette de l'espace producteur */
.ap-mockwrap { max-width: 1280px; margin: 0 auto; padding: 0 40px 96px; }
/* Variante alignée sur la colonne de texte de la section */
.ap-mockwrap--col2 {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 64px;
}
.ap-mockwrap--col2 > .ap-mock { grid-column: 2; margin: 0; }
/* Pas de ratio fixe : le cadre prend la hauteur du volet le plus haut,
   sinon le tableau du volet « Στοιχεία » serait coupé. */
.ap-mock {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 14px;
  background: var(--ap-ink);
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(27, 26, 22, 0.18);
}
.ap-mock__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 14px;
  align-items: stretch;
}
.ap-mock__photo {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(90px 90px at calc(100% + 64px) 50%, transparent 89px, #000 90px);
  mask-image: radial-gradient(90px 90px at calc(100% + 64px) 50%, transparent 89px, #000 90px);
}
.ap-mock__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--ap-cream) 0%, var(--ap-sand) 100%);
  -webkit-mask-image: radial-gradient(90px 90px at -64px 50%, transparent 89px, #000 90px);
  mask-image: radial-gradient(90px 90px at -64px 50%, transparent 89px, #000 90px);
}
.ap-mock__eyebrow {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
.ap-mock__dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 1;
}
.ap-mock__dots span { width: 5px; height: 5px; border-radius: 999px; background: rgba(247, 244, 236, 0.32); }
.ap-mock__dots span:first-child { width: 14px; background: var(--ap-cream); }
.ap-mock__dots span:nth-child(2) { background: rgba(247, 244, 236, 0.55); }

.ap-mocktabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
body.ap .ap-mocktab {
  display: block;
  padding: 9px 2px;
  text-align: center;
  text-decoration: none;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
  border-bottom: 1px solid rgba(27, 26, 22, 0.12);
  transition: color 220ms var(--ap-ease), border-color 220ms var(--ap-ease);
}
body.ap .ap-mocktab:hover { color: var(--ap-olive); }
body.ap .ap-mocktab.is-active { color: var(--ap-ink); border-bottom-color: var(--ap-olive); }

/* Les trois volets occupent la même cellule : la hauteur du cadre est celle
   du volet le plus haut et ne varie pas d'un onglet à l'autre. */
.ap-mockpanes { flex: 1; margin-top: 24px; display: grid; }
.ap-mockpane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  visibility: hidden;
}
.ap-mockpane.is-on { visibility: visible; }
body.ap .ap-mockpane h4 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.18;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-mockpane > p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
body.ap .ap-mockpane > p strong { font-weight: 500; color: var(--ap-ink); }

/* Volet « accès » */
.ap-mockform { display: flex; flex-direction: column; gap: 10px; }
.ap-mockfield {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 44px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 26, 22, 0.09);
  border-radius: 12px;
  color: var(--ap-ink-faint);
}
.ap-mockfield span {
  flex: 1;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--ap-ink-muted);
}
/* Bouton « Είσοδος » : même pastille en relief que le connecteur de l'en-tête */
.ap-mockbtn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 34px;
  margin-top: 4px;
  padding: 0 18px;
  background: linear-gradient(180deg, #FFFDF7, #F0EBDC);
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(74, 60, 14, 0.18), 0 2px 4px rgba(74, 60, 14, 0.10),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
  font-family: var(--ap-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-olive);
  cursor: default;
  transition: transform 220ms var(--ap-ease), box-shadow 220ms var(--ap-ease);
}
.ap-mockbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(74, 60, 14, 0.22), 0 3px 6px rgba(74, 60, 14, 0.12),
              0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(74, 60, 14, 0.06) inset;
}
.ap-mockbtn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 7px rgba(74, 60, 14, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
@media (prefers-reduced-motion: reduce) {
  .ap-mockbtn { transition: none; }
  .ap-mockbtn:hover { transform: none; }
}
.ap-mocklink {
  align-self: center;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 11px;
  color: var(--ap-ink-muted);
}
.ap-mockrule { display: flex; align-items: center; gap: 16px; }
.ap-mockrule span:first-child,
.ap-mockrule span:last-child { flex: 1; height: 1px; background: rgba(27, 26, 22, 0.12); }
.ap-mockrule__label {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-ink-muted);
  white-space: nowrap;
}
.ap-mockchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-mockchips span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 6px;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 26, 22, 0.07);
  border-radius: 12px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ap-ink-muted);
}

/* Volet « données » */
.ap-mockstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-mockstat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(27, 26, 22, 0.07);
  border-radius: 12px;
}
.ap-mockstat > span {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
.ap-mockstat > b {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--ap-ink);
}
.ap-mockstat > b i {
  font-family: var(--ap-sans);
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
  color: var(--ap-ink-faint);
}
.ap-mockstat--olive { background: var(--ap-olive); border-color: transparent; }
.ap-mockstat--olive > span { color: rgba(247, 244, 236, 0.72); }
.ap-mockstat--olive > b { color: var(--ap-cream); }
.ap-mockstat--olive > b i { color: rgba(247, 244, 236, 0.72); }
.ap-mockchart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 11px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(27, 26, 22, 0.07);
  border-radius: 12px;
}
.ap-mockchart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ap-mockchart__head span:first-child {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
.ap-mockchart__head span:last-child {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 9px;
  color: var(--ap-ink-faint);
}
.ap-mockbars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; height: 62px; }
.ap-mockbars span { border-radius: 4px 4px 2px 2px; background: rgba(107, 114, 64, 0.26); }
.ap-mockbars span.is-peak { background: var(--ap-gold); }
.ap-mocktable { display: flex; flex-direction: column; gap: 6px; }
.ap-mockrow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 62px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 11px;
  color: var(--ap-ink-muted);
}
.ap-mockrow--head { background: none; padding: 0 10px; }
.ap-mockrow--head span {
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}
.ap-mockrow--head span:last-child { text-align: right; }
.ap-tag {
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(27, 26, 22, 0.06);
  color: var(--ap-ink-faint);
}
.ap-tag--olive { background: rgba(107, 114, 64, 0.14); color: var(--ap-olive); }
.ap-tag--gold { background: rgba(191, 150, 42, 0.18); color: #8A6A12; }

/* Volet « documents » */
.ap-mockdocs { display: flex; flex-direction: column; gap: 6px; }
.ap-mockdoc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
}
.ap-mockdoc span:first-child {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 11px;
  color: var(--ap-ink-muted);
}
.ap-mockdoc span:last-child {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-olive);
}

@media (max-width: 1100px) {
  .ap-beats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ap-mockwrap { padding-bottom: 64px; }
  .ap-mockwrap--col2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-mockwrap--col2 > .ap-mock { grid-column: 1; }
}
/* Le retrait horizontal suit celui de .ap-sec__inner, pour que la maquette
   et le bloc du rythme restent alignés sur le texte des sections. */
@media (max-width: 782px) {
  .ap-mockwrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 860px) {
  .ap-mock__inner { grid-template-columns: minmax(0, 1fr); }
  .ap-mock__photo { aspect-ratio: 16 / 10; -webkit-mask-image: none; mask-image: none; }
  .ap-mock__panel { -webkit-mask-image: none; mask-image: none; padding: 24px; }
  .ap-mock__dots { display: none; }
}

/* ============================================================
   16. Page « Επικοινωνία »
   ============================================================ */
body.ap .ap-phero--contact h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 30ch;
}
body.ap .ap-phero--contact p { max-width: calc(46ch + 2cm); }
/* L'image livrée avec le thème est large (3764 × 941) et remplit le hero.
   Une image en 16/9 serait rognée : elle est donc posée entière à droite et
   son bord gauche se dissout dans un aplat repris du mur photographié. */
.ap-phero--contact { background: #FDFCFB; }
/* `contain` laissait une bande blanche sous l'image dès que la fenêtre était
   plus étroite que 1772 px : l'image, calée au centre vertical, ne remplissait
   pas les 700 px du hero. Elle est donc recadrée en `cover` et poussée à
   droite — seul le mur vide de gauche est rogné, le sujet reste entier. */
.ap-phero--contact .ap-phero__img {
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
@media (max-width: 1100px) {
  .ap-phero--contact .ap-phero__img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Même bloc que « nous rejoindre », colonne de texte plus large */
.ap-join__inner--contact {
  grid-template-columns: minmax(0, min(calc(52ch + 3.5cm), 48%)) minmax(0, 1fr);
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 1100px) {
  .ap-join__inner--contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Badge reCAPTCHA v3 : il reste visible, comme l'exige Google */
.grecaptcha-badge { z-index: 5; }

/* --- Écrans réduits --- */
@media (max-width: 1100px) {
  .ap-prodhead__grid { gap: 40px; }
  .ap-spanel__copy { padding: 40px; }
}
@media (max-width: 900px) {
  .ap-prodhead__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .ap-rail { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .ap-rail__item { padding-right: 0; border-top: 1px solid var(--ap-line); }
  .ap-rail__item.is-active { border-top: 2px solid var(--ap-olive); }
  .ap-stack { margin-top: 24px; }
  .ap-spanel { position: static; min-height: 0; grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  .ap-spanel__art { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .ap-spanel__copy { max-width: none; padding: 40px 24px; }
  .ap-pair,
  .ap-pair--hair { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
  .ap-figs { gap: 32px; }
  .ap-join__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-form { padding: 24px; }
}

/* ============================================================
   17. Version mobile (17 sept. 2026)

   Tous les correctifs pour les écrans de téléphone sont réunis ici, après
   les sections de page, plutôt qu'éparpillés dans chacune d'elles. Deux
   paliers : 900 px (bascule mobile) et 640 px (ajustements de taille).
   Les hauteurs en vh sont abandonnées : sur iOS la barre d'adresse de Safari
   les fait varier au défilement et recadre les images en cours de route.
   ============================================================ */

/* Le bouton du menu reste un élément de grille au-dessus de 900 px, invisible
   mais de dimension nulle : `display: none` le retirerait de la grille de
   `.ap-header__top`, et le logo ne serait plus centré. */
/* Doublon de la première miniature : il ne sert qu'au bandeau mobile. */
.ap-thumb--dup { display: none; }

.ap-burger {
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}

@media (max-width: 900px) {

  /* --- En-tête : bouton du menu, logo, connecteur --- */
  .ap-header { padding: 16px 20px 20px; }
  .ap-header__top {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 0;
    justify-items: stretch;
  }
  .ap-logo { gap: 8px; }
  .ap-logo img, body.ap .ap-logo img { width: 84px; }
  .ap-logo__tagline, body.ap .ap-logo__tagline { font-size: 9px; letter-spacing: 0.16em; }
  .ap-header__actions { justify-self: end; align-self: center; }

  .ap-burger {
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: visible;
    margin-left: -10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    justify-self: start;
    z-index: 70;
  }
  .ap-burger:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }
  .ap-burger__bars { position: relative; display: block; width: 22px; height: 1.5px; background: var(--ap-ink); }
  .ap-burger__bars::before,
  .ap-burger__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 1.5px;
    background: var(--ap-ink);
    transition: transform 320ms var(--ap-ease);
  }
  .ap-burger__bars::before { top: -7px; }
  .ap-burger__bars::after { top: 7px; }

  html.ap-menu-open .ap-burger { position: fixed; top: 14px; left: 14px; margin-left: 0; }
  html.ap-menu-open .ap-burger__bars { background: transparent; }
  html.ap-menu-open .ap-burger__bars::before { transform: translateY(7px) rotate(45deg); }
  html.ap-menu-open .ap-burger__bars::after { transform: translateY(-7px) rotate(-45deg); }

  /* Connecteur extranet : pastille compacte, sans l'étiquette qui glisse */
  .ap-extranet { margin-right: 0; padding: 10px 16px; font-size: 10px; letter-spacing: 0.14em; }
  .ap-extranet::after { display: none; }
  .ap-extranet:hover, .ap-extranet:active { transform: none; }

  /* --- Navigation : panneau plein écran --- */
  .ap-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    left: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 72px 28px 40px;
    background: var(--ap-cream);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms var(--ap-ease), visibility 320ms var(--ap-ease);
  }
  html.ap-menu-open .ap-nav { opacity: 1; visibility: visible; pointer-events: auto; }
  html.ap-menu-open, html.ap-menu-open body { overflow: hidden; }

  .ap-nav li { border-bottom: 1px solid var(--ap-line); }
  .ap-nav li:first-child { border-top: 1px solid var(--ap-line); }
  body.ap .ap-nav a {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0 2px;
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 0.14em;
    white-space: normal;
    transition: color 220ms var(--ap-ease);
  }
  /* Sur le panneau, la page courante se signale par la couleur et un filet
     doré, non par la pastille en relief de la barre de bureau. */
  body.ap .ap-nav .current-menu-item > a,
  body.ap .ap-nav a[aria-current="page"] {
    position: relative;
    background: none;
    box-shadow: none;
    color: var(--ap-olive);
  }
  body.ap .ap-nav .current-menu-item > a::before,
  body.ap .ap-nav a[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: -1px;
    width: 40px;
    height: 2px;
    background: var(--ap-gold);
  }
  body.ap .ap-nav a:active { background: none; box-shadow: none; transform: none; }

  /* --- Hero de l'accueil --- */
  .ap-hero__picture { min-height: 0; aspect-ratio: 4 / 3; }
  .ap-hero__picture img { object-position: 64% center; }
  .ap-hero__panel { padding: 40px 24px 44px; gap: 18px; }

  /* --- Hero des pages intérieures ---
     Un rapport fixe remplace les 46vh, et chaque page cadre son visuel.
     Tous les visuels livrés (17 sept. 2026) ont leur sujet à droite et une
     large plage vide à gauche : le défaut vise donc 72 % de la largeur, et
     chaque page l'ajuste à son image. */
  .ap-phero__img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 72% center;
    opacity: 1;
  }
  /* Le filet de récolte occupe le haut du cadre. */
  .ap-phero--prod .ap-phero__img { object-position: 70% 40%; }
  /* Boîte de Pétri : `contain` sur le bureau, recadrée ici. */
  .ap-phero--eng .ap-phero__img { object-fit: cover; object-position: 70% center; }
  /* La maquette du bâtiment est dans la moitié haute, la main juste dessous. */
  .ap-phero--res .ap-phero__img { object-position: 68% 45%; }
  /* Image très large (1995 × 788) : la console et l'olivier sont à l'extrême droite. */
  .ap-phero--contact .ap-phero__img { aspect-ratio: 16 / 11; object-position: 86% center; }
  .ap-phero__inner { padding: 28px 24px 8px; }

  /* --- Titre ajouré : le filet s'affine avec le corps --- */
  body.ap .ap-heading h2 { -webkit-text-stroke: 1px var(--ap-ink); }

  /* --- L'olivier ---
     En une colonne, l'olivier se retrouvait entre le chapô et la liste des
     étapes, soit au milieu de la section. Il ferme désormais la section, posé
     sur la bande olive. La propriété display:contents fait remonter les
     enfants de l'aside au niveau du conteneur : c'est le seul moyen
     d'ordonner l'image après la colonne des étapes, dont elle n'est pas la
     sœur dans le balisage. */
  .ap-istoria__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 0;
  }
  .ap-istoria__aside { display: contents; }
  .ap-istoria__main { order: 1; margin-top: 16px; padding-bottom: 0; }
  body.ap .ap-istoria__img {
    order: 2;
    align-self: center;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 32px 0 0;
    padding-top: 0;
    object-fit: contain;
    object-position: center bottom;
  }

  /* --- L'équipe : portrait, fiche, puis miniatures qui défilent --- */
  .ap-omada__stage { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .ap-omada__text { order: 1; max-width: none; }
  .ap-thumb--lead { display: none; }
  .ap-omada__portrait { order: 2; width: 100%; max-width: 320px; margin: 0 auto; }
  .ap-omada__side { order: 3; gap: 24px; }
  .ap-omada__cards { padding-top: 0; }
  body.ap .ap-omada__bio { max-width: none; }
  .ap-omada__thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 104, 24, 0.4) transparent;
    margin-inline: -24px;
    padding: 2px 24px 10px;
  }
  .ap-omada__thumbs::-webkit-scrollbar { height: 6px; }
  .ap-omada__thumbs::-webkit-scrollbar-track { background: transparent; }
  .ap-omada__thumbs::-webkit-scrollbar-thumb {
    background: rgba(127, 104, 24, 0.4);
    border-radius: 999px;
  }
  .ap-thumb--dup { display: block; }
  .ap-omada__thumbs .ap-thumb { flex: 0 0 108px; scroll-snap-align: start; }

  /* --- Nos valeurs : le retrait latéral de la section est rétabli ---
     Il était annulé à 900 px, ce qui collait le titre et les cartes au bord
     de l'écran et rognait leur filet olive. */
  .ap-axies__inner { padding-left: 24px; padding-right: 24px; }
  .ap-axia { padding: 62px 20px 28px; }

  /* --- Certifications : bandeau qui défile horizontalement ---
     Neuf logos en grille faisaient cinq écrans de haut. */
  .ap-certs__list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 104, 24, 0.4) transparent;
    margin-inline: -24px;
    padding: 2px 24px 14px;
  }
  .ap-certs__list::-webkit-scrollbar { height: 6px; }
  .ap-certs__list::-webkit-scrollbar-track { background: transparent; }
  .ap-certs__list::-webkit-scrollbar-thumb {
    background: rgba(127, 104, 24, 0.4);
    border-radius: 999px;
  }
  .ap-cert { flex: 0 0 136px; min-height: 104px; padding: 18px 14px; scroll-snap-align: center; }
  .ap-cert img { height: 46px; }

  /* --- Pied de page : deux colonnes de liens plutôt qu'une pile ---
     « Μενού » compte six liens, les deux autres colonnes trois : laissée à
     l'écoulement automatique, « Νομικά » se retrouvait seule sur une
     troisième rangée. Elle tient maintenant sous « Ελαιοτριβείο », dans la
     colonne de droite, et les deux colonnes se terminent à la même hauteur. */
  .ap-footer { padding: 28px 24px 18px; }
  .ap-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .ap-footer__grid > *:nth-child(2) { grid-row: span 2; }
  .ap-footer__brand { grid-column: 1 / -1; gap: 10px; }
  .ap-footer__brand img { width: 92px; }
  .ap-footer__note { font-size: 12px; line-height: 1.6; max-width: none; }
  .ap-footer__col { gap: 0; }
  .ap-footer__menu { gap: 0; }
  .ap-footer__col .ap-eyebrow { margin-bottom: 6px; }
  body.ap .ap-footer__col a { padding: 5px 0; font-size: 11px; letter-spacing: 0.1em; }
  .ap-footer__legal { margin-top: 22px; }
  body.ap .ap-footer__legal .ap-eyebrow { font-size: 10px; letter-spacing: 0.1em; line-height: 1.7; }

  /* --- Formulaires : 16 px minimum, sinon iOS zoome à la saisie --- */
  body.ap .ap-field input,
  body.ap .ap-field textarea,
  body.ap .ap-form .wpforms-form input[type="text"],
  body.ap .ap-form .wpforms-form input[type="email"],
  body.ap .ap-form .wpforms-form input[type="tel"],
  body.ap .ap-form .wpforms-form input[type="url"],
  body.ap .ap-form .wpforms-form input[type="number"],
  body.ap .ap-form .wpforms-form select,
  body.ap .ap-form .wpforms-form textarea { font-size: 16px; }
}

@media (max-width: 640px) {

  /* --- Tuiles de l'accueil : libellés à l'horizontale ---
     Tournés à 90°, ils occupaient toute la hauteur de la tuile. */
  .ap-tile { aspect-ratio: 1 / 0.74; }
  /* Les trois photos de tuiles ont leur sujet à droite. */
  .ap-tile img { object-position: 70% center; }
  .ap-tile__label--v,
  .ap-tile__label--h {
    left: 20px;
    right: auto;
    top: 20px;
    bottom: auto;
    max-width: calc(100% - 40px);
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 21px;
    line-height: 1.12;
  }
  .ap-tile__link,
  .ap-tile__link--v,
  .ap-tile__link--v.ap-tile__link--right {
    left: 20px;
    right: auto;
    top: auto;
    bottom: 20px;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 14px;
  }
  /* La tuile 2 garde son lien en haut : le bol occupe tout le bas du cadre. */
  .ap-tiles > .ap-tile:nth-child(2) .ap-tile__link { top: 20px; bottom: auto; }
  /* Les tuiles 3 et 5 portent une flèche vers la gauche, qui pointait vers
     le bord de la grille de bureau. Tous les liens étant désormais alignés
     à gauche, la flèche passe derrière le libellé et se retourne. */
  .ap-tile__link--v { flex-direction: row-reverse; justify-content: flex-end; }
  .ap-tile__link--v .ap-tile__arrow { transform: scaleX(-1); }
  .ap-tile:hover .ap-tile__link--v .ap-tile__arrow { transform: scaleX(-1) translateX(-4px); }

  /* --- Maquette de l'espace producteur --- */
  .ap-mock { padding: 10px; border-radius: 22px; }
  /* L'image est au format portrait : un carré cadre la capsule entière,
     là où le 16/10 hérité du bureau n'en montrait qu'une tranche. */
  .ap-mock__photo { aspect-ratio: 1 / 1; background-position: 42% center; }
  .ap-mock__panel { padding: 22px 18px; }
  .ap-mocktabs { gap: 2px; }
  body.ap .ap-mocktab { font-size: 9px; letter-spacing: 0.08em; }
  .ap-mockrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 54px; gap: 6px; font-size: 10px; }
  .ap-mockstat > b { font-size: 19px; }

  /* --- Hero : un peu moins haut, le texte arrive plus vite ---
     L'ancienne règle de la page « Δεσμεύσεις » passait son visuel à 35 %
     d'opacité sous 640 px ; il est désormais rendu à pleine opacité. */
  .ap-phero__img { aspect-ratio: 1 / 1; }
  .ap-phero--eng .ap-phero__img { opacity: 1; object-position: 70% center; }
  .ap-phero--contact .ap-phero__img { aspect-ratio: 16 / 12; }
  .ap-hero__picture { aspect-ratio: 1 / 1; }

  /* --- Page « Νομικές πληροφορίες » --- */
  .ap-legal { padding: 48px 20px 72px; }
  body.ap .ap-legal__head h1 { font-size: 34px; }
  body.ap .ap-legal__body h2 { font-size: 15px; margin-top: 44px; }
  body.ap .ap-legal__body p,
  body.ap .ap-legal__body li { font-size: 16px; }
  body.ap .ap-legal__body td { font-size: 14px; }
  .ap-legal__card { padding: 18px 20px; }
}


/* --- Page « Τα ελαιόλαδά μας » (v1.11.0) : préfixe html body.ap, la section 23
   venant après celle-ci dans la feuille. --- */
@media (max-width: 900px) {
  html body.ap .ap-car { aspect-ratio: 4 / 5; max-height: none; }
  html body.ap .ap-car__img { object-fit: cover; }
  html body.ap .ap-car__title { top: 17%; font-size: clamp(56px, 17vw, 120px); }
  html body.ap .ap-car__variant { top: auto; bottom: 19.5%; right: 0; left: 0; max-width: none; text-align: center; font-size: 11px; }
  html body.ap .ap-car__corner--l { display: none; }
  html body.ap .ap-car__corner--r { right: 0; left: 0; text-align: center; top: 10%; }
  html body.ap .ap-car__desc { bottom: 14%; font-size: 10px; }
  html body.ap .ap-car__nav { bottom: 13.5%; width: 70%; }
  /* Sélecteur de langue Polylang : toujours en dernière ligne du panneau. */
  html body.ap .ap-nav { flex-wrap: nowrap; justify-content: flex-start; }
  html body.ap .ap-nav li.lang-item { order: 99; position: static !important; float: none !important; width: auto !important; margin: 0 !important; transform: none !important; }
  html body.ap .ap-nav li.lang-item > a { justify-content: flex-start; }
  html body.ap .ap-car__hit--prev, html body.ap .ap-car__hit--next { width: 22%; }
  html body.ap .ap-car__hit--open { left: 30%; width: 40%; }
  html body.ap .ap-fiche { padding: 10px; }
  html body.ap .ap-fiche__card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
  html body.ap .ap-fiche__media { min-height: 0; padding: 20px; }
  html body.ap .ap-fiche__media img { max-height: 320px; object-position: center center; }
  html body.ap .ap-fiche__body { padding: 0; }
  html body.ap .ap-phero--huiles .ap-phero__img { aspect-ratio: 16 / 11; object-position: 80% center; }
  html body.ap .ap-etq__grid, html body.ap .ap-qr__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html body.ap .ap-etq__grid { padding: 64px 24px; }
  html body.ap .ap-etq__head, html body.ap .ap-etq__content, html body.ap .ap-etq__visual { grid-column: 1; grid-row: auto; }
  html body.ap .ap-qr__head { position: static; }
  html body.ap .ap-qr__inner { padding: 64px 24px; }
  html body.ap .ap-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ap .ap-page:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  html body.ap .ap-car__top::before, html body.ap .ap-car__top::after { width: 32px; }
  html body.ap .ap-car__desc { display: none; }
  html body.ap .ap-fiche__notes > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ============================================================
   18. Tablette (iPad)

   Entre 640 et 1100 px la colonne de contenu est large, et l'olivier, posé
   en pleine largeur, occupait tout l'écran. Il garde ici la taille qu'il a
   sur la version bureau. Le sélecteur est préfixé pour passer devant les
   règles de section, qui le visent toutes au même niveau.
   ============================================================ */

@media (min-width: 641px) and (max-width: 1100px) {
  body.ap .ap-istoria__img { max-width: 300px; }
}

/* ============================================================
   19. Grille de tuiles sur écran large

   Les tuiles suivent un rapport presque carré (1 / 0.86) : leur hauteur
   grandit donc avec la largeur de l'écran, et la grille finissait par
   occuper plusieurs écrans en hauteur.

   Deux essais écartés : un plafond de hauteur avec le rapport conservé
   (il rétrécissait aussi la largeur et disjoignait les colonnes), puis
   des tuiles paysage avec les photos en `contain` (elles laissaient de
   larges plages blanches autour du sujet sur écran large).

   Retenu : la grille est plafonnée à la largeur du gabarit de la charte
   (1280 px) et centrée. Les tuiles gardent leur proportion carrée et les
   photos leur cadrage `cover`, quelle que soit la largeur de l'écran.
   ============================================================ */

@media (min-width: 901px) {
  body.ap .ap-tiles { max-width: 1280px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   20. Retour en haut de page

   Pastille ronde translucide, en bas à droite, qui apparaît après 800 px
   de défilement. Le verre fumé (encre à 38 % + flou d'arrière-plan) la
   rend lisible aussi bien sur le crème des sections que sur l'olive du
   pied de page, là où une pastille olive pleine disparaissait. Le survol
   assombrit le verre, sans déplacement ni échelle.
   ============================================================ */

body.ap .ap-totop {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(247, 244, 236, 0.45);
  border-radius: 999px;
  background: rgba(27, 26, 22, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ap-cream);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ap-ease), background-color 140ms var(--ap-ease), border-color 140ms var(--ap-ease);
}
body.ap .ap-totop[hidden] { display: none; }
body.ap .ap-totop.is-visible { opacity: 1; visibility: visible; }
body.ap .ap-totop:hover { background: rgba(27, 26, 22, 0.56); border-color: rgba(247, 244, 236, 0.7); }
body.ap .ap-totop:active { background: rgba(27, 26, 22, 0.68); }
body.ap .ap-totop:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }
.ap-totop__arrow {
  font-family: var(--ap-sans);
  font-size: 20px;
  line-height: 1;
}

/* Le menu mobile est un panneau plein écran : la pastille passerait devant. */
html.ap-menu-open body.ap .ap-totop { opacity: 0; visibility: hidden; }

@media (max-width: 640px) {
  body.ap .ap-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ap .ap-totop { transition: none; }
}

/* ============================================================
   21. Lien de gestion des cookies
   ============================================================ */
/* C'est un bouton, parce qu'il ouvre un panneau au lieu de mener ailleurs ;
   il doit néanmoins se lire comme les autres liens de la ligne du bas. */
.ap-footer__cookies {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-bottom: 1px solid rgba(247, 244, 236, 0.45);
  transition: border-color 220ms var(--ap-ease);
}
.ap-footer__cookies:hover { border-bottom-color: var(--ap-cream); }

/* ============================================================
   22. Page « Νομικές πληροφορίες » (v1.10.0)
   Texte long saisi dans l'éditeur : on stylise les balises produites
   par WordPress (h2, h3, p, ul, table), préfixées par body.ap pour
   passer devant Blocksy. Adaptations mobiles en section 17.
   ============================================================ */
.ap-legal { background: var(--ap-white); padding: 96px var(--ap-page-x) 120px; }
.ap-legal__head,
.ap-legal__body { max-width: 760px; margin: 0 auto; }
.ap-legal__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
body.ap .ap-legal__head .ap-eyebrow { color: var(--ap-ink-muted); }
body.ap .ap-legal__head h1 {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  color: var(--ap-ink);
  text-transform: none;
  letter-spacing: 0;
  text-wrap: balance;
}
body.ap .ap-legal__body h2 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-olive);
  margin: 64px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--ap-line);
}
body.ap .ap-legal__body h3 {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--ap-ink);
  margin: 36px 0 12px;
}
body.ap .ap-legal__body p,
body.ap .ap-legal__body li {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
body.ap .ap-legal__body p + p { margin-top: 16px; }
body.ap .ap-legal__body strong { font-weight: 500; color: var(--ap-ink); }
body.ap .ap-legal__body a { border-bottom: 1px solid color-mix(in oklab, var(--ap-olive) 40%, transparent); }
body.ap .ap-legal__body mark { background: var(--ap-gold); color: var(--ap-ink); padding: 0 4px; }
body.ap .ap-legal__version {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-ink-muted);
  margin-bottom: 32px;
}
body.ap .ap-legal__body ul { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
body.ap .ap-legal__body ul li { position: relative; padding-left: 22px; }
body.ap .ap-legal__body ul li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--ap-gold); }
body.ap .ap-legal__card { background: var(--ap-cream); padding: 24px 28px; margin: 20px 0; line-height: 1.8; }
/* Tableaux : défilement horizontal sur écran étroit plutôt qu'écrasement. */
.ap-legal__table { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
body.ap .ap-legal__body table { width: 100%; min-width: 560px; border-collapse: collapse; }
body.ap .ap-legal__body th {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-ink);
  text-align: left;
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--ap-ink);
}
body.ap .ap-legal__body td {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ap-ink-muted);
  vertical-align: top;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--ap-line);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
body.ap .ap-legal__body td:first-child { color: var(--ap-ink); font-weight: 400; }


/* ============================================================
   23. Page « Τα ελαιόλαδά μας » (v1.11.0)
   Hero, bandes et colonnes reprennent Δεσμεύσεις. Trois blocs propres :
   l'étiquette annotée, la scène des marques (diaporama), la fiche
   de dégustation (<dialog>). Mobile en section 17.
   ============================================================ */
/* Hero : mêmes règles que « Επικοινωνία » (image au même format, 1993 × 789) */
body.ap .ap-phero--huiles h1 { font-size: clamp(30px, 3.4vw, 42px); max-width: 18ch; }
body.ap .ap-phero--huiles p { max-width: 38ch; }
.ap-phero--huiles { background: #FDFCFB; }
.ap-phero--huiles .ap-phero__img {
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
@media (max-width: 1100px) {
  .ap-phero--huiles .ap-phero__img { -webkit-mask-image: none; mask-image: none; }
}

/* Bouton pastille, même dessin que .ap-submit */
body.ap .ap-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--ap-olive);
  color: var(--ap-cream);
  border: 1px solid var(--ap-olive);
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ap-ease), color 220ms var(--ap-ease);
}
body.ap .ap-pill:hover { background: color-mix(in oklab, var(--ap-olive) 86%, var(--ap-ink)); color: var(--ap-cream); }
body.ap .ap-pill--light { background: var(--ap-cream); border-color: var(--ap-cream); color: var(--ap-olive); }
body.ap .ap-pill--light:hover { background: var(--ap-sand); color: var(--ap-olive); }
body.ap .ap-pill--ghost { background: transparent; color: var(--ap-olive); }
body.ap .ap-pill--ghost:hover { background: var(--ap-olive); color: var(--ap-cream); }
body.ap .ap-pill.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
body.ap .ap-pill:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }

/* --- Κατανοώντας τις ετικέτες μας : texte + accordéon à gauche, visuel à droite --- */
.ap-etq__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 64px;
  row-gap: 20px;
  align-items: start;
  padding: 96px 40px;
}
/* Le visuel démarre à la hauteur du chapô et ne bouge plus à l'ouverture de l'accordéon. */
.ap-etq__head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 20px; }
.ap-etq__content { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 20px; }
.ap-etq__visual { grid-column: 2; grid-row: 2; align-self: start; }
body.ap .ap-etq__title {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.1;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-etq__lead {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ap-ink-muted);
  max-width: 46ch;
}
.ap-accs { margin-top: 20px; border-top: 1px solid var(--ap-line); }
.ap-acc { border-bottom: 1px solid var(--ap-line); }
.ap-acc__sum {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.ap-acc__sum::-webkit-details-marker { display: none; }
.ap-acc__num {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ap-olive);
}
.ap-acc__title {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-ink);
  transition: color 220ms var(--ap-ease);
}
.ap-acc__sum:hover .ap-acc__title, .ap-acc[open] .ap-acc__title { color: var(--ap-olive); }
.ap-acc__icon { position: relative; width: 14px; height: 14px; justify-self: end; }
.ap-acc__icon::before, .ap-acc__icon::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ap-olive);
  transition: transform 400ms var(--ap-ease);
}
.ap-acc__icon::after { transform: rotate(90deg); }
.ap-acc[open] .ap-acc__icon::after { transform: rotate(0deg); }
.ap-acc__sum:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 2px; }
body.ap .ap-acc__text {
  padding: 0 32px 24px 48px;
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ap-ink-muted);
  text-wrap: pretty;
}
.ap-acc[open] .ap-acc__text { animation: apAccIn 400ms var(--ap-ease); }
@keyframes apAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ap-etq__visual { margin: 0; }
.ap-etq__visual img { display: block; width: 100%; height: auto; }

/* --- Registre QR : bande sable pleine largeur --- */
.ap-qr { background: var(--ap-sand); }
.ap-qr__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.ap-qr__head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 32px; }
.ap-qr__head .ap-kicker { color: var(--ap-olive); }
body.ap .ap-qr__title {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-qr__claim {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ap-olive);
  max-width: 40ch;
}
.ap-qr__body { display: flex; flex-direction: column; gap: 32px; }
body.ap .ap-qr__p {
  font-family: var(--ap-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ap-ink-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
body.ap .ap-qr__p strong { font-weight: 500; color: var(--ap-ink); }
.ap-pages {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ap-page {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  background: var(--ap-cream);
}
.ap-page::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 22px;
  background: repeating-linear-gradient(180deg, var(--ap-line) 0 1px, transparent 1px 7px);
}
.ap-page + .ap-page::before {
  content: '→';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  text-align: center;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ap-olive);
}
.ap-page__n {
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--ap-olive);
}
.ap-page__t {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-ink);
}

/* --- Les marques : en-tête --- */
.ap-marques__head { margin-bottom: 56px; }
body.ap .ap-brands__intro { margin-top: 0; max-width: 44ch; align-self: end; }

/* --- Carrousel des huiles : une teinte par produit, marque en grand
   derrière les bouteilles, bouts des produits voisins sur les bords.
   Chaque visuel (1600 × 1000, fond transparent) est détouré depuis les
   compositions fournies ; le fond est la couleur de la scène. --- */
/* Ombre de feuille soulevée : un halo large et diffus sous le bord bas,
   plus dense au centre, qui s'efface vers les coins. */
.ap-car-wrap { position: relative; isolation: isolate; margin-bottom: 64px; }
.ap-car-wrap::after {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -56px;
  height: 96px;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 28%, rgba(27, 26, 22, 0.48), rgba(27, 26, 22, 0.18) 55%, transparent 78%);
  filter: blur(10px);
}
.ap-car-wrap::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 6px;
  height: 30px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 26px 28px rgba(27, 26, 22, 0.36);
}
.ap-car {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 780px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 52% at 50% 44%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(180deg, transparent 0 64%, rgba(27, 26, 22, 0.07) 76%, rgba(27, 26, 22, 0.1) 100%),
    var(--car-bg, #A38B6D);
  transition: background-color 900ms var(--ap-ease);
  color: var(--ap-cream);
  outline: none;
}
.ap-car:focus-visible { outline: 2px solid var(--ap-olive); outline-offset: 4px; }
.ap-car__top {
  position: absolute;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 3;
}
.ap-car__top::before, .ap-car__top::after { content: ''; width: 90px; height: 1px; background: currentColor; opacity: 0.6; }
.ap-car__corner {
  position: absolute;
  top: 13%;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 3;
}
.ap-car__corner--l { left: 8%; }
.ap-car__corner--r { right: 8%; }
.ap-car__slide { position: absolute; inset: 0; pointer-events: none; }
body.ap .ap-car__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  text-align: center;
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(64px, 15vw, 210px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ap-cream);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ap-ease), transform 1000ms var(--ap-ease-out);
}
body.ap .ap-car__variant {
  position: absolute;
  right: 8%;
  top: 49%;
  max-width: 22ch;
  text-align: right;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-cream);
  opacity: 0;
  transition: opacity 700ms var(--ap-ease) 150ms;
}
.ap-car__slide .ap-car__corner--r { opacity: 0; transition: opacity 700ms var(--ap-ease); }
.ap-car__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateX(8%);
  transition: opacity 700ms var(--ap-ease), transform 1100ms var(--ap-ease-out);
  filter: drop-shadow(0 22px 16px rgba(27, 26, 22, 0.28));
}
body.ap .ap-car__desc {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(620px, 76%);
  text-wrap: balance;
  text-align: center;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ap-cream);
  opacity: 0;
  transition: opacity 700ms var(--ap-ease) 200ms;
}
.ap-car__slide.is-active .ap-car__title { opacity: 1; transform: none; }
.ap-car__slide.is-active .ap-car__variant,
.ap-car__slide.is-active .ap-car__corner--r,
.ap-car__slide.is-active .ap-car__desc { opacity: 1; }
.ap-car__slide.is-active .ap-car__img { opacity: 1; transform: none; }
.ap-car__slide.is-back .ap-car__img { transform: translateX(-8%); }
.ap-car.is-rev .ap-car__slide:not(.is-active):not(.is-back) .ap-car__img { transform: translateX(-8%); }
.ap-car.is-rev .ap-car__slide.is-back .ap-car__img { transform: translateX(8%); }

/* Zones cliquables : bords = produit voisin, centre = fiche */
body.ap .ap-car__hit { position: absolute; top: 20%; bottom: 24%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 4; }
.ap-car__hit--prev { left: 0; width: 8%; cursor: w-resize; }
.ap-car__hit--next { right: 0; width: 8%; cursor: e-resize; }
.ap-car__hit--open { left: 43%; width: 14%; cursor: zoom-in; }
.ap-car__hit:focus-visible { outline: 1px dashed var(--ap-cream); outline-offset: -6px; }

.ap-car__nav {
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  width: min(460px, 60%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}
.ap-car__nav::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  border-top: 1px dashed var(--ap-cream);
  opacity: 0.7;
}
body.ap .ap-car__dot {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-car__dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ap-cream);
}
.ap-car__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--ap-cream);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 400ms var(--ap-ease), transform 500ms var(--ap-ease-out);
}
.ap-car__dot.is-active::after { opacity: 1; transform: none; }
.ap-car__dot:focus-visible { outline: 1px solid var(--ap-cream); outline-offset: 3px; }
body.ap .ap-car__more {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  background: var(--ap-cream);
  color: var(--ap-ink);
  border: 0;
  border-radius: 999px;
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ap-ease);
}
body.ap .ap-car__more:hover { background: var(--ap-sand); }
@media (max-width: 1100px) { body.ap .ap-car__desc { display: none; } }

/* --- Fiche produit : carte blanche dans un cadre à la couleur du produit --- */
.ap-fiche {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 20px;
  border: 0;
  background: var(--car-bg, var(--ap-sand));
  color: var(--ap-ink);
  overflow: auto;
}
.ap-fiche::backdrop { background: rgba(27, 26, 22, 0.48); }
.ap-fiche[open] { animation: apFicheIn 500ms var(--ap-ease-out); }
@keyframes apFicheIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ap-fiche__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  padding: 32px;
  background: var(--ap-white);
}
/* v1.11.3 : bouteille toujours centrée et entière dans son cadre (contain + marge), quel que soit le rapport du bloc */
.ap-fiche__media { margin: 0; background: var(--car-bg); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5%, 56px); min-height: 360px; }
.ap-fiche__media img { display: block; width: 100%; height: 100%; max-height: 620px; object-fit: contain; object-position: center center; }
.ap-fiche__body { display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 8px 0; }
body.ap .ap-fiche__title {
  margin: 0;
  font-family: var(--ap-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  color: var(--ap-ink);
  text-wrap: pretty;
}
body.ap .ap-fiche__slogan {
  font-family: var(--ap-display);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ap-olive);
}
body.ap .ap-fiche__desc { font-size: 13px; line-height: 1.85; color: var(--ap-ink-muted); }
.ap-fiche__notes { margin: 8px 0 0; display: flex; flex-direction: column; }
.ap-fiche__notes > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--ap-line);
}
.ap-fiche__notes dt {
  font-family: var(--ap-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
  padding-top: 3px;
}
.ap-fiche__notes dd { margin: 0; font-family: var(--ap-sans); font-weight: 300; font-size: 13px; line-height: 1.65; color: var(--ap-ink); }
.ap-fiche__body > .ap-pill { margin-top: 8px; }
body.ap .ap-fiche__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--ap-ink-muted);
  cursor: pointer;
  z-index: 2;
}
body.ap .ap-fiche__close:hover { color: var(--ap-olive); }

@media (prefers-reduced-motion: reduce) {
  .ap-car, .ap-car__title, .ap-car__img, .ap-car__variant, .ap-car__desc { transition: none !important; }
  .ap-fiche[open] { animation: none; }
}

/* ============================================================
   24. Équipe : hauteur fixe des fiches (v1.12.2)
   Les fiches de l'équipe sont superposées dans une même case de
   grille : le bloc prend la hauteur de la plus longue et ne bouge
   plus quand on change de membre. Les fiches inactives sont
   masquées par visibility, pas par display.
   ============================================================ */
body.ap .ap-omada__cards { display: grid; }
body.ap .ap-omada__card { grid-area: 1 / 1; animation: none; }
body.ap .ap-omada__card:not(.is-on) { display: flex; visibility: hidden; pointer-events: none; }
body.ap .ap-omada__card.is-on { animation: apPanelIn 400ms var(--ap-ease); }


/* 25. Pied de page : le sélecteur de langue du menu principal n'y a pas sa place (v1.12.5) */
body.ap .ap-footer__menu .lang-item { display: none; }

/* 26. Barre de navigation entre 901 et 1440 px (v1.12.13) : les libellés français, plus longs,
   et le sélecteur de langue débordaient de la pastille, rognée à gauche et à droite. */
@media (min-width: 901px) and (max-width: 1440px) {
  html body.ap .ap-nav a { font-size: 12px; letter-spacing: 0.08em; padding-left: clamp(8px, 0.9vw, 16px); padding-right: clamp(8px, 0.9vw, 16px); }
  /* Drapeau seul ; le nom de la langue reste lisible par les lecteurs d'écran. */
  html body.ap .ap-nav li.lang-item a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  html body.ap .ap-nav { flex-wrap: wrap; row-gap: 4px; width: auto; max-width: calc(100vw - 48px); border-radius: 32px; }
}