/*=====================================================
*
*  STYLE.CSS — KIT UI + TYPO RESPONSIVE (FLUIDE)
*
*  - Typo en clamp() (mobile -> desktop)
*  - Conservation des classes .gmr-titre-style-*
*  - Conservation de tes effets et couleurs
*
=====================================================*/

/*========================
*
* VARIABLES
*
*========================*/
:root {
  /*========================================
    FLUID TYPE SETTINGS
    Ajuste ces bornes selon ton site :
    - vw-min : largeur “mobile design”
    - vw-max : largeur “desktop design”
  ========================================*/
  --vw-min: 360;
  --vw-max: 1280;

  /* Progression linéaire 0 -> 1 entre vw-min et vw-max */
  --fluid: calc((100vw - (var(--vw-min) * 1px)) / (var(--vw-max) - var(--vw-min)));
}


/*========================
*
* GLOBAL
*
*========================*/
body {
  font-family: var(--figtree);
  font-weight: var(--regular);
  font-style: normal;
  color: var(--vert-fonce);
  width: 100vw;
  background-color: var(--gris-clair) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--vert-fonce);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--vert-fonce);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--turquoise-fonce);
}


/*========================
*
* TYPO — TITRES (FLUIDE)
* (Remplace tes tailles fixes + media query)
*
*========================*/

/*
  Mapping (tes valeurs actuelles) :
  - Style 1 : 64px -> 28px
  - Style 2 : 52px -> 28px
  - Style 3 : 40px -> 28px
  - Style 4 : 28px -> 22px
  - Style 5 : 22px -> 18px
  - Oversize : 32px -> 18px
*/

.gmr-titre-style-1,
.gmr-titre-style-1 > * {
  font-size: clamp(28px, calc(28px + (64 - 28) * var(--fluid)), 64px);
  line-height: 1.1;
  font-weight: var(--bold) !important;
  text-wrap: balance;
}

.gmr-titre-style-2,
.gmr-titre-style-2 > * {
  font-size: clamp(28px, calc(28px + (52 - 28) * var(--fluid)), 52px);
  line-height: 1.2;
  font-weight: var(--semi-bold) !important;
  text-wrap: balance;
}

.gmr-titre-style-3,
.gmr-titre-style-3 > * {
  font-size: clamp(24px, calc(24px + (40 - 24) * var(--fluid)), 40px);
  line-height: 1.15;
  font-weight: var(--bold) !important;
  text-wrap: balance;
}

.gmr-titre-style-4,
.gmr-titre-style-4 > * { /* Dans le cas où il y a un <a> ou autre */
  font-size: clamp(22px, calc(22px + (28 - 22) * var(--fluid)), 28px);
  line-height: 1.25;
  font-weight: var(--semi-bold) !important;
}

.gmr-titre-style-5,
.gmr-titre-style-5 > * {
  font-size: clamp(18px, calc(18px + (22 - 18) * var(--fluid)), 22px);
  line-height: 1.25;
  font-weight: var(--bold) !important;
}

/* “Body oversize” */
.gmr-body-style-oversize {
  font-size: clamp(18px, calc(18px + (32 - 18) * var(--fluid)), 32px);
  line-height: 1.35;
  font-weight: var(--regular) !important;
}

/* Légende */
.gmr-texte-style-legende {
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--regular) !important;
  text-transform: uppercase;
}

/* Intertitres */
.gmr-texte-style-intertire-1,
.gmr-texte-style-intertitre-1 {
  font-size: 16px;
  font-style: italic;
  font-weight: var(--semi-bold) !important;
}

.gmr-texte-style-intertitre-2 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--semi-bold) !important;
}

.gmr-texte-style-intertitre-3 {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--medium) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}


/*========================
*
* WYSIWYG / BODY
*
*========================*/
.gmr-texte-style-body-1 {
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--regular) !important;
}

/* Confort de lecture (optionnel mais recommandé) */
.fl-rich-text,
.gmr-texte-style-body-1 {
}

/* Lien dans Body 1 */
.fl-rich-text a,
.gmr-texte-style-body-1 a {
  position: relative;
  text-decoration: none;
  color: var(--turquoise-fonce);
}

.fl-rich-text a:after,
.gmr-texte-style-body-1 a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  display: block;
  right: 0;
  bottom: 0;
  background: var(--turquoise-fonce);
  transition: width .5s ease;
}

.fl-rich-text a:hover,
.gmr-texte-style-body-1 a:hover {
  color: var(--turquoise-fonce);
}

.fl-rich-text a:hover:after,
.gmr-texte-style-body-1 a:hover:after {
  background: var(--turquoise-fonce) !important;
  width: 100%;
  left: 0;
}

.gmr-texte-style-body-1 .fl-list .fl-list-item {
  padding-bottom: 16px;
}

.gmr-texte-style-body-1 .fl-list .fl-list-item .fl-list-item-heading .fl-list-item-heading-text {
  font-size: 22px;
  line-height: 24px;
  font-weight: var(--semi-bold) !important;
  padding: 6px 0;
}

.gmr-texte-style-body-1 .fl-list-item .fl-list-item-content .fl-list-item-content-text > * {
  font-size: 16px;
  font-weight: var(--regular) !important;
}

/* Body 2 */
.gmr-texte-style-body-2 {
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--semi-bold) !important;
}
.gmr-texte-style-body-2 .fl-list-item .fl-list-item-content .fl-list-item-content-icon {
	display: table-cell;
    vertical-align: baseline;
    padding: 5px 0;
}
.gmr-texte-style-body-2 .fl-list-item .fl-list-item-content .fl-list-item-content-icon .fl-list-item-icon {
  color: var(--accent-orange);
}

.gmr-texte-style-body-2 .fl-list-item .fl-list-item-content .fl-list-item-content-text {
  padding: 6px 0;
}

.gmr-texte-style-body-2 .fl-list-item .fl-list-item-content .fl-list-item-content-text > * {
  font-size: 16px;
  font-weight: var(--semi-bold) !important;
}


/*========================
*
* EFFETS DE TITRES
*
*========================*/
.gmr-titre-style-shadown {
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
}

.gmr-titre-style-shape {
  margin-left: 70px;
  position: relative;
}

.gmr-titre-style-shape::before,
.gmr-titre-style-shape-2::before{
  content: "";
  display: inline-block;
  width: 49px;
  height: 49px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--turquoise-vif);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.129 49.107'%3E%3Cpath d='M141.8 142l-19.481-19.535L151.94 92.891l19.512 19.542z' transform='translate(-122.323 -92.891)'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.129 49.107'%3E%3Cpath d='M141.8 142l-19.481-19.535L151.94 92.891l19.512 19.542z' transform='translate(-122.323 -92.891)'/%3E%3C/svg%3E") no-repeat center / contain;
}

.gmr-titre-style-shape-2 {
  margin-left: 50px;
  position: relative;
}
.gmr-titre-style-shape-2::before{
  width: 32px;
  height: 32px;
	left: -50px;
}


/*========================
*
* COULEURS (UTILITAIRES)
*
*========================*/
.gmr-color-turquoise-vif { color: var(--turquoise-vif); }
.gmr-color-turquoise-clair { color: var(--turquoise-clair); }
.gmr-color-turquoise-fonce { color: var(--turquoise-fonce); }
.gmr-color-turquoise-gris-vert { color: var(--gris-vert); }
.gmr-color-vert-fonce { color: var(--vert-fonce); }
.gmr-color-orange { color: var(--accent-orange); }

.gmr-color-blanc,
.gmr-color-blanc > * { color: var(--blanc); }

.gmr-color-noir { color: var(--noir); }
.gmr-color-gris-clair { color: var(--gris-clair); }


/*========================
*
* EFFET — MARGE DROITE/GAUCHE HORS ZONE UTILE COLOREE
*
*========================*/
.row-marge-couleur .fl-row-content-wrap .fl-row-content {
  position: relative;
}

.row-marge-couleur .fl-row-content-wrap .fl-row-content::before {
  content: "";
  position: absolute;
  top: 0;
  width: calc((100vw - 1216px) / 2);
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.row-marge-couleur--gauche .fl-row-content-wrap .fl-row-content::before {
  right: 100%;
}

.row-marge-couleur--droite .fl-row-content-wrap .fl-row-content::before {
  left: 100%;
}

.marge--turquoise-vif .fl-row-content-wrap .fl-row-content::before {
  background: var(--turquoise-vif);
}
.marge--turquoise-clair .fl-row-content-wrap .fl-row-content::before {
  background: var(--turquoise-clair);
}
.marge--turquoise-fonce .fl-row-content-wrap .fl-row-content::before {
  background: var(--turquoise-fonce);
}
.marge--gris-vert .fl-row-content-wrap .fl-row-content::before {
  background: var(--gris-vert);
}
.marge--vert-fonce .fl-row-content-wrap .fl-row-content::before {
  background: var(--vert-fonce);
}
.marge--orange .fl-row-content-wrap .fl-row-content::before {
  background: var(--accent-orange);
}
.marge--gris-clair .fl-row-content-wrap .fl-row-content::before {
  background: var(--gris-clair);
}
.marge--gris .fl-row-content-wrap .fl-row-content::before {
  background: #EAEEEE;
}
.marge--blanche .fl-row-content-wrap .fl-row-content::before {
  background: var(--blanc);
}


/*========================
*
* OPTIONNEL — Sécurité très petit écran
* (si tu veux éviter que la fluidité continue sous 360px)
*
*========================*/
@media (max-width: 360px) {
  :root { --vw-min: 360; }
}