/* ==========================================================================
   Grany Tea - styles complementaires
   --------------------------------------------------------------------------
   Ces regles completent ce qu'Elementor ne sait pas faire nativement.
   Elles ciblent toutes des CLASSES posees sur les elements depuis l'editeur,
   jamais des identifiants uniques : un nouveau logo partenaire, une nouvelle
   carte ou un nouveau temoignage ajoute dans Elementor herite automatiquement
   du bon rendu, sans qu'il faille revenir dans ce fichier.

   Classes a poser dans Elementor > Avance > Classes CSS :
     .gt-partenaires   conteneur des logos partenaires (noir et blanc + survol)
     .gt-ancre         section ciblee par un lien d'ancrage du menu
   ========================================================================== */

:root{
  --gt-navy:#202A40;
  --gt-navy-deep:#161D2B;
  --gt-blue:#405580;
  --gt-blue-light:#5A709C;
  --gt-gold:#CEA95D;
  --gt-gold-deep:#A8823C;
  --gt-cream:#F7F2EB;
  --gt-cream-2:#FBF8F3;
  --gt-sand:#E6D9C4;
  --gt-ink:#1E2535;
  --gt-muted:#5C6678;
  --gt-line:#E4DACB;
  --gt-header-h:120px;
}

/* --------------------------------------------------------------------------
   1. Ancres du menu
   Le menu est fixe en haut : sans decalage, une ancre amene la section sous
   l'en-tete. La regle s'applique d'office a tout conteneur de premier niveau
   portant un identifiant CSS, donc une nouvelle section ancree fonctionne
   sans reglage particulier.
   -------------------------------------------------------------------------- */
.elementor > .e-con[id],
.elementor > .elementor-section[id],
.gt-ancre{
  scroll-margin-top:calc(var(--gt-header-h) + 8px);
}

@media (max-width:1120px){
  :root{ --gt-header-h:104px; }
}

/* --------------------------------------------------------------------------
   2. Logos partenaires
   Poser .gt-partenaires sur le CONTENEUR, pas sur chaque image : tous les
   logos qu'il contient, y compris ceux ajoutes plus tard, suivent la regle.
   La hauteur fixe evite qu'un logo large ecrase les autres.
   -------------------------------------------------------------------------- */
.gt-partenaires img{
  height:62px;
  max-width:165px;
  width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.gt-partenaires img:hover{
  filter:grayscale(0);
  opacity:1;
}
@media (max-width:620px){
  .gt-partenaires img{ height:50px; }
}

/* --------------------------------------------------------------------------
   3. Defilement
   -------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Logos partenaires - largeur du widget
   Dans un conteneur en ligne, Elementor donne 100% de large a chaque widget.
   On les laisse se dimensionner sur leur contenu pour que la rangee de logos
   se compose d'elle-meme, y compris quand on en ajoute un nouveau.
   -------------------------------------------------------------------------- */
.gt-partenaires .elementor-widget-image{
  width:auto;
  flex:0 0 auto;
}
.gt-partenaires .elementor-widget-image img{
  height:62px;
  max-width:165px;
  width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.gt-partenaires .elementor-widget-image img:hover{
  filter:grayscale(0);
  opacity:1;
}
@media (max-width:620px){
  .gt-partenaires .elementor-widget-image img{ height:48px; }
}

/* --------------------------------------------------------------------------
   5. Coordonnees
   Les numeros et adresses restent lisibles et cliquables, sans la couleur de
   lien globale qui jurerait dans une carte.
   -------------------------------------------------------------------------- */
.gt-coord a{
  color:#202A40;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid #E4DACB;
}
.gt-coord a:hover{ color:#A8823C; border-bottom-color:#A8823C; }

/* --------------------------------------------------------------------------
   6. Cartes
   Les cartes d'une meme rangee s'alignent sur la plus haute.
   -------------------------------------------------------------------------- */
.gt-cards > .e-con{ align-self:stretch; }
.gt-temoin p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   7. Images
   Les photos remplissent leur colonne sans deformation.
   -------------------------------------------------------------------------- */
.gt-img img{ width:100%; height:auto; display:block; }

/* Rangee de partenaires : 4 par ligne a partir de la tablette, 2 sur mobile.
   Un logo ajoute plus tard se place tout seul dans la grille. */
@media (min-width:760px){
  .gt-partenaires .elementor-widget-image{
    width:calc(25% - 29px);
    display:flex;
    justify-content:center;
  }
}
@media (max-width:759px){
  .gt-partenaires .elementor-widget-image{
    width:calc(50% - 19px);
    display:flex;
    justify-content:center;
  }
}

/* --------------------------------------------------------------------------
   8. Logo de l'en-tete
   Le lien qui entoure le logo est un element flex : il se comprime, et le
   max-width:100% du theme plafonne alors l'image sous la taille demandee.
   On l'empeche de retrecir pour que la largeur reglee dans Elementor
   (widget Site Logo > Style > Largeur) soit reellement appliquee.
   -------------------------------------------------------------------------- */
.gt-logo,
.gt-logo .xpro-site-logo,
.gt-logo .xpro-site-logo a{
  flex:0 0 auto;
}
.gt-logo img{
  max-width:none;
  height:auto;
}

/* Le logo du pied de page est lui aussi un element flex : meme deblocage
   que pour celui de l'en-tete, sans quoi la largeur reglee dans Elementor
   n'est pas respectee. */
.gt-foot-logo,
.gt-foot-logo .elementor-widget-container,
.gt-foot-logo a{
  flex:0 0 auto;
}
.gt-foot-logo img{
  max-width:none;
  height:auto;
}

/* --------------------------------------------------------------------------
   9. Galeries de photos
   Les photos fournies melangent portraits et paysages. Sans cadrage commun,
   les vignettes d'une meme rangee finissent en dents de scie. On les ramene
   au carre, avec un cadrage decale vers le haut pour ne pas couper les
   visages. Une photo ajoutee plus tard dans la galerie suit la meme regle.
   -------------------------------------------------------------------------- */
.gt-galerie .elementor-widget-image img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center 30%;
  display:block;
}
@media (max-width:767px){
  .gt-galerie .elementor-widget-image img{ aspect-ratio:4 / 3; }
}

/* --------------------------------------------------------------------------
   10. Menu mobile : couleur des deux icones
   Hello Elementor colore TOUT bouton en #CC3366 au survol et au focus
   (reset.css), ce qui faisait apparaitre un rose vif sur l'icone du menu
   et sur sa croix de fermeture. XPro n'expose aucun reglage pour l'etat de
   survol : ces quelques regles ne servent qu'a remplacer ce rose.

   Le reste du panneau (fond, liens, separateurs) garde volontairement
   l'apparence native de XPro, reglable dans Elementor :
   widget Menu horizontal > Style > Responsive et > Close.
   -------------------------------------------------------------------------- */
button.xpro-elementor-horizontal-menu-toggler{
  color:var(--gt-navy);
  background-color:transparent;
  border-radius:8px;
  transition:background-color .2s ease, color .2s ease;
}
/* Selecteurs volontairement longs : Elementor genere pour ce widget des
   regles a 4 classes, qu'il faut depasser pour que le survol s'applique. */
.elementor .gt-nav button.xpro-elementor-horizontal-menu-toggler:hover,
.elementor .gt-nav button.xpro-elementor-horizontal-menu-toggler:focus,
.elementor .gt-nav button.xpro-elementor-horizontal-menu-toggler:focus-visible{
  background-color:var(--gt-sand);
  color:var(--gt-navy);
}
button.xpro-elementor-horizontal-menu-close{
  transition:background-color .2s ease, color .2s ease;
}
.elementor .gt-nav .xpro-elementor-horizontal-navbar-wrapper button.xpro-elementor-horizontal-menu-close:hover,
.elementor .gt-nav .xpro-elementor-horizontal-navbar-wrapper button.xpro-elementor-horizontal-menu-close:focus,
.elementor .gt-nav .xpro-elementor-horizontal-navbar-wrapper button.xpro-elementor-horizontal-menu-close:focus-visible{
  background-color:var(--gt-sand);
  color:var(--gt-navy);
}
/* Aucun autre bouton du site ne doit virer au rose. Les deux boutons du
   menu mobile sont exclus : ils ont leur propre survol juste au-dessus. */
.gt-header button:not([class*=xpro-elementor-horizontal-menu]):hover,
.gt-header button:not([class*=xpro-elementor-horizontal-menu]):focus,
.gt-footer button:hover,
.gt-footer button:focus,
.elementor button:not([class*=elementor-button]):not([class*=xpro-elementor-horizontal-menu]):hover,
.elementor button:not([class*=elementor-button]):not([class*=xpro-elementor-horizontal-menu]):focus{
  background-color:transparent;
}