/* Courrier d'Erevan — composants éditoriaux */

/* --- Une -------------------------------------------------------------
   La photo passe en fond plein cadre, le titre et le chapeau se posent
   dessus dans un degrade sombre. L'ordre du DOM (titre, media, pied) est
   conserve : le media est sorti du flux, l'ordre flex remet le titre
   au-dessus du chapeau, le tout cale en bas de la boite. */
.lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  height: 100%;
  padding: 38px;
  overflow: hidden;
  background: var(--cde-navy);
  color: var(--cde-white);
}

.lead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: hidden;
}

.lead__media a,
.lead__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lead__media img {
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.lead:hover .lead__media img {
  transform: scale(1.03);
}

.lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
      rgba(6, 12, 24, .94) 8%,
      rgba(6, 12, 24, .72) 38%,
      rgba(6, 12, 24, .15) 72%,
      rgba(6, 12, 24, .05) 100%);
}

.lead__title {
  position: relative;
  z-index: 2;
  order: 1;
  max-width: 16ch;
  font-family: var(--cde-serif);
  font-size: var(--cde-fs-hero);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.005em;
  color: var(--cde-white);
}

.lead__title a {
  color: var(--cde-white);
  transition: color .15s ease;
}

.lead__title a:hover {
  color: rgba(255, 255, 255, .8);
}

/* Etiquette de rubrique : le bloc de vue ne sort pas le terme, on pose le
   libelle de la place editoriale. */
.lead__title::before {
  content: "A la une";
  display: block;
  width: max-content;
  margin-bottom: 20px;
  padding: 8px 13px;
  background: var(--cde-red);
  color: var(--cde-white);
  font: 700 10px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lead__foot {
  position: relative;
  z-index: 2;
  order: 2;
  display: block;
}

.lead__standfirst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: var(--cde-fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

.lead__foot::after {
  content: "Lire l'article  \2192";
  display: inline-flex;
  margin-top: 26px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  font: 700 10px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-white);
}

.lead__byline {
  position: relative;
  z-index: 2;
  order: 3;
  margin-top: 14px;
  color: rgba(255, 255, 255, .7);
}

/* Etiquette de rubrique reelle (champ field_content_type dans la vue) :
   elle remplace l'etiquette decorative posee par .lead__title::before. */
.lead__tag {
  position: relative;
  z-index: 2;
  order: 0;
  width: max-content;
  margin-bottom: 20px;
  padding: 8px 13px;
  background: var(--cde-red);
  color: var(--cde-white);
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lead:has(.lead__tag) .lead__title::before {
  content: none;
}

/* Bouton reel (champ « Lien vers le contenu ») : il remplace le bouton
   decoratif de .lead__foot::after et devient cliquable. */
.lead__more {
  position: relative;
  z-index: 2;
  order: 4;
  margin-top: 26px;
}

.lead__more a {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-white);
  transition: background .15s ease, border-color .15s ease;
}

.lead__more a::after {
  content: "  92";
}

.lead__more a:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--cde-white);
  color: var(--cde-white);
}

.lead:has(.lead__more) .lead__foot::after {
  content: none;
}

/* Liste de breves avec heure : la colonne d'heure ne se cree que si le
   champ existe (voir views-view-fields--dernieres-publications). */
.brief--row:has(.brief__time) {
  grid-template-columns: 48px 1fr;
}

.brief--row:has(.brief__time) .brief__time {
  grid-column: 1;
  grid-row: 1;
}

.brief--row:has(.brief__time) .brief__title {
  grid-column: 2;
  grid-row: 1;
}

/* --- Carte article --------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--cde-line-strong);
  padding-top: 14px;
  transition: border-color .15s ease;
}

.card:hover {
  border-top-color: var(--cde-red);
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cde-panel);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.card:hover .card__media img {
  transform: scale(1.045);
}

.card__title {
  font-family: var(--cde-serif);
  font-size: var(--cde-fs-title);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.005em;
}

.card__title a {
  transition: color .15s ease;
}

.card:hover .card__title a {
  color: var(--cde-red);
}

.card--lg .card__title {
  font-size: 24px;
  line-height: 1.13;
  letter-spacing: -.02em;
}

div#block-front-blocks-block-2 .views-field.views-field-field-body,
.card__standfirst {
  margin: 0;
  font-size: var(--cde-fs-sm);
  line-height: 1.5;
  color: var(--cde-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.card--sm .card__title {
  font-size: var(--cde-fs-sm);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.card--wide {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.card--wide .card__media {
  flex: 0 0 64px;
  aspect-ratio: 1;
}

/* --- Liste de brèves ------------------------------------------------- */
.brief {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 0;
  border-bottom: 1px solid var(--cde-line);
}

.brief:last-child {
  border-bottom: 0;
}

.brief__time {
  font: 700 11px/1.5 var(--cde-font);
  letter-spacing: .04em;
  color: var(--cde-red);
}

.brief__title {
  display: block;
  font-family: var(--cde-serif);
  font-size: var(--cde-fs-sm);
  font-weight: 600;
  line-height: 1.34;
}

/* Sans champ heure, la brave occupe toute la largeur. */
.brief--row {
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: 16px;
}

.brief--row .brief__time {
  color: var(--cde-muted-2);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Séries / chroniques --------------------------------------------- */
.serie {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 6px solid var(--cde-cyan);
  padding-top: 14px;
  transition: padding-top .15s ease;
}

.serie--green {
  border-top-color: var(--cde-green);
}

.serie--plum {
  border-top-color: var(--cde-plum);
}

.serie--yellow {
  border-top-color: var(--cde-yellow);
}

.serie:hover {
  padding-top: 18px;
}

.serie__name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.1;
}

.serie__author {
  font-size: 13px;
  color: var(--cde-muted);
}

/* --- Multimédia ------------------------------------------------------ */
.episode {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: var(--cde-rule-invert);
  align-items: center;
}

.episode__media {
  width: 96px;
  height: 96px;
  overflow: hidden;
}

.episode__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.episode:hover .episode__media img {
  transform: scale(1.08);
}

.episode__title a {
  transition: color .15s ease;
}

.episode__meta {
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cde-coral);
  margin-bottom: 8px;
}

.episode__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.02em;
}

/* --- Partenaires ----------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  border-top: var(--cde-rule);
  border-bottom: var(--cde-rule);
  background: var(--cde-panel);
  padding-inline: var(--cde-edge);
}

.partners__label {
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  border-right: var(--cde-rule-soft);
  font: 700 var(--cde-fs-kicker)/1.4 var(--cde-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

.partners__slot {
  height: 88px;
  border-right: var(--cde-rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.partners__slot:last-child {
  border-right: 0;
}

.partners__slot img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Blocs vue « Partenaires » / « Médias partenaires » réels (content_bottom_6) :
   un <h2> brut suivi d'une liste plate de .views-field-field-logo, sans
   .partners/.partners__slot — habillage par sélecteur de classe de bloc. */
.block--views-block-partenaires-block-1,
.block--views-block-partenaires-block-2 {
  padding: 24px 0 0;
}

.block--views-block-partenaires-block-1+.block--views-block-partenaires-block-2 {
  padding-top: 62px;
}

.block--views-block-partenaires-block-1>h2,
.block--views-block-partenaires-block-2>h2 {
  margin: 0 0 16px;
}

.block--views-block-partenaires-block-1 .views-element-container>div,
.block--views-block-partenaires-block-2 .views-element-container>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-top: 20px; 
}

.block--block-group-complement-special>div>div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.block--views-block-partenaires-block-1 .views-field-field-logo,
.block--views-block-partenaires-block-2 .views-field-field-logo {
  display: flex;
  align-items: center;
  flex: 0 0 110px;
}

.block--views-block-partenaires-block-1 .views-field-field-logo img,
.block--views-block-partenaires-block-2 .views-field-field-logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  /* filter: grayscale(1);
  opacity: .7; */
  transition: filter .15s ease, opacity .15s ease;
}

.block--views-block-partenaires-block-1 .views-field-field-logo img:hover,
.block--views-block-partenaires-block-2 .views-field-field-logo img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.ad {
  border: var(--cde-rule-soft);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad+.ad {
  margin-top: 20px;
}

/* --- Newsletter ------------------------------------------------------ */
.newsletter {
  background: var(--cde-red);
  color: var(--cde-bg);
  padding: 36px var(--cde-edge);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  border-top: var(--cde-rule);
}

.newsletter__title {
  font-size: 36px;
  line-height: 1.03;
  letter-spacing: -.03em;
  max-width: 20ch;
}

.newsletter__form {
  display: flex;
}

.newsletter__form .input {
  flex: 1;
  height: 52px;
  border: 0;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  background: var(--cde-bg);
  color: var(--cde-ink);
  border-radius: 0;
}

.newsletter__form .btn {
  background: var(--cde-ink);
  color: var(--cde-bg);
}

.newsletter__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.newsletter__cta p {
  margin: 0;
}

.newsletter__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: var(--cde-white);
  font: 700 10px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.newsletter__cta a:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--cde-white);
  color: var(--cde-white);
}

/* La region newsletter porte le bandeau rouge : les <section.newsletter>
   qu'elle contient deviennent de simples colonnes. Une .newsletter posee
   ailleurs (page /sabonner) garde son bandeau a elle. */
.region--newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px 48px;
  padding: 26px var(--cde-edge);
  background: var(--cde-red);
  color: var(--cde-white);
}

.region--newsletter>.newsletter {
  display: block; 
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.region--newsletter .newsletter__cta>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.region--newsletter p {
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.25;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 5fr;
}

.region--newsletter ul.links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pictogrammes des deux appels */
.region--newsletter .newsletter__cta>div>p:first-child::before,
.region--newsletter #block-courrier-theme-donationtext p::before {
  content: "";
  float: left;
  width: 30px;
  height: 26px;
  margin-right: 16px;
  background: left center / contain no-repeat;
}

.region--newsletter .newsletter__cta>div>p:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Crect x='1' y='1' width='30' height='24'/%3E%3Cpath d='M1 2.5 16 14 31 2.5'/%3E%3C/svg%3E");
}

.region--newsletter #block-courrier-theme-donationtext p::before {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 297.085 297.085' fill='%23ffffff'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M92.191 94.479c27.19 0 48.49-14.624 48.49-33.292 0-18.671-21.3-33.297-48.49-33.297S43.701 42.515 43.701 61.187c0 18.668 21.3 33.292 48.49 33.292zM92.191 42.889c17.841 0 33.49 8.55 33.49 18.297 0 10.78-17.649 18.292-33.49 18.292-19.736 0-33.49-9.641-33.49-18.292 0-9.747 15.65-18.297 33.49-18.297z'/%3E%3Cpath d='M184.384 114.58c.003-4.395.002-3.56-.005-53.235 0-.052.003-.104.003-.156 0-34.776-42.272-60.8-92.19-60.8C42.282.389.074 26.39.004 61.104c0 .03-.004.059-.004.09 0 6.757 0 165.999 0 174.7 0 54.355 97.154 79.21 153.876 45.362 60.097 40.099 143.209-2.281 143.209-76.763 0-60.505-56.462-102.973-112.701-89.913zM92.191 15.389c41.826 0 77.162 20.958 77.189 45.772 0 .071-.006.139-.007.21-.204 24.729-35.468 45.575-77.181 45.575-41.841 0-77.189-20.969-77.189-45.789 0-24.827 35.349-45.768 77.189-45.768zM14.999 94.702c19.105 19.158 49.821 27.277 77.192 27.277 27.1 0 58.017-8.052 77.191-27.275.002 4.337.007 20.393-.004 24.698-21.378 8.913-37.929 25.42-47.329 44.645-50.421 12.89-107.05-10.123-107.05-42.153V94.702zM14.999 155.716c25.141 24.246 66.848 30.805 100.843 24.986-3.837 14.511-4.312 30.073-.543 45.545-42.811 8.145-96.956-9.49-100.145-40.88-.214-2.098-.155-.045-.155-29.651zM14.999 235.894v-19.73c24.953 24.869 70.107 31.685 105.063 24.445 4.948 11.646 12.347 22.149 21.126 30.521C92.218 295.792 14.999 274.319 14.999 235.894zM158.606 266.254c-49.647-37.26-36.844-114.353 20.651-134.586.032-.011.065-.021.097-.033 49.961-17.542 102.715 19.428 102.715 72.864 0 64.648-73.704 99.146-123.463 61.755z'/%3E%3Cpath d='M204.904 143.293c-33.74 0-61.195 27.449-61.195 61.201 0 33.74 27.45 61.19 61.191 61.19 33.745 0 61.205-27.445 61.205-61.191 0-33.746-27.454-61.2-61.201-61.2zm0 107.39c-25.47 0-46.191-20.721-46.191-46.19 0-25.478 20.724-46.199 46.186-46.199 25.475 0 46.199 20.725 46.199 46.2 0 25.464-20.72 46.189-46.194 46.189z'/%3E%3Cpath d='M208.691 200.072v-12.129c2.147.505 4.295 1.453 6.506 2.779 4.159 2.494 7.797-3.543 3.538-5.938-2.906-1.832-6.064-3.032-9.792-3.475v-1.39c0-1.516-1.2-2.716-2.716-2.716-1.517 0-2.78 1.2-2.78 2.716v1.327c-7.896.632-13.266 5.306-13.266 12.066 0 7.138 4.296 10.612 13.519 13.013v12.445c-3.475-.632-6.38-2.085-9.35-4.232-2.101-1.635-5.559-.281-5.559 2.779 0 1.327.632 2.337 1.706 3.032 3.853 2.716 8.212 4.422 12.949 4.927v3.916c0 3.54 5.496 3.648 5.496 0v-3.79c8.023-.758 13.456-5.37 13.456-12.318 0-7.148-4.106-11.002-13.708-13.402zm-4.991-1.327c-4.864-1.58-6.064-3.222-6.064-5.875 0-2.78 2.021-4.927 6.064-5.307v11.182zm4.991 20.278v-11.497c4.863 1.516 6.254 3.222 6.254 6.001 0 3.033-2.211 5.054-6.254 5.496z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
  .newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .newsletter__cta {
    justify-content: flex-start;
  }
}

/* Groupe « Faire un don » inséré dans le fil de l'accueil (block group
   donate-group : texte + lien de don) — même bandeau rouge que .newsletter,
   posé cette fois à l'intérieur d'une région flush plutôt qu'à part, donc
   même formule de marge plein cadre (--cde-edge). */
.block--block-group-donate-group {
  background: var(--cde-red);
  color: var(--cde-bg);
  padding: 36px var(--cde-edge);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  border-top: var(--cde-rule);
  margin-bottom: var(--cde-pad2);
  border-bottom: var(--cde-rule);
}

.block--block-group-donate-group a {
  color: var(--cde-bg);
}

.block--block-group-donate-group p {
  margin: 0;
  font-size: 24px;
  line-height: 1.5;
}

.block--block-group-donate-group .block--commerce-donation-flow-link {
  display: flex;
  justify-content: flex-end;
}

.block--block-group-donate-group .block--commerce-donation-flow-link a {
  min-height: 52px;
  padding: 0 28px;
  background: var(--cde-ink);
  color: var(--cde-bg);
  font: 700 14px/1 var(--cde-font);
  letter-spacing: .04em;
}

.block--block-group-donate-group .block--commerce-donation-flow-link a:hover {
  background: #000;
  color: var(--cde-bg);
}

@media (max-width: 1100px) {
  .block--block-group-donate-group {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .block--block-group-donate-group .block--commerce-donation-flow-link {
    justify-content: flex-start;
  }
}

/* Bloc groupe « Complément spécial » (4 encarts sponsorisés en pied de
   rubrique) : 4 blocs de contenu bruts (image + légende liée), sans classe
   commune — on les met en grille à colonnes filetées, comme une bande de
   partenaires plus posée. */
.block--block-group-complement-special {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--cde-pad);
  padding-bottom: var(--cde-pad);
  border-top: var(--cde-rule);
  padding-top: var(--cde-pad);
  border-bottom: var(--cde-rule-soft);
}

.block--block-group-complement-special>div {
  padding: var(--cde-pad) var(--cde-gut) 0;
  border-right: var(--cde-rule-soft);
  text-align: center;
}

.block--block-group-complement-special>div:first-child {
  padding-left: 0;
}

.block--block-group-complement-special>div:last-child {
  border-right: 0;
  padding-right: 0;
}

.block--block-group-complement-special img {
  display: block;
  margin: 0 auto;
  max-height: 140px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity .15s ease;
}

.block--block-group-complement-special a:hover img {
  opacity: .75;
}

.block--block-group-complement-special p {
  margin: 14px 0 0;
  font: 700 11px/1.4 var(--cde-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

.block--block-group-complement-special p a {
  color: var(--cde-muted);
}

.block--block-group-complement-special p a:hover {
  color: var(--cde-red);
}

@media (max-width: 1100px) {
  .block--block-group-complement-special {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--cde-pad);
  }

  .block--block-group-complement-special>div {
    padding-top: var(--cde-pad);
  }

  .block--block-group-complement-special>div:nth-child(odd) {
    padding-left: 0;
  }

  .block--block-group-complement-special>div:nth-child(even) {
    border-right: 0;
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  .block--block-group-complement-special {
    grid-template-columns: 1fr 1fr;
  }

  .block--block-group-complement-special>div {
    border-right: 0;
    padding: var(--cde-pad) 0 0;
  }
}

/* --- Boutons -----------------------------------------------------------
   .button et input[type=submit/button/reset] sont les classes/éléments que
   Drupal pose tout seul sur n'importe quel bouton de formulaire (contact,
   commentaires, filtres de vue…) : les styler ici donne un rendu cohérent
   même sans passer par courrier_theme_form_alter() pour ajouter .btn. Les
   boutons d'UI du thème (.nav-toggle, .search-toggle, .support__amount…)
   ont leurs propres classes, plus spécifiques, donc ne sont pas concernés. */
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--cde-radius);
  font: 700 11px/1 var(--cde-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  background: var(--cde-red);
  color: var(--cde-bg);
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: var(--cde-red-700);
  color: var(--cde-bg);
}

.btn--ink {
  background: var(--cde-ink);
}

.btn--outline {
  background: none;
  border: 1px solid var(--cde-ink);
  color: var(--cde-ink);
}

.btn--outline:hover {
  background: var(--cde-ink);
  color: var(--cde-bg);
}

.btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

.tag {
  display: inline-block;
  padding: 8px 13px;
  font: 700 10px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--cde-line-strong);
}

.tag--red {
  background: var(--cde-red);
  border-color: var(--cde-red);
  color: var(--cde-white);
}

/* --- Corps d'article ------------------------------------------------- */
.article__header {
  padding: 32px 0 0;
}

.article__title {
  font-size: var(--cde-fs-h1);
  font-weight: 500;
  line-height: 1.14;
  max-width: 80%;
}

.article__standfirst {
  font-size: var(--cde-fs-lead);
  line-height: 1.5;
  color: var(--cde-ink-soft);
  max-width: 60ch;
  margin: 18px 0 0;
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  border-top: var(--cde-rule);
  border-bottom: var(--cde-rule-hair);
  padding: 14px 0;
  margin: 24px 0 0;
  justify-content: space-between;
}

.article__author-photo {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.article__figure {
  margin: 0 0 28px;
}

.article__figure img {
  width: 100%;
}

.article__figure figcaption {
  font-size: 12px;
  color: var(--cde-muted);
  padding-top: 8px;
  text-align: right;
}

.prose {
  font-size: 18px;
  line-height: 1.68;
}

.prose p {
  margin: 0 0 1.15em;
  word-wrap: anywhere;
}

.prose h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.24;
  margin: 1.8em 0 .5em;
  letter-spacing: -.005em;
}

.prose h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 1.6em 0 .4em;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--cde-red);
  font-family: var(--cde-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
}

.prose a {
  color: var(--cde-red-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose img {
  margin: 1.6em 0;
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
  margin: 0 0 1.15em;
}

.prose li {
  margin-bottom: .4em;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: var(--cde-rule);
}

.share {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* --- Don ------------------------------------------------------------- */
.support {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border-top: var(--cde-rule);
  padding-inline: var(--cde-edge);
}

.support__pitch {
  padding: 44px var(--cde-pad) 44px 0;
  border-right: var(--cde-rule-soft);
}

.support__form {
  padding: 44px 0 44px var(--cde-pad);
  background: var(--cde-panel);
}

.support__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 24px;
}

.support__amount {
  border: 1px solid var(--cde-line-strong);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  background: none;
}

.support__amount.is-selected {
  background: var(--cde-red);
  border-color: var(--cde-red);
  color: var(--cde-bg);
}

@media (max-width: 1100px) {
  .support {
    grid-template-columns: 1fr;
  }

  .support__pitch,
  .support__form {
    padding-inline: 0;
  }

  .support__pitch {
    border-right: 0;
    border-bottom: var(--cde-rule-soft);
  }
}

/* --- Recherche ---------------------------------------------------------
   Le formulaire de recherche « pleine page » (module Search de core) pose
   son propre balisage (container-inline, lien d'aide, champs cachés) —
   différent du petit form.search-block-form de l'en-tête. On l'habille
   sans template override, juste par sélecteurs. */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.search-form .container-inline {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 240px;
}

.search-form .form-item-keys {
  flex: 1;
  margin: 0;
}

.search-form .input {
  width: 100%;
  height: 52px;
  border: 2px solid var(--cde-ink);
  border-right: 0;
  padding: 0 16px;
  font: inherit;
  border-radius: 0;
  background: var(--cde-bg);
}

.search-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  font: 700 14px/1 var(--cde-font);
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--cde-red);
  color: var(--cde-bg);
}

.search-form input[type="submit"]:hover {
  background: var(--cde-red-700);
}

.search-form .search-help-link {
  font: 700 12px/1 var(--cde-font);
  letter-spacing: .04em;
  color: var(--cde-muted);
}

.search-form .search-help-link:hover {
  color: var(--cde-red);
}

.search-result {
  padding: 20px 0;
  border-top: var(--cde-rule-hair);
}

.search-result__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.search-result__title a {
  transition: color .15s ease;
}

.search-result .meta {
  display: block;
  margin: 6px 0 0;
}

.search-result__snippet {
  font-size: var(--cde-fs-sm);
  color: var(--cde-muted);
  margin: 8px 0 0;
  max-width: 70ch;
}

.search-result__snippet strong {
  color: var(--cde-red-700);
  font-weight: 700;
  background: rgba(158, 27, 47, .1);
}

/* --- Pagination ------------------------------------------------------ */
.pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: var(--cde-rule);
}

.pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--cde-line-strong);
  font-weight: 700;
}

.pager__item.is-active a {
  background: var(--cde-ink);
  color: var(--cde-bg);
}

/* --- Fil d'ariane ---------------------------------------------------- */
.breadcrumb {
  padding: 14px var(--cde-edge);
  border-bottom: var(--cde-rule-hair);
  font: 700 11px/1 var(--cde-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li+li::before {
  content: "/";
  margin-right: 10px;
  color: var(--cde-red);
}

/* --- Abonnement newsletter (page /sabonner) --------------------------- *
 * Même logique que .search-form / le bandeau partenaires réel plus haut :
 * pas de gabarit dédié, juste des sélecteurs sur le balisage Webform tel
 * quel (voir courrier_theme_form_alter() pour les classes ajoutées). Rien
 * que le formulaire, en carte resserrée et centrée — pas de texte de
 * présentation, la page n'a que ça à montrer. */
.subscribe-form {
  max-width: 460px;
  margin: 12px auto 48px;
  padding: 40px var(--cde-pad);
  border: var(--cde-rule);
  border-top: 6px solid var(--cde-red);
}

.subscribe-form .form-text,
.subscribe-form .form-email {
  height: 52px;
}

.subscribe-form [data-drupal-selector="edit-actions"] {
  margin-top: 28px;
}

.subscribe-form input[type="submit"] {
  width: 100%;
  justify-content: center;
}

@media (max-width: 720px) {
  .subscribe-form {
    padding: 28px var(--cde-pad);
  }
}

/* --- Messages -------------------------------------------------------- */
.messages {
  border: var(--cde-rule);
  padding: 16px var(--cde-pad);
  margin: 0 0 24px;
  font-weight: 700;
}

.messages--error {
  border-color: var(--cde-red);
  color: var(--cde-red-700);
}


/* =====================================================================
   Blocs de vue de la page d'accueil

   Ces affichages sortent leurs champs a plat (style de ligne « Champs ») :
   des .views-field bruts, sans conteneur de ligne. On les remet en forme
   par leur position dans la grille plutot que par un gabarit Twig.
   ===================================================================== */

/* --- Notre selection : trois cartes numerotees -------------------------
   Chaque ligne de la vue est regroupee dans un <article class="pick"> par
   templates/views/views-view-fields--front-blocks--block-1.html.twig :
   texte a gauche, image a droite. */
.block--views-block-front-blocks-block-1 .views-element-container>div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cde-gut);
  align-items: stretch;
}

.block--views-block-front-blocks-block-1 .views-element-container>div>header {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

div#block-block-partenaires-block-2>h2,
div#block-block-partenaires-block-1>h2,
div#block-block-dernieres-publications-block>h2,
.block--views-block-front-blocks-block-1 .views-element-container>div>header h2 {
  display: inline-block;
  font-family: var(--cde-serif);
  font-size: var(--cde-fs-h2);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--cde-red);
}

.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  min-height: 300px;
  background: var(--cde-white);
  border: 1px solid var(--cde-line);
  transition: border-color .15s ease;
}

.pick:hover {
  border-color: var(--cde-line-strong);
}

.pick__body {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
}

.pick__num {
  font-family: var(--cde-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--cde-red);
}

.pick__kicker {
  margin-top: 20px;
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

.pick__title {
  margin-top: 10px;
  font-family: var(--cde-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
}

.pick__more {
  margin-top: auto;
  padding-top: 22px;
}

.pick__more a {
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-red);
}

.pick__more a::after {
  content: "  \2192";
}

.pick__media {
  overflow: hidden;
}

.pick__media a,
.pick__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pick__media img {
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.pick:hover .pick__media img {
  transform: scale(1.04);
}

/* --- Le grand entretien : carte sombre, photo en fond ------------------ */
.block--views-block-front-blocks-block-8 .views-element-container>div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 310px;
  height: 100%;
  padding: 36px;
  overflow: hidden;
  background: #121016;
  color: var(--cde-white);
}

.block--views-block-front-blocks-block-8 .views-field-field-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.block--views-block-front-blocks-block-8 .views-field-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.block--views-block-front-blocks-block-8 .views-element-container>div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
      rgba(14, 12, 16, .96) 30%,
      rgba(14, 12, 16, .72) 52%,
      rgba(14, 12, 16, .12) 88%);
}

.block--views-block-front-blocks-block-8 .views-field-field-content-type {
  position: relative;
  z-index: 2;
  order: 1;
  width: max-content;
  padding: 8px 13px;
  background: var(--cde-red);
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.block--views-block-front-blocks-block-8 .views-field-title {
  position: relative;
  z-index: 2;
  order: 2;
  margin-top: 20px;
}

.block--views-block-front-blocks-block-8 .views-field-title .field-content {
  display: block;
  font-family: var(--cde-serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.16;
  color: var(--cde-white);
}

.block--views-block-front-blocks-block-8 .views-field-nothing {
  position: relative;
  z-index: 2;
  order: 3;
  margin-top: 26px;
}

.block--views-block-front-blocks-block-8 .views-field-nothing a {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-white);
  transition: background .15s ease, border-color .15s ease;
}

.block--views-block-front-blocks-block-8 .views-field-nothing a::after {
  content: "  \2192";
}

.block--views-block-front-blocks-block-8 .views-field-nothing a:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--cde-white);
  color: var(--cde-white);
}

/* --- Editorial : carte marine ----------------------------------------- */
.block--views-block-front-blocks-block-9 .views-element-container>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px;
  background: var(--cde-navy-card);
  color: var(--cde-white);
}

.block--views-block-front-blocks-block-9 .views-field-field-content-type {
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-coral);
}

.block--views-block-front-blocks-block-9 .views-field-title {
  margin-top: 16px;
}

.block--views-block-front-blocks-block-9 .views-field-title .field-content {
  display: block;
  font-family: var(--cde-serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cde-white);
}

.block--views-block-front-blocks-block-9 .views-field-field-body {
  margin-top: 18px;
  font-size: var(--cde-fs-sm);
  line-height: 1.62;
  color: rgba(255, 255, 255, .78);
}

.block--views-block-front-blocks-block-9 .views-field-nothing {
  margin-top: auto;
  padding-top: 26px;
}

.block--views-block-front-blocks-block-9 .views-field-nothing a {
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-white);
}

.block--views-block-front-blocks-block-9 .views-field-nothing a::after {
  content: "  \2192";
}

.block--views-block-front-blocks-block-9 .views-field-nothing a:hover {
  color: var(--cde-coral);
}

/* --- Les rubriques : quatre cartes ------------------------------------ */
.region--content-bottom-3>.block {
  display: flex;
  flex-direction: column;
  background: var(--cde-white);
  border: 1px solid var(--cde-line);
}

.region--content-bottom-3 .views-element-container,
.region--content-bottom-3 .views-element-container>div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.region--content-bottom-3 header {
  order: 1;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cde-line);
}

/* Le nom de la rubrique porte un pictogramme, choisi par l'identifiant du
   bloc — le CSS ne peut pas se fonder sur le texte du titre. Une rubrique
   ajoutee plus tard recoit le feuillet par defaut. */
.region--content-bottom-3 header h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  border: 0;
  font: 700 12px/1 var(--cde-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cde-navy);
}

.region--content-bottom-3 header h2::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");
}

.region--content-bottom-3 #block-front-blocks-4-block-2 header h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='14' height='13'/%3E%3Cpath d='M16.5 9H21v7.5a2 2 0 0 1-4.5 0z'/%3E%3Cpath d='M5.5 9h8M5.5 12h8M5.5 15h5'/%3E%3C/svg%3E");
}

.region--content-bottom-3 #block-front-blocks-4-block-3 header h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16 14.8c2.9.2 5 2.3 5 5.2'/%3E%3C/svg%3E");
}

.region--content-bottom-3 #block-front-blocks-4-block-5 header h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V11m6 10V5m6 16v-7'/%3E%3C/svg%3E");
}

.region--content-bottom-3 #block-front-blocks-4-block-6 header h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1b2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v9.5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M14 4h6v9.5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M6 8h2M16 8h2'/%3E%3C/svg%3E");
}

.region--content-bottom-3 .views-field-field-image {
  order: 2;
}

.region--content-bottom-3 .views-field-field-image img {
  width: 100%;
  height: 145px;
  object-fit: cover;
}

.region--content-bottom-3 .views-field-title {
  order: 3;
  padding: 18px 20px 0;
}

.region--content-bottom-3 .views-field-title .field-content {
  display: block;
  font-family: var(--cde-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.32;
}

.region--content-bottom-3 .views-field-field-body {
  order: 4;
  padding: 10px 20px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cde-muted);
}

.region--content-bottom-3 footer {
  order: 5;
  margin-top: auto;
  padding: 20px;
}

.region--content-bottom-3 footer a {
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-red);
}

.region--content-bottom-3 footer a::after {
  content: "  \2192";
}

/* --- Territoires : Region / Armenie francophone / Diasporas -----------
   Blocs de contenu libres : une image suivie d'une div titre + lien. */
.region--content-bottom-4>.block {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  background: var(--cde-navy);
}

.region--content-bottom-4>.block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(10, 22, 45, .9), rgba(10, 22, 45, .45));
}

.region--content-bottom-4 .block img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.region--content-bottom-4 .block>div>div {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 22px;
  color: var(--cde-white);
}

.region--content-bottom-4 .block h3 {
  margin: 0;
  font: 700 13px/1 var(--cde-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cde-white);
}

.region--content-bottom-4 .block p {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
}

.region--content-bottom-4 .block>div>div>div:last-child p {
  margin: 0;
}

.region--content-bottom-4 .block a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255);
  border-radius: 50%;
  font-size: 0;
  color: transparent;
  transition: background .15s ease;
}

.region--content-bottom-4 .block a::after {
  content: "\203A";
  font-size: 25px;
  line-height: 26px;
  color: var(--cde-white);
}

.region--content-bottom-4 .block a:hover {
  background: rgba(255, 255, 255, .18);
}

/* --- Partenaires : logos en niveaux de gris --------------------------- */
/* .region--content-bottom-6>.block>h2 {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cde-muted);
} */

.region--content-bottom-6 .views-element-container>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 35px;
}

.region--content-bottom-6 .views-field-field-logo img {
  max-height: 110px;
  width: auto;
  /* filter: grayscale(1);
  opacity: .62; */
  transition: filter .2s ease, opacity .2s ease;
}

/* .region--content-bottom-6 .views-field-field-logo img:hover {
  filter: none;
  opacity: 1;
} */

/* --- Pied de page : colonne de marque et pictogrammes ----------------- */
.region--footer-first img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.region--footer-first p {
  max-width: 42ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .58);
}

/* Signature anniversaire — supprimer cette regle pour la retirer. */
.region--footer-first .block::after {
  content: "15 ans  \00B7  2012 \2013 2027";
  display: block;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--cde-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

/* Colonne « Suivre » : pictogramme deduit de l'URL du lien. */
.region--footer-fourth li a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.region--footer-fourth li a::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: center / contain no-repeat;
  opacity: .8;
}

.region--footer-fourth a[href*="facebook"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.1-2.45-.1-2.45 0-4.1 1.5-4.1 4.2v2.2H7.4V13h2.75v8z'/%3E%3C/svg%3E");
}

.region--footer-fourth a[href*="instagram"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
}

.region--footer-fourth a[href*="linkedin"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5M3 9h4v12H3zm7 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.5 4.78 5.75V21h-4v-5.6c0-1.34-.03-3.07-1.9-3.07-1.9 0-2.2 1.46-2.2 2.97V21h-4z'/%3E%3C/svg%3E");
}

.region--footer-fourth a[href*="youtube"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M22.2 7.4a2.7 2.7 0 0 0-1.9-1.9C18.6 5 12 5 12 5s-6.6 0-8.3.5A2.7 2.7 0 0 0 1.8 7.4C1.3 9.1 1.3 12 1.3 12s0 2.9.5 4.6a2.7 2.7 0 0 0 1.9 1.9c1.7.5 8.3.5 8.3.5s6.6 0 8.3-.5a2.7 2.7 0 0 0 1.9-1.9c.5-1.7.5-4.6.5-4.6s0-2.9-.5-4.6M9.9 15.2V8.8l5.5 3.2z'/%3E%3C/svg%3E");
}

.region--footer-fourth a[href*="twitter"]::before,
.region--footer-fourth a[href*="x.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.5 3h3.1l-6.8 7.8L21.8 21h-6.2l-4.9-6.4L5.1 21H2l7.3-8.3L2.5 3h6.4l4.4 5.8zm-1.1 16.1h1.7L7.7 4.8H5.9z'/%3E%3C/svg%3E");
}

/* --- Adaptatif des blocs d'accueil ------------------------------------ */
@media (max-width: 900px) {

  .lead {
    min-height: 420px;
    padding: 26px;
  }

  /* Notre selection : une carte par ligne, image au-dessus du texte. */
  .block--views-block-front-blocks-block-1 .views-element-container>div {
    grid-template-columns: 1fr 1fr;
  }

  .pick {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .pick__media {
    order: -1;
    height: 200px;
  }

  .block--views-block-front-blocks-block-8 .views-element-container>div::before {
    background: linear-gradient(to top, rgba(14, 12, 16, .96) 45%, rgba(14, 12, 16, .35) 100%);
  }
}

@media (max-width: 720px) {

  .region--newsletter {
    flex-direction: column;
    align-items: flex-start;
  }
}


figure.youtube-container.youtube-container--responsive {
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}