/*
 * Page relais Instagram (/instagram/) — modèle page-relais.php.
 * Chargée uniquement sur ce modèle (voir functions.php). Tout est préfixé .tcm-ig.
 * Reprend les codes du site : Raleway, marine #001B57, cartes blanches ombrées,
 * dégradé des boutons .btn-disney, titre blanc sur la photo d'en-tête.
 *
 * Les quelques !important répondent à des règles !important de style.css :
 *   p, .container p { font-size: 1.1rem !important; line-height: 1.9rem !important }
 *   a:hover { color: #29abe2 !important }
 */

.tcm-ig {
  --ig-font-titre: 'Raleway', sans-serif;

  --ig-marine: #001b57;
  --ig-violet: #250367;
  --ig-texte: #212529;
  --ig-texte-2: #5a6178;
  --ig-bordure: #e3e6f0;
  /* Dégradé de .btn-disney, rose final assombri pour garder le texte blanc lisible (AA) */
  --ig-degrade: linear-gradient(151deg, #020024 0%, #09043d 4%, #c81d96 100%);
  --ig-ombre: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Au-dessus de la photo d'en-tête du thème (.page-header, en position absolue) */
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  padding: 18px 16px 48px;
  color: var(--ig-texte);
  text-align: left;
}

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

/* Filet de sécurité si un filtre de mise en forme repassait sur le contenu */
.tcm-ig br,
.tcm-ig p:empty {
  display: none;
}

.tcm-ig p {
  margin: 0;
}

.tcm-ig img.emoji {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.05em;
  vertical-align: -0.1em;
  border: 0;
  box-shadow: none;
}

.tcm-ig a:focus-visible {
  outline: 3px solid #29abe2;
  outline-offset: 2px;
}

/* Accueil : texte blanc sur la photo d'en-tête, comme le titre de l'accueil du site */

.tcm-ig-accroche {
  margin-bottom: 18px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 20, 0.6);
}

.tcm-ig h1.tcm-ig-h1 {
  margin: 0 0 8px;
  font-family: var(--ig-font-titre);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  color: #fff;
}

.tcm-ig .tcm-ig-intro {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #fff;
}

/* Carte blanche qui chevauche la photo */

.tcm-ig-bloc {
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--ig-ombre);
}

.tcm-ig-outils {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcm-ig-outils > li {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.tcm-ig-outil {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 9px 12px 9px 14px;
  background: #fff;
  border: 1px solid var(--ig-bordure);
  border-radius: 12px;
  color: var(--ig-marine);
  text-decoration: none;
}

.tcm-ig a.tcm-ig-outil:hover {
  border-color: var(--ig-marine);
  color: var(--ig-marine) !important;
}

.tcm-ig-outil-icone {
  flex: none;
  width: 1.75rem;
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
}

.tcm-ig-outil-textes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tcm-ig-outil-libelle {
  font-family: var(--ig-font-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.tcm-ig-outil-sous-titre {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ig-texte-2);
}

.tcm-ig-outil-fleche {
  flex: none;
  margin-left: auto;
  font-size: 1rem;
  line-height: 1;
}

/* Action principale : le bouton du site, en grand */
.tcm-ig-outil--principal {
  min-height: 76px;
  padding: 12px 16px 12px 18px;
  background: var(--ig-degrade) border-box;
  border-color: #fff;
  border-radius: 25px;
  color: #fff;
}

.tcm-ig a.tcm-ig-outil--principal:hover {
  border-color: #fff;
  color: #fff !important;
  filter: brightness(1.1);
}

.tcm-ig-outil--principal .tcm-ig-outil-libelle {
  font-size: 1.25rem;
}

.tcm-ig-outil--principal .tcm-ig-outil-sous-titre {
  color: #fff;
}

/* Titre de section : le H2 du site, en plus petit */

.tcm-ig h2.tcm-ig-titre {
  margin: 28px 0 12px;
  font-family: var(--ig-font-titre);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ig-violet);
}

/*
 * Cartes de carrousels (contenu Gutenberg) : un bloc natif « Média et texte »
 * par carte, contenant dans l'ordre un paragraphe (date), un titre H3, un
 * paragraphe (accroche) et un bouton. Aucune classe à saisir dans l'éditeur.
 * Les !important sur la grille neutralisent les réglages du bloc (largeur du
 * média en style en ligne, empilement sur mobile en !important côté WordPress).
 */

.tcm-ig-cartes {
  display: grid;
  gap: 14px;
}

.tcm-ig-cartes > .wp-block-media-text {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  grid-template-rows: auto;
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--ig-ombre);
}

.tcm-ig-cartes > .wp-block-media-text > .wp-block-media-text__media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start;
  margin: 0;
}

.tcm-ig-cartes .wp-block-media-text__media img {
  display: block;
  width: 118px;
  max-width: none;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--ig-bordure);
}

.tcm-ig-cartes > .wp-block-media-text > .wp-block-media-text__content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 148px;
  padding: 0;
}

/* Premier paragraphe : la date */
.tcm-ig-cartes .wp-block-media-text__content > p:first-child {
  margin-bottom: 2px;
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
  color: var(--ig-texte-2);
}

.tcm-ig .tcm-ig-cartes .wp-block-media-text__content > h3 {
  margin: 0 0 4px;
  font-family: var(--ig-font-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--ig-marine);
}

/* Paragraphes suivants : l'accroche */
.tcm-ig-cartes .wp-block-media-text__content > p:not(:first-child) {
  margin-bottom: 8px;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  color: var(--ig-texte);
}

.tcm-ig-cartes .wp-block-media-text__content > .wp-block-buttons {
  display: block;
  margin: auto 0 0;
}

.tcm-ig-cartes .wp-block-button {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.tcm-ig .tcm-ig-cartes .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 34px;
  padding: 6px 18px;
  background: var(--ig-degrade);
  border: 1px solid #fff;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
}

.tcm-ig .tcm-ig-cartes .wp-block-button .wp-block-button__link:hover {
  color: #fff !important;
  filter: brightness(1.1);
}

/* Toute la carte est cliquable : la zone tactile dépasse largement 44 px */
.tcm-ig-cartes .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.tcm-ig-cartes .wp-block-button__link:focus-visible {
  outline: none;
}

.tcm-ig-cartes .wp-block-button__link:focus-visible::after {
  outline: 3px solid #29abe2;
  outline-offset: 2px;
}

/* Pied de bloc */

.tcm-ig-pied {
  margin-top: 28px;
  text-align: center;
}

.tcm-ig-accueil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 28px;
  background: #fff;
  border: 2px solid var(--ig-marine);
  border-radius: 25px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ig-marine);
  text-decoration: none;
}

.tcm-ig a.tcm-ig-accueil:hover {
  background: var(--ig-marine);
  color: #fff !important;
}

.tcm-ig .tcm-ig-mention {
  margin-top: 16px;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  color: var(--ig-texte-2);
}

@media (min-width: 632px) {
  .tcm-ig {
    padding: 36px 16px 56px;
  }

  .tcm-ig-accroche {
    margin-bottom: 26px;
  }

  .tcm-ig h1.tcm-ig-h1 {
    font-size: 2rem;
  }

  .tcm-ig .tcm-ig-intro {
    font-size: 1.1rem !important;
  }

  .tcm-ig-bloc {
    padding: 16px;
  }
}