/* ===== Olivero Custom — Réorganisé, optimisé -Pascal ===== */

/***** HEADER SIMPLIFIÉ & STABLE *****/

/* Variables header (fusionne avec tes autres :root si besoin) */
:root {
  --content-max: 1600px;
  --gap: clamp(16px, 3vw, 32px);
  --header-bg: #616E49;   /* vert olive */
  --oc-header-h: 90px !important;   /* hauteur approximative du header fixe */
  --olive: #616E49; 
}

/* Décale le contenu sous le header fixe */
body {
  padding-top: var(--oc-header-h);
}

/* 0) Barre d’admin au-dessus du header */
#toolbar-bar,
.toolbar-oriented .toolbar-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11000;
}
.site-header { z-index: 1000; }
body.toolbar-fixed .site-header { top: 39px; }
body.toolbar-fixed.toolbar-tray-open.toolbar-horizontal .site-header { top: 60px; }

/* 1) HEADER — bandeau vert plein écran, fixe */
header.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  margin: 0;
  background: rgba(97, 110, 73, 0.82); /* vert olive translucide */
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin: 0 !important;
  padding: 0 !important;
}



/* calque vert plein header */
header.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* contenu transparent */
header.site-header > .layout-container,
header.site-header * {
  background: transparent;
  margin-top: .1rem;
}


.site-header a{color:#fff;text-decoration:none;font-weight:600;/*! font-size: 2.7rem; */}


/* 2) Contenu interne : fluide, max 1600px, centré */
header.site-header > .layout-container,
header.site-header .site-header__inner,
header.site-header .site-header__inner__container,
header.site-header .container {
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
}

/* 3) Logo & branding */
/* Logo collé à gauche (sans impacter le reste) */
.region-header,
.site-branding { 
  text-align: left !important;
}

.site-branding__logo {
  margin-inline-start: -20px!important;
  margin-inline-end: auto !important; /* pousse vers la gauche */
}

/* Logo responsive */
.block-system-branding-block img {
  max-height: clamp(90px, 25vw,240px);
  height: auto;
  display: block;
}


.region-header,
.site-branding {
  text-align: left;
}


.site-header .site-branding__name,
.site-header .site-branding__name a {
  font-size: clamp(1rem, 2.6vw + 0.2rem, 3rem);
}

.site-branding__name {
  white-space: normal;
  text-wrap: balance;
  max-width: min(32ch, 70vw);
}

/* 4) Champ de recherche dans le header */

.site-header .form-item--keys input[type="search"],
.region-header .form-item--keys input[type="search"],
.site-header input#edit-keys[type="search"] {
  background: #c8d1c7!important;            /* fond grisé */
  border: 1px solid #7a7a7a;   /* cadre gris */
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  min-width: 220px;            /* ajuste si besoin */
  line-height: 1.2;
  align-items: center;
  font-size: 1rem;
  text-align: center;
  margin-top: 1rem;
  /*! align-items: center !important; */
  display: grid;
  display: flex;
}


header.site-header .form-item--keys input[type="search"]::placeholder {
  color: #fff;
}

header.site-header .form-item--keys input[type="search"]:focus {
  outline: 2px solid #bfbfbf;
  outline-offset: 2px;
  border-color: #bfbfbf;
  box-shadow: none;
}

/* 5) Menu principal (desktop) — capsule blanche */
header.site-header .region-primary-menu,
header.site-header nav[role="navigation"] {
  /*! background: #fff !important; */
  border-radius: 8px;
  padding: 0.4rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

header.site-header .region-primary-menu a,
header.site-header nav[role="navigation"] a {
  color: #000;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

header.site-header .region-primary-menu a:hover,
header.site-header .region-primary-menu a:focus,
header.site-header nav[role="navigation"] a:hover,
header.site-header nav[role="navigation"] a:focus {
  color: #1a1a1a;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
}

header.site-header .region-primary-menu a.is-active {
  color: #000;
  text-decoration: underline;
}



/* 6) MENU MOBILE OLIVERO — on ne change QUE les couleurs */

/* Ne JAMAIS changer display/position ici, juste l’apparence */
#header-nav {
  background: rgba(255,255,255,0.92) !important;
  color: #000;
}

#header-nav a,
#header-nav .primary-nav__menu-link,
#header-nav .menu-item,
#header-nav .search-block-form,
#header-nav .search-block-form * {
  color: #000;
  font-size: 1.3rem;
}

#header-nav a:hover,
#header-nav a:focus,
#header-nav .primary-nav__menu-link:hover,
#header-nav .primary-nav__menu-link:focus {
  color: #000;
}


/* Sous-menu niveau 2 un peu plus petit */
.primary-nav__menu--level-2 {
  font-size: 1rem;
}


/**********************************Header plus compact en mobile paysage *****************/
@media (max-width: 1200px) and (orientation: landscape) {

  /* On diminue la hauteur de référence du header */
  :root {
    --oc-header-h: 60px!important;;   /* à ajuster si besoin (60–70px) */
  }

  /* On réduit un peu le logo */
  .block-system-branding-block img {
    max-height: 80px;
  }

  /* On réduit le padding vertical à l’intérieur du header */
  header.site-header > .layout-container,
  header.site-header .site-header__inner {
    padding-block: 0.25rem;
  }
}


/*****************************************************************************************/
/*****************************************************************************************/
/*****************************************************************************************/

/***** FOOTER SIMPLE : BANDEAU PLEIN ÉCRAN + CONTENU CENTRÉ *****/


/* Bandeau de footer qui couvre toute la fenêtre */
footer.site-footer {
  background: #2f2e2e;
  color: #c8c6c6;
  width: 100vw !important;
  margin: 0;
  padding: 0;
  margin-left: calc(50% - 50vw);



}

/* Le layout-container du footer prend TOUTE la largeur
   (on neutralise ici le max-width global éventuel) */
footer.site-footer > .layout-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: 0 !important;
}

/* Contenu interne du footer : limité à 1439px et centré */
.site-footer .site-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
}

/* Régions top / bottom sur toute la largeur, contenu centré */
.site-footer .region--footer-top,
.site-footer .region--footer-bottom {
  width: 100%;
  text-align: center;
  margin-left: -15% !important;
}

/* Blocs du footer */
.site-footer .block {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* 5) FOOTER — fluide, compact (sans toucher au Twig) */
.site-footer .layout--pass--content-medium{width:100%!important;max-width:none!important;}
.site-footer p,.site-footer ul,.site-footer li,.site-footer .block{margin-block:.25rem!important;}
.site-footer p:last-child,.site-footer ul:last-child{margin-bottom:0!important;}

/* Menus du footer centrés sur une ligne (wrap si besoin) */
.site-footer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
}

.site-footer .menu > li > a {
  text-decoration: none;
  display: inline-block;
  padding: .25rem .5rem;
}

/* Texte */
.site-footer h2,
.site-footer p {
  margin-block: .25rem;
  text-align: center;
}


.site-footer .block__title {
  color: var(--color--gray-65);
  font-size: 1.25rem;
}


/*****************************************MAIN-PAGES************************************************************/
.layout-main {
  margin: 0 auto;
  place-items: center;
}

/************************************Logo en Background*******************************/
/* Le corps de page sert de support au filigrane */ /*
body {
  position: relative; /* crée un contexte, safe */ /*
} 

/* Logo en filigrane, FIXE dans la fenêtre */ 
body::before {
  content: "";
  position: fixed;               /* <= clé : reste fixe au scroll */
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);  /* centré dans la fenêtre */
  width: min(70vw, 1900px);       /* taille fluide */
  height: min(70vw, 1900px);
  background-image: url("/sites/educationcanine.pascalflork.fr/files/education-canine-en-margeride.fr_emailLogo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.04;                 /* ajuste la transparence ici */ 
  pointer-events: none;          /* ne bloque aucun clic */
  /* pas de z-index nécessaire : le contenu est dessiné après et passe devant */
}

/* ===== FIX : recentrage global du contenu (Olivero) ===== */

.page-wrapper,
.page,
.page-content {
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--gap) !important;
}


.layout-container {
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--gap) !important;
}

/* 1) Structure de page : tout 100 % de largeur */
html, body,
body > .dialog-off-canvas-main-canvas,
.dialog-off-canvas-main-canvas,
.page {
  width: 100%;
  background: #fff;         /* fond général blanc */
}

body {
  hyphens: none;
}

/* 2) Tous les conteneurs d’Olivero deviennent fluides */


/* 3) Les blocs et sections internes ont une marge fluide pour la lisibilité */
main[role="main"] > *,
.region-content > *,
.layout-builder__section > * {
  display: flex;
}


/* cache complètement la région */
.region--social-bar,
.social-bar {
  display: none !important;
}

/* ===== Nuke largeur — tout le site fluide (hors header déjà OK) ===== */

/* 1) Conteneurs fréquents (Olivero, Layout Builder, Views…) -> 100% */
.grid-full,
.layout-builder__section,
.layout-builder__region {
  justify-content: stretch;
  align-content: stretch;
  grid-template-columns: 3fr;
}

.layout--pass--content-medium > * {
  margin-top: -7%;
}

/* Coordonnées : bloc flottant à droite dans le contenu de l’article */
.bloc-coordonnees-flottant {
  float: right;
  width: 320px;                 /* largeur de la “colonne” coordonnées */
  margin-left: 2rem;            /* espace entre texte et bloc */
  margin-bottom: 1.5rem;        /* espace sous le bloc */
  box-sizing: border-box;
}

/* Pour que le texte “reprenne la pleine largeur” après le bloc */
.bloc-coordonnees-flottant + * {
  clear: both;
}

/* Responsive : sur mobile, on annule le float */
@media (max-width: 900px) {
  .bloc-coordonnees-flottant {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}

/**************Centrer les images****************/

.node img,
.view img {
  display: block;
  margin-inline: auto;
  /*margin-left: 2%;
  margin-right: 2%;*/
}

#block-olivero-custom-content,
.node__content {
  margin-top: 3%;
}

/*.node img {
  margin-left: 2%;
  margin-right: 2%;
}*/

.field--type-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*****************************************VIEWS***************************************************************/
/* 4) VIEW Services — 1/2/3 colonnes robustes */

/* neutralise les wrappers Views */
.view-services .views-row,.view-services .views-col,.view-services .views-view-grid{display:contents;}
/* cartes sobres */
.service-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:column;}
.service-card__media img{width:100%;height:360px;object-fit:cover;display:block;}
.service-card__content{padding:.8rem;}
.service-card__title{margin:0 0 .25rem 0;font-size:1.5rem;color:#2b2b2b;}
.service-card__excerpt{font-size:.95rem;line-height:1.4;margin-bottom:1.2rem;}

/* Bouton "Découvrir" parfaitement centré */
.service-card__cta {
  display: flex;
  justify-content: center;

}
.service-card__cta a{background:var(--olive);color:#fff;border:1px solid #566241;border-radius:10px;padding:.55rem 1.2rem;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.08);display:inline-flex;justify-content:center;}
.service-card__cta a:hover{filter:brightness(.75); }

/* 2) Centrer la GRILLE d’items */
.view-services .view-content {
  display: grid;
  /* 3 colonnes qui se replient ; ajuste le min selon la largeur de tes cards */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem 1.5rem;
}

/* Si tes cartes ont une largeur fixe, centre chaque carte dans sa cellule */
.view-services .view-content > * {
  justify-self: center;      /* ou "stretch" si tu veux qu'elles prennent 1fr */
  max-width: 420px;          /* optionnel : largeur max d’une card */
}

/* Petits écrans : 1–2 colonnes */
@media (max-width: 980px){
  .view-services .view-content {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Les wrappers en CSS Grid qui “centrent” via la grille -> on étire */
.grid-full,
.layout-builder__section,
.layout-builder__region {
  justify-content: stretch !important;
  align-content: stretch !important;
 grid-template-columns: 3fr !important; /* évite une colonne centrale contrainte */
}
/* 1) Titres de contenus dans toutes les Views : noir, sans soulignement */
.view .node__title a,
.view .node__title a:visited,
.view h2 a,
.view h3 a {
  color: #000000 !important;
  text-decoration: none !important;
}

/* 2) Au survol / focus : rouge, toujours sans soulignement */
.view .node__title a:hover,
.view .node__title a:focus,
.view h2 a:hover,
.view h2 a:focus,
.view h3 a:hover,
.view h3 a:focus {
  color: #616E49  !important;   /* ton rouge */
  text-decoration: none !important;
}


/************** UNIFORMISATION DES CARTES DE LA VIEW SERVICES **************/

/* La carte devient une grille fixée en hauteur */
.service-card {
  display: grid;
  grid-template-rows: 360px 1fr auto;   /* image | contenu | bouton */
  height: 100%;                         /* prend 100% de la hauteur disponible */
  min-height: 580px;                    /* uniformise la hauteur (à ajuster) */
}

/* Image : toujours même hauteur */
.service-card__media img {
  height: 360px !important;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Contenu : s’étire pour remplir l’espace */
.service-card__content {
  padding: .8rem;
  display: flex;
  flex-direction: column;
}

/* Texte fluide */
/*.service-card__title {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
}*/
.service-card__excerpt {
  flex-grow: 1;                       /* pousse pour occuper le vide */
  margin-bottom: 1rem;
}

.main-content__container {
  padding-inline: 0;
}

.view-chiens {
  margin-left: 4%;
}

.view-chiens .field--name-field-image .field__item:not(:first-child) {
  display: none;
}

/*********************************************COLORBOX********************************************************/

#colorbox,
#cboxWrapper,
#cboxContent {
  background: transparent;     /* enlève le fond */
  border: none;                /* enlève la bordure */
  box-shadow: none;            /* enlève les ombres éventuelles */
}

#cboxTitle {
  font-size: 1.2rem;
  font-weight: bolder;
}

/****************************************************CHECK***************************************************/

/* 6) Sécurité */
img,video,figure{max-width:100%;height:auto;}
/* 5) Sécurité : pas de scroll horizontal en full-bleed */
html, body { overflow-x: hidden; }


/* Décale le tout premier bloc "Mise en évidence" sous le header */
.region--hero{
  margin-top: var(--oc-header-h) !important;
}

/***************************************************OPTIONS**************************************************/

/* 4) Si tu veux qu’un bloc spécifique s’étale vraiment bord à bord */
.full-bleed {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* 5) Bloc Hero / bandeaux bord à bord (optionnel : classe full-bleed) */
.full-bleed {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-inline: clamp(16px, 3vw, 32px);
}


/**************************************************REGIONS****************************************************/

.region--breadcrumb {
  grid-template-columns: none !important;
}


.block__title {
  margin-block: none;
  font-size: 2rem;
  padding-top: 3rem;
}


/******Bloc message Top*******/
.pf-dev-message {
  /*background: #fffbeb;
  border: 1px solid #facc15;
  color: #92400e;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: center;
  padding: 10px 15px;
  margin: 10px auto 20px;
  border-radius: 8px;*/
  max-width: 1600px !important;
  /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
}


/***************************************PROTECTION DES IMAGES*************************************************/

 img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/****************************************SPECIFIQUE AU CONTENU*************************************************/

/* Page "Les chiens de ma vie" : ne montrer que la 1ère image du champ */
.node--type-les-chiens-de-ma-vie .field--name-field-image .field__item:not(:first-child) {
  display: none;
}

/* Limite la largeur du Splide dans les pages de chien */
.node--type-les-chiens-de-ma-vie .splide {
  max-width: 720px;      /* largeur max du slider */
  margin-inline: auto;   /* centre dans la colonne */
}

/*****************************************************************************************/
/*****************************************************************************************/