/*
Theme Name: Planète Grise
Theme URI: https://planetegrise.fr/
Author: Olyst
Author URI: https://olyst.fr/
Description: Thème sur mesure minimal pour Planète Grise, conçu comme socle léger pour Elementor Pro et son Theme Builder.
Version: 1.0.0
Text Domain: planete-grise
Requires at least: 6.5
Requires PHP: 8.0
*/

:root {
  --pg-turquoise: #009CA6;
  --pg-dark: #06191D;
  --pg-dark-deep: #020B0D;
  --pg-white: #FFFFFF;
  --pg-black: #000000;
  --pg-content-width: 1400px;
  --pg-gutter-desktop: 32px;
  --pg-gutter-tablet: 24px;
  --pg-gutter-mobile: 18px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--pg-white);
  color: var(--pg-black);
  font-family: Gotham, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

/* Le thème n'impose pas de largeur aux conteneurs Elementor.
   Cette classe est disponible si un bloc hors Elementor en a besoin. */
.pg-container {
  width: min(calc(100% - (2 * var(--pg-gutter-desktop))), var(--pg-content-width));
  margin-inline: auto;
}

/* Fonds sombres inspirés des maquettes validées.
   À appliquer comme classes CSS sur un conteneur Elementor. */
.pg-gradient-right {
  color: var(--pg-white);
  background:
    radial-gradient(ellipse 72% 115% at 100% 48%, rgba(0, 156, 166, 0.30) 0%, rgba(0, 156, 166, 0.13) 32%, rgba(0, 156, 166, 0) 70%),
    linear-gradient(115deg, var(--pg-dark-deep) 0%, var(--pg-dark) 65%, #08272C 100%);
}

.pg-gradient-left {
  color: var(--pg-white);
  background:
    radial-gradient(ellipse 72% 115% at 0% 48%, rgba(0, 156, 166, 0.30) 0%, rgba(0, 156, 166, 0.13) 32%, rgba(0, 156, 166, 0) 70%),
    linear-gradient(245deg, var(--pg-dark-deep) 0%, var(--pg-dark) 65%, #08272C 100%);
}

.pg-bg-dark {
  color: var(--pg-white);
  background: var(--pg-dark);
}

.pg-text-turquoise {
  color: var(--pg-turquoise) !important;
}

/* Fallbacks uniquement : ils n'apparaissent plus dès qu'un template
   Header/Footer Elementor est publié avec une condition d'affichage. */
.pg-fallback-header,
.pg-fallback-footer {
  background: var(--pg-dark-deep);
  color: var(--pg-white);
}

.pg-fallback-header__inner,
.pg-fallback-footer__inner {
  width: min(calc(100% - (2 * var(--pg-gutter-desktop))), var(--pg-content-width));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}

.pg-fallback-header .custom-logo {
  display: block;
  width: auto;
  max-height: 54px;
}

.pg-fallback-header ul,
.pg-fallback-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pg-fallback-main {
  min-height: 50vh;
}

.pg-fallback-content {
  width: min(calc(100% - (2 * var(--pg-gutter-desktop))), var(--pg-content-width));
  margin-inline: auto;
  padding-block: 64px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .pg-container,
  .pg-fallback-header__inner,
  .pg-fallback-footer__inner,
  .pg-fallback-content {
    width: calc(100% - (2 * var(--pg-gutter-tablet)));
  }
}

@media (max-width: 767px) {
  .pg-container,
  .pg-fallback-header__inner,
  .pg-fallback-footer__inner,
  .pg-fallback-content {
    width: calc(100% - (2 * var(--pg-gutter-mobile)));
  }

  .pg-fallback-header__inner,
  .pg-fallback-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}