/**
 * Oguey MVM — Global Styles
 *
 * Base styles, accessibility, focus rings, Elementor overrides,
 * et 4 variantes de boutons selon Figma (component bt 2/v2).
 *
 * Le header est géré dans Elementor (Theme Builder), pas ici.
 */

/* ============================================
   RESET — virer toutes les marges parasites du body/main
   pour que Elementor puisse prendre le contrôle complet
   ============================================ */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body.elementor-page,
body.elementor-default {
  margin: 0 !important;
  padding: 0 !important;
}

main,
main.site-main,
#primary,
#main,
#content,
.site-content,
.site,
.site-inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Wrappers Elementor */
.elementor,
.elementor-section-wrap,
.elementor-inner {
  margin: 0 !important;
  padding: 0 !important;
}

/* Box sizing standard */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ============================================
   FOCUS — visible & accessible
   ============================================ */
:focus-visible {
  outline: 2px solid var(--oguey-color-brand);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--oguey-color-brand);
  outline-offset: 3px;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   BASE
   ============================================ */
body {
  font-family: var(--oguey-font-body);
  color: var(--oguey-color-text);
  background-color: var(--oguey-color-bg);
  line-height: var(--oguey-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings : Playfair Display SC pour h1-h3, Raleway pour h4-h6 */
h1, h2, h3,
.elementor-heading-title:where(h1, h2, h3) {
  font-family: var(--oguey-font-heading);
  color: var(--oguey-color-heading);
  font-weight: 700;
}
h4, h5, h6,
.elementor-heading-title:where(h4, h5, h6) {
  font-family: var(--oguey-font-body);
  color: var(--oguey-color-heading);
  font-weight: 700;
}

a {
  color: var(--oguey-color-link);
  text-decoration: none;
  transition: color var(--oguey-transition-fast);
}
a:hover {
  color: var(--oguey-color-link-hover);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   ELEMENTOR — Overrides globaux
   ============================================ */

/* Boutons Elementor par défaut : pas de border-radius (Figma) */
.elementor-button,
.elementor-widget-button .elementor-button {
  border-radius: 0 !important;
  transition: all var(--oguey-transition-normal);
}

/* Form fields focus ring cohérent */
.elementor-field:focus,
.elementor-field-textual:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--oguey-color-brand) !important;
  box-shadow: var(--oguey-shadow-focus) !important;
  outline: none !important;
}

/* ============================================
   BUTTON VARIANTS — 4 styles selon Figma
   ----------------------------------------
   Component "bt 2/v2" du design system Figma :
   - sans contour : pas de fond, pas de bordure, juste texte + flèche
   - primary     : fond bleu primary-900 (#143F84), bordure blanche 20%
   - secondary   : transparent, bordure 1px primary-900, texte primary-900
   - contour blanc : transparent, bordure 1px blanche, texte blanc

   Usage Elementor : ajouter la classe dans "CSS Classes" du widget Button
   Exemple : oguey-btn-primary
   ============================================ */

.oguey-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oguey-btn-gap);
  padding: var(--oguey-btn-padding-y) var(--oguey-btn-padding-x);
  font-family: var(--oguey-font-body);
  font-weight: 600;
  font-size: var(--oguey-fs-button);
  letter-spacing: var(--oguey-ls-wide);
  text-transform: none;
  text-decoration: none;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--oguey-transition-normal);
  white-space: nowrap;
}

.oguey-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

/* Application aux widgets Elementor Button avec classe CSS */
.elementor-button.oguey-btn-primary,
.oguey-btn-primary .elementor-button-link {
  background-color: var(--oguey-color-button) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.elementor-button.oguey-btn-primary:hover,
.oguey-btn-primary .elementor-button-link:hover {
  background-color: var(--oguey-color-button-hover) !important;
  color: #FFFFFF !important;
}

.elementor-button.oguey-btn-secondary,
.oguey-btn-secondary .elementor-button-link {
  background-color: transparent !important;
  border: 1px solid var(--oguey-color-button) !important;
  color: var(--oguey-color-button) !important;
  border-radius: 0 !important;
}
.elementor-button.oguey-btn-secondary:hover,
.oguey-btn-secondary .elementor-button-link:hover {
  background-color: var(--oguey-color-button) !important;
  color: #FFFFFF !important;
}

.elementor-button.oguey-btn-white,
.oguey-btn-white .elementor-button-link {
  background-color: transparent !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.elementor-button.oguey-btn-white:hover,
.oguey-btn-white .elementor-button-link:hover {
  background-color: #FFFFFF !important;
  color: var(--oguey-color-button) !important;
}

.elementor-button.oguey-btn-ghost,
.oguey-btn-ghost .elementor-button-link {
  background-color: transparent !important;
  border: none !important;
  color: var(--oguey-color-text) !important;
  border-radius: 0 !important;
}
.elementor-button.oguey-btn-ghost:hover,
.oguey-btn-ghost .elementor-button-link:hover {
  color: var(--oguey-color-button) !important;
  background-color: transparent !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.oguey-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--oguey-ls-wide);
}

.oguey-no-underline { text-decoration: none !important; }

.oguey-radius-none { border-radius: 0; }
.oguey-radius-md   { border-radius: var(--oguey-radius-md); }
.oguey-radius-lg   { border-radius: var(--oguey-radius-lg); }

.oguey-shadow-md { box-shadow: var(--oguey-shadow-md); }
.oguey-shadow-lg { box-shadow: var(--oguey-shadow-lg); }

/* Décoration "eyebrow" (rectangle bleu sous les titres de section dans Figma) */
.oguey-section-eyebrow::before {
  content: '';
  display: block;
  width: 112px;
  height: 5px;
  background-color: var(--oguey-color-brand);
  margin-bottom: var(--oguey-space-3);
  border-radius: var(--oguey-radius-sm);
}

/* ============================================
   SELECTION
   ============================================ */
::selection {
  background-color: var(--oguey-color-brand);
  color: #FFFFFF;
}

/* ============================================
   SCROLLBAR
   ============================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--oguey-primary-300) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--oguey-primary-300);
  border-radius: var(--oguey-radius-full);
  border: 2px solid var(--oguey-color-bg);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--oguey-primary-500);
}

/* ====================================================================
   PAGE 404

   Valeurs relevées au pixel sur la maquette (rendu 1920px) :
   « Oops.... »        hauteur de capitale 36px  -> 48px, #000000, serif
   « Page introuvable » hauteur 25px             -> 34px, #143F84, graisse normale
   texte courant        hauteur 15px             -> 16px, #626262
   bouton               encadré 1px #143F84, hauteur 64px, fond transparent
   ==================================================================== */
.oguey-404 {
  padding: var(--oguey-space-32) 0;
}

.oguey-404__inner {
  width: 100%;
  max-width: var(--oguey-container-width);
  margin-inline: auto;
  padding-inline: var(--oguey-container-padding);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--oguey-space-16);
  align-items: center;
  min-height: 60vh;
}

.oguey-404__text {
  max-width: 46ch;
  justify-self: end;
}

.oguey-404__oops {
  margin: 0 0 var(--oguey-space-2);
  /* Playfair Display SANS petites capitales : la variable du thème pointe
     sur « Playfair Display SC », d'où le rendu en capitales du premier essai. */
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 3rem !important;
  line-height: 1.1 !important;
  color: #000000 !important;
  text-transform: none !important;
  font-variant: normal !important;
}

.oguey-404__title {
  margin: 0 0 var(--oguey-space-6);
  /* Raleway : sans le !important, la règle globale sur h1 impose la serif. */
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 2.125rem !important;
  line-height: var(--oguey-lh-snug) !important;
  color: var(--oguey-color-brand) !important;
  text-transform: none !important;
  font-variant: normal !important;
}

.oguey-404__lead {
  margin: 0 0 var(--oguey-space-8);
  font-family: var(--oguey-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: #626262;
}

/* Bouton encadré : le variant --ghost du thème est prévu pour les fonds
   sombres, il ne dessinait aucune bordure ici. */
.oguey-404__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--oguey-space-3);
  min-height: 64px;
  padding: 0 var(--oguey-space-8);
  background: transparent;
  border: 1px solid var(--oguey-color-brand);
  border-radius: var(--oguey-radius-none);
  font-family: var(--oguey-font-body);
  font-weight: 600;
  font-size: var(--oguey-fs-button);
  color: var(--oguey-color-brand);
  text-decoration: none;
  text-transform: none;
  transition: background var(--oguey-transition-fast), color var(--oguey-transition-fast);
}

.oguey-404__cta:hover,
.oguey-404__cta:focus-visible {
  background: var(--oguey-color-brand);
  color: #FFFFFF;
}

.oguey-404__media {
  display: flex;
  justify-content: center;
}

.oguey-404__anim {
  display: block;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px) {
  .oguey-404 {
    padding: var(--oguey-space-20) 0;
  }
  .oguey-404__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oguey-space-10);
    min-height: 0;
    text-align: center;
  }
  .oguey-404__text {
    justify-self: center;
    margin-inline: auto;
  }
  .oguey-404__oops { font-size: 2.25rem; }
  .oguey-404__title { font-size: 1.625rem; }
  .oguey-404__anim { max-width: 380px; }
}

/* ====================================================================
   CARTES PRODUITS DE L'ACCUEIL — effet de survol

   Demande de Ghofrane : « Un effet de survol est prévu afin de faire
   apparaître le texte associé à chaque produit. »

   Le titre, le texte de présentation et le libellé « Découvrir » sont
   tous rendus par le plugin Oguey Liens, dans une même pile ancrée en
   bas de la carte. Le titre posé par Elementor était en position
   absolue, à des coordonnées inconnues du CSS : il chevauchait le texte
   révélé. Les widgets de titre ont donc été retirés de l'éditeur.

   Rien ne touche à l'image ni au flux du conteneur : c'est l'image qui
   donne sa hauteur à la carte. Aucun voile n'est ajouté non plus, le
   fond au survol étant défini dans Elementor.

   Rien n'est masqué à la lecture machine : le texte reste dans le
   document et seule son opacité varie (cahier des charges §4.6). Sur
   écran tactile, où le survol n'existe pas, il est toujours affiché.
   ==================================================================== */
.oguey-image-hover {
  position: relative;
  /* Nécessaire au zoom de la photo, qui déborderait sinon. */
  overflow: hidden;
}

/* Dégradé sous le titre, sur le bas de la photo uniquement. Il n'est pas
   posé sur le conteneur mais sur la pile de textes, pour ne pas entrer en
   concurrence avec la surcouche de fond définie dans Elementor. Il grandit
   au survol, en même temps que le texte se déploie. */
.oguey-image-hover__stack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -96px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 35, 81, 0) 0%, rgba(8, 35, 81, 0.82) 100%);
  transition: top var(--oguey-transition-base, 300ms) ease;
  pointer-events: none;
}

.oguey-image-hover:hover .oguey-image-hover__stack::before,
.oguey-image-hover:focus-within .oguey-image-hover__stack::before {
  top: -220px;
}

/* Zoom de la photo : réservé aux appareils qui savent survoler. */
@media (hover: hover) {
  .oguey-image-hover img {
    transition: transform var(--oguey-transition-slow, 600ms) ease;
  }

  .oguey-image-hover:hover img,
  .oguey-image-hover:focus-within img {
    transform: scale(1.05);
  }
}

/* Pile de textes, ancrée en bas et empilée du titre vers le bouton. */
.oguey-image-hover__stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  /* Aucun écart ici : au repos le bloc révélé est replié, un gap
     laisserait un vide sous le titre et le décollerait du bas. */
  gap: 0;
  padding: var(--oguey-space-6);
  pointer-events: none;
}

.oguey-image-hover__title {
  margin: 0;
  font-family: var(--oguey-font-body);
  font-weight: 700;
  font-size: var(--oguey-fs-card-title);
  line-height: var(--oguey-lh-snug);
  color: #FFFFFF;
  text-transform: none;
}

/* Présentation et libellé « Découvrir ».

   Au repos le bloc est replié à zéro : sans cela il occupait sa hauteur
   même invisible, et poussait le titre au milieu de l'image au lieu de
   le laisser en bas. Au survol il se déploie et fait monter le titre. */
.oguey-image-hover__reveal {
  display: flex;
  flex-direction: column;
  gap: var(--oguey-space-4);
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--oguey-transition-base, 300ms) ease,
              margin-top var(--oguey-transition-base, 300ms) ease,
              opacity var(--oguey-transition-base, 300ms) ease;
}

.oguey-image-hover__desc {
  margin: 0;
  font-family: var(--oguey-font-body);
  font-weight: 400;
  font-size: var(--oguey-fs-card-p);
  line-height: var(--oguey-lh-normal);
  color: rgba(255, 255, 255, 0.92);
  text-transform: none;
}

.oguey-image-hover__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--oguey-space-2);
  font-family: var(--oguey-font-body);
  font-weight: 600;
  font-size: var(--oguey-fs-button);
  color: #FFFFFF;
  text-transform: none;
}

.oguey-image-hover:hover .oguey-image-hover__reveal,
.oguey-image-hover:focus-within .oguey-image-hover__reveal {
  /* Valeur haute volontaire : elle doit dépasser le texte le plus long,
     celui de la carte Portails. La hauteur réelle reste celle du
     contenu, seule la limite est relevée. */
  max-height: 20rem;
  margin-top: var(--oguey-space-4);
  opacity: 1;
}

/* Sans survol possible, tout reste visible en permanence. */
/* Sans survol possible, tout est présenté d'emblée : le texte est
   déployé et le dégradé est à sa taille maximale, faute de quoi rien ne
   serait lisible sur mobile, où la surcouche de fond d'Elementor ne se
   déclenche jamais. Le zoom de la photo, lui, reste propre au survol. */
@media (hover: none) {
  .oguey-image-hover__reveal {
    max-height: 20rem;
    margin-top: var(--oguey-space-4);
    opacity: 1;
  }

  .oguey-image-hover__stack::before {
    top: -220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oguey-image-hover__reveal,
  .oguey-image-hover__stack::before,
  .oguey-image-hover img {
    transition: none;
  }

  .oguey-image-hover:hover img,
  .oguey-image-hover:focus-within img {
    transform: none;
  }
}