/* Courrier d'Erevan — grille et régions */

.page {
  background: var(--cde-white);
}

/* --- Barre utilitaire ------------------------------------------------ */
.utility {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 0 var(--cde-edge);
  min-height: 46px;
  background: var(--cde-navy);
  color: rgba(255, 255, 255, .85);
  font: 500 11px/1 var(--cde-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.utility a {
  color: rgba(255, 255, 255, .82);
}

.utility a:hover {
  color: var(--cde-white);
}

/* Menu thematique de la barre haute (bloc de menu place en header_top) */
.utility nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility .block--search-form-block {
  margin-left: auto;
}

.utility .search-toggle {
  color: var(--cde-white);
}

.utility .search-block-form .input {
  height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: var(--cde-white);
  font-size: 12px;
  width: 200px;
}

.utility .search-block-form .input::placeholder {
  color: rgba(255, 255, 255, .5);
}

.utility .search-block-form .btn {
  height: 34px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: var(--cde-white);
  font-size: 10px;
  letter-spacing: .14em;
}

.utility .search-block-form .btn:hover {
  background: rgba(255, 255, 255, .14);
}

.utility__langs {
  display: flex;
  gap: 14px;
}

.utility__langs .is-active {
  color: var(--cde-coral);
}

/* --- En-tête --------------------------------------------------------- */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--cde-gut);
  padding: 26px var(--cde-edge) 22px;
  background: var(--cde-white);
}

/* Un seul bloc (région « header ») occupe tout le bandeau : le logo et la
   recherche sont posés bruts par Drupal, donc c'est .region--header qui
   porte la mise en page (logo à gauche, recherche à droite). */
.masthead__actions {
  grid-column: 1 / -1;
}

/* Trois colonnes : macaron anniversaire (facultatif) - logo - appel a
   l'action. Le logo se place explicitement en colonne 2 pour rester centre
   meme quand la colonne de gauche est vide. */
.masthead .region--header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
}

.masthead .block--block-group-header-right {
  grid-column: 3;
  justify-self: end;
}

/* Macaron 15 ans : bloc personnalise place en tete de la region header.
   <div class="anniv"><b>15</b><span><span>Ans</span><span>2012 - 2027</span></span></div> */
.masthead .anniv {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cde-red);
}

.masthead .anniv b {
  font-family: var(--cde-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: .9;
}

.masthead .anniv span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.masthead .anniv span+span {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(158, 27, 47, .45);
  letter-spacing: .1em;
}

/* Filet de sécurité flexbox : par défaut, un item flex ne peut pas
   rétrécir sous la taille intrinsèque de son contenu (min-width: auto),
   ce qui pour une image redimensionnée en width:100%/max-width ignore ce
   max-width dans le calcul et peut forcer toute la ligne (logo + recherche
   + don) à déborder sur mobile. On l'autorise explicitement à rétrécir. */
.masthead .region--header>* {
  min-width: 0;
}

.masthead .block--system-branding-block img {
  width: auto;
  max-height: 90px;
}

.masthead--compact {
  grid-template-columns: auto 1fr auto;
  padding: 14px var(--cde-edge);
}

.masthead--compact .block--system-branding-block img {
  width: auto;
  max-height: 46px;
}

/* --- Groupe recherche + don (bloc de groupe « header_right ») ---------
   Le bouton de recherche héritait du .btn rouge par défaut, ce qui le
   faisait entrer en concurrence visuelle avec « Faire un don » — deux
   pavés rouges collés l'un à l'autre. La recherche passe en encre (action
   secondaire), le don garde le rouge (seul appel à l'action de la barre),
   et un filet sépare clairement les deux groupes. */
.block--block-group-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.block--commerce-donation-flow-link {
  padding-left: 0;
  border-left: 0;
}

.block--commerce-donation-flow-link .links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.block--commerce-donation-flow-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--cde-red);
  background: transparent;
  color: var(--cde-red);
  font: 700 10px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.block--commerce-donation-flow-link a:hover {
  background: var(--cde-red);
  color: var(--cde-white);
}

/* --- Rappel newsletter de l'en-tete ------------------------------------
   Bloc de contenu libre (« S'abonner ») fait de deux paragraphes-liens :
   « Newsletter » puis « S'abonner ». Il se lit comme un seul rappel :
   enveloppe bordeaux, surtitre discret, action en gras dessous.

   A placer dans le groupe « header right », a cote de « Faire un don » ;
   pose directement dans la region header, la regle :has() plus bas evite
   que les deux se superposent dans la meme colonne de grille. */
.masthead div#block-courrier-theme-donatewithicon,
.masthead #block-courrier-theme-sabonner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.masthead div#block-courrier-theme-donatewithicon::before {
  content: "";
  flex: none;
  width: 26px;
  height: 19px;
  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='%239e1b2f'%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");
}

.masthead #block-courrier-theme-sabonner::before {
  content: "";
  flex: none;
  width: 26px;
  height: 19px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='%239e1b2f' stroke-width='1.6'%3E%3Crect x='1' y='1' width='30' height='22'/%3E%3Cpath d='M1 2.5 16 13 31 2.5'/%3E%3C/svg%3E");
}

/* :not(.contextual) : la barre d'edition de Drupal est aussi une div
   enfant directe du bloc, elle ne doit pas etre prise pour le champ. */
.masthead div#block-courrier-theme-donatewithicon>div:not(.contextual),
.masthead #block-courrier-theme-sabonner>div:not(.contextual) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.masthead div#block-courrier-theme-donatewithicon p,
.masthead #block-courrier-theme-sabonner p {
  margin: 0;
}

.masthead div#block-courrier-theme-donatewithicon a,
.masthead #block-courrier-theme-sabonner a {
  display: block;
  font: 600 9px/1.2 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-muted);
  white-space: nowrap;
}

.masthead div#block-courrier-theme-donatewithicon p:last-child a,
.masthead #block-courrier-theme-sabonner p:last-child a {
  font-weight: 700;
  color: var(--cde-ink);
}

.masthead div#block-courrier-theme-donatewithicon a:hover,
.masthead #block-courrier-theme-sabonner a:hover {
  color: var(--cde-red);
}

/* Deux blocs se disputent la colonne de droite de la grille : on repasse
   la region en flex, le logo restant centre par ses marges automatiques. */
.masthead .region--header:has(>#block-courrier-theme-sabonner) {
  display: flex;
  justify-content: space-between;
}

.masthead .region--header:has(>#block-courrier-theme-sabonner) .block--system-branding-block {
  margin-inline: auto;
}

/* Le meme bloc pose dans le bandeau rouge : enveloppe et texte en blanc. */
.region--newsletter #block-courrier-theme-sabonner::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Crect x='1' y='1' width='30' height='22'/%3E%3Cpath d='M1 2.5 16 13 31 2.5'/%3E%3C/svg%3E");
}

.region--newsletter #block-courrier-theme-sabonner a {
  color: var(--cde-white);
}

/* --- Recherche repliable ----------------------------------------------- */
.block--search-form-block {
  display: flex;
  align-items: center;
}

.search-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: currentColor;
  color: var(--cde-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px;
  transition: color .15s ease;
  order: 2;
}

.search-toggle:hover {
  color: var(--cde-red);
}

.block--search-form-block .search-block-form {
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width .2s ease, opacity .15s ease;
  order: 1;
}


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

.search-block-form .input {
  width: 100%;
  min-height: unset;
  height: 40px;
  border: 2px solid var(--cde-ink);
  border-right: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  background: var(--cde-bg);
}

.search-block-form .form-actions {
  margin: 0;
  display: none;
}

.search-block-form .btn {
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--cde-ink);
  color: var(--cde-bg);
}

.search-block-form .btn:hover {
  background: #000;
  color: var(--cde-bg);
}

/* --- Menu principal -------------------------------------------------- */
.nav-primary {
  border-top: var(--cde-rule-hair);
  border-bottom: var(--cde-rule-hair);
  padding: 0 var(--cde-edge);
  background: var(--cde-white);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-primary__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 700 11px/1 var(--cde-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 52px;
  justify-content: center;
}

.nav-primary__list>li>a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  color: var(--cde-ink-soft);
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .15s ease, color .15s ease;
}

.nav-primary__list>li>a:hover {
  color: var(--cde-red);
}

.nav-primary__list>li>a.is-active,
.nav-primary__list>li>a.is-active:hover {
  color: var(--cde-ink);
  box-shadow: inset 0 -2px 0 var(--cde-red);
}

.nav-toggle {
  display: none;
}

/* --- Bandeau alerte -------------------------------------------------- */
.breaking {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--cde-edge);
  background: var(--cde-red);
  color: var(--cde-bg);
  border-bottom: var(--cde-rule);
  font-weight: 700;
}

.breaking__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 11px/1 var(--cde-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  padding: 6px 8px;
  white-space: nowrap;
}

.breaking__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: cde-pulse 1.6s ease-in-out infinite;
}

@keyframes cde-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breaking__label::before {
    animation: none;
  }
}

/* --- Sections -------------------------------------------------------- */
.section {
  padding: 40px var(--cde-edge);
}

.section.section--highlighted {
  padding: 0;
}

.section.section--before {
  padding-top: 10px;
  padding-bottom: 0;
}

.section--flush {
  padding-inline: 0;
}

.section--panel {
  background: var(--cde-panel);
}

.section--white {
  background: var(--cde-white);
  padding-top: 0;
}

.section--dark {
  background: var(--cde-navy);
  color: var(--cde-white);
  border-top: 0;
}

.section--dark a {
  color: var(--cde-bg);
}

.section--dark a:hover {
  color: var(--cde-coral);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0 18px;
}

div#block-ecouter-et-voir-block>h2 {
  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);
  display: table;
  margin-bottom: 18px;
}

.section__title {
  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);
}

div#block-ecouter-et-voir-block>h2::before,
.section__title::before {
  content: none;
}

.section--dark .section__title::before {
  color: var(--cde-coral);
}

/* Grilles de cartes « brutes » (views-element-container > div:has(> .card))
   dans une section sombre : plutôt que la grille de tuiles .card, les
   articles se lisent comme la liste .episode de la maquette — vignette
   carrée + titre, en rangée, sans grille ni carte vedette. Le texte muted
   et le survol rouge par défaut deviendraient de toute façon illisibles
   sur fond encre : même bascule vers le corail que .section--dark applique
   déjà aux liens. */
.section--dark .region {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--cde-gut);
}

.section--dark .region> :nth-child(2) {
  border-left: var(--cde-rule-invert);
  padding-left: var(--cde-gut);
}

.section--dark .views-element-container>div:has(> .card) {
  grid-template-columns: 1fr;
  padding-top: 24px;
}

.section--dark .views-element-container>div:has(> .card)>header {
  padding-bottom: 16px;
}

.section--dark .card {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto;
  gap: 0 16px;
  align-items: center;
  border-top: var(--cde-rule-invert);
  padding: 20px 0;
}

.section--dark .card__media {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 200px;
  height: 145px;
  aspect-ratio: 1;
  background: rgba(243, 242, 242, .08);
}

.section--dark .card__title {
  grid-column: 2;
  grid-row: 1;
}

.section--dark .card__standfirst {
  grid-column: 2;
  grid-row: 2;
  color: rgba(243, 242, 242, .65);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.section--dark .card .meta {
  grid-column: 2;
  grid-row: 3;
}

.section--dark .card:hover {
  border-top-color: var(--cde-coral);
}

.section--dark .card:hover .card__title a {
  color: var(--cde-coral);
}

.section--dark .views-element-container>div:has(> .card)>header h2::before {
  color: var(--cde-coral);
}

.section--dark .views-element-container>div:has(> .card)>header a {
  color: var(--cde-bg);
  opacity: .65;
}

.section--dark .views-element-container>div:has(> .card)>header a:hover {
  color: var(--cde-coral);
  opacity: 1;
}

.section__more {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

/* --- Grilles --------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--cde-gut);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--3-aside {
  grid-template-columns: repeat(3, 1fr) 1.05fr;
}

.grid--fil {
  grid-template-columns: 1.55fr 1fr;
  gap: 0;
  padding-inline: var(--cde-edge);
}

.col-rule-right {
  border-right: var(--cde-rule-soft);
}

.col-rule-left {
  border-left: var(--cde-rule-soft);
  padding-left: var(--cde-gut);
}

/* --- Région content_before : « À la une » + « Dernières publications » --
   Deux blocs de vue posés bruts par Drupal (pas de wrapper .grid à nous) :
   c'est la région elle-même qui porte la grille et le bord plein cadre. */
.region--content-before {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--cde-gut);
  align-items: stretch;
  padding-inline: var(--cde-edge);
}

/* Le panneau L'essentiel est une boite creme pleine hauteur, a cote de la
   une en pleine image - plus de filet separateur entre les deux. */
.region--content-before div#block-courrier-theme-frontmainbefore {
  padding: 0 26px;
  height: 100%;
}

.block--views-block-dernieres-publications-block-1 {
  position: relative;
  height: 100%;
}

.block--views-block-dernieres-publications-block-1 .views-element-container {
  height: calc(100% - 36px);
}

.block--views-block-dernieres-publications-block-1 .views-element-container>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* .block--views-block-dernieres-publications-block-1>h2 {
  font-family: var(--cde-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cde-ink);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cde-line-strong);
} */

/* Le lien Voir tout que la vue pose dans son propre <header> remonte sur
   la ligne du titre du bloc. */
.block--views-block-dernieres-publications-block-1 header {
  position: absolute;
  top: 5px;
  right: 0;
  padding: 0;
  border: 0;
}

.block--views-block-dernieres-publications-block-1 header a {
  font: 700 9px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-red);
}

div#block-ecouter-et-voir-block {
  position: relative;
}

div#block-ecouter-et-voir-block header {
  position: absolute;
  top: 11px;
  right: 0;
  padding: 0;
  border: 0;
}

div#block-ecouter-et-voir-block header a {
  font: 700 9px/1 var(--cde-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cde-red);
}

/* --- Page de rubrique (vue « Taxonomy term » par défaut) ---------------
   Cette vue n'a pas de gabarit dédié : le style de ligne « Non formatée »
   pose les .card les uns à la suite des autres, à plat, dans la div que
   Views place sous .views-element-container. On la détecte par sa forme
   plutôt que par un nom de vue/affichage (fragile à deviner) et on la
   transforme en grille — le header (nom du terme) et le pager gardent
   toute la largeur. */
.views-element-container>div:has(> .card) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cde-gut);
}

.region.region--content {
  padding: 0 var(--cde-edge);
}

.related-articles .views-element-container>div:has(> .card) {
  padding: 0;
}

div#block-front-blocks-vertical-block-2 .views-element-container>div,
div#block-front-blocks-vertical-block-3 .views-element-container>div,
div#block-front-blocks-block-3 .views-element-container>div,
div#block-block-front-blocks-block-4 .views-element-container>div {
  padding: 0;
}

div#block-courrier-theme-ufar25 {
  padding: var(--cde-pad) 0;

}

div#block-courrier-theme-ufar25 img {
  width: 100%;

}

.views-element-container>div:has(> .card)> :not(.card) {
  grid-column: 1 / -1;
}

/* En-tête « / Titre — voir tout » que Views pose devant chaque grille de
   cartes (front_blocks etc.) : un <header><h2> brut + un lien flèche SVG,
   sans classe à eux — on les habille par sélecteur d'élément, comme le nom
   de rubrique de la page de taxonomie plus haut. */
.views-element-container>div:has(> .card)>header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 2px;
}

.views-element-container>div:has(> .card)>header h2 {
  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);
}

.views-element-container>div:has(> .card)>header h2::before {
  content: none;
}

.views-element-container>div:has(> .card)>header a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--cde-muted);
  transition: color .15s ease;
}

.views-element-container>div:has(> .card)>header a:hover {
  color: var(--cde-red);
}

.views-element-container>div:has(> .card)>header svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform .15s ease;
}

.views-element-container>div:has(> .card)>header a:hover svg {
  transform: translateX(3px);
}

/* Étiquette au-dessus de la sélection en tête d'accueil, pour la distinguer
   des grilles de rubrique qui suivent (elle n'a pas de lien « voir tout »,
   ce n'est pas une rubrique unique). */
.block--views-block-front-blocks-block-1 header {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Liste secondaire (ex. 4 gros titres sous la grille « Actualités ») : des
   .views-field-title bruts, sans classe .brief. */
.views-element-container>div:has(> .card)>.views-element-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  padding-top: 16px;
  border-top: var(--cde-rule-hair);
}


.views-element-container>div:has(> .card)>.views-element-container .views-field-title {
  padding: 11px 0;
  border-top: var(--cde-rule-hair);
  font-size: var(--cde-fs-sm);
  font-weight: 700;
  line-height: 1.25;
}

.views-element-container>div:has(> .card)>.views-element-container .views-field-title:first-child,
.views-element-container>div:has(> .card)>.views-element-container .views-field-title:nth-child(2) {
  border-top: 0;
}

/* « Actualités » (front_blocks_block_2) : la liste secondaire devient une
   4e colonne « aside » à côté des 3 cartes — comme .grid--3-aside dans la
   maquette — au lieu d'une rangée à part en dessous. */
.block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card) {
  grid-template-columns: repeat(3, 1fr) 1.05fr;
}

.block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container {
  grid-column: auto;
  display: block;
  border-top: 0;
  padding-top: 0;
  border-left: var(--cde-rule-soft);
  padding-left: var(--cde-gut);
}

.block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container .views-field-title:nth-child(2) {
  border-top: var(--cde-rule-hair);
}

/* Sélection en tête d'accueil (front_blocks_1) : titres un cran plus grands
   pour marquer la hiérarchie entre elle et les grilles de rubrique. */
.block--views-block-front-blocks-block-1 .card__title {
  font-size: 24px;
  line-height: 1.13;
  letter-spacing: -.02em;
}

.block--views-block-front-blocks-block-1 .card__standfirst {
  font-size: var(--cde-fs-body);
}

/* Rythme visuel de l'accueil : sept grilles à 3 cartes identiques d'affilée
   (Société, Opinions, Francophonie, Arts, Économie, Diasporas, Région) sont
   répétitives même avec le fond alterné des .section. Une rubrique sur deux
   passe à 2 colonnes : la 1ère carte occupe la 1ère colonne sur toute la
   hauteur (elle s'étend sur 2 rangées), les 2e et 3e cartes se partagent
   la 2e colonne, une par rangée. */
.block--views-block-front-blocks-block-3 .views-element-container>div:has(> .card),
.block--views-block-front-blocks-block-5 .views-element-container>div:has(> .card) {
  grid-template-columns: repeat(2, 1fr);
}

.block--views-block-front-blocks-block-3 .card:first-of-type,
.block--views-block-front-blocks-block-5 .card:first-of-type {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.block--views-block-front-blocks-block-3 .card:first-of-type .card__media,
.block--views-block-front-blocks-block-5 .card:first-of-type .card__media {
  flex: 1;
  aspect-ratio: auto;
}

.block--views-block-front-blocks-block-3 .card:first-of-type .card__title,
.block--views-block-front-blocks-block-5 .card:first-of-type .card__title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.block--views-block-front-blocks-block-3 .card:first-of-type .card__standfirst,
.block--views-block-front-blocks-block-5 .card:first-of-type .card__standfirst {
  font-size: var(--cde-fs-sm);
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* 2e et 3e cartes de la 2e colonne : même mise en page que .section--dark
   .card (vignette à gauche, titre + date à droite sur 2 rangées), mais
   avec un filet clair puisqu'on est ici sur fond clair. */
.block--views-block-front-blocks-block-3 .card:not(:first-of-type),
.block--views-block-front-blocks-block-5 .card:not(:first-of-type) {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: center;
  border-top: var(--cde-rule);
  padding: 16px 0;
}

.block--views-block-front-blocks-block-3 .card:not(:first-of-type) .card__media,
.block--views-block-front-blocks-block-5 .card:not(:first-of-type) .card__media {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}

.block--views-block-front-blocks-block-3 .card:not(:first-of-type) .card__title,
.block--views-block-front-blocks-block-5 .card:not(:first-of-type) .card__title {
  grid-column: 2;
  grid-row: 1;
}

.block--views-block-front-blocks-block-3 .card:not(:first-of-type) .meta,
.block--views-block-front-blocks-block-5 .card:not(:first-of-type) .meta {
  grid-column: 2;
  grid-row: 3;
}

.block--views-block-front-blocks-block-3 .card:not(:first-of-type) .card__standfirst,
.block--views-block-front-blocks-block-5 .card:not(:first-of-type) .card__standfirst {
  grid-column: 2;
  grid-row: 2;
}

.js-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);
}

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

.feed-icon {
  display: inline-block;
  margin-top: 24px;
  font: 700 12px/1 var(--cde-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cde-muted);
}

.feed-icon:hover {
  color: var(--cde-red);
}

/* --- Article --------------------------------------------------------- */
.layout-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  padding-inline: var(--cde-edge);
}



.layout-article .region.region--content {
  padding: 0;
}

.layout-article__main {
  padding: 0 var(--cde-pad) 48px 0;
  border-right: var(--cde-rule-soft);
}

.layout-article__aside {
  padding: 28px 0 48px var(--cde-pad);
}

.layout-listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  padding-inline: var(--cde-edge);
}

/* --- Pied de page ---------------------------------------------------- */
.footer {
  background: var(--cde-navy);
  color: rgba(255, 255, 255, .75);
  padding: 48px var(--cde-edge) 0;
}

.footer .nav-primary__list>li>a,
.footer a {
  color: rgba(255, 255, 255, .72);
  padding: 0;
}

.footer .nav-primary__list>li>a:hover,
.footer a:hover {
  color: var(--cde-white);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 40px;
}

/* .footer__bottom n'a qu'un seul enfant direct réel : la div .region
   .region--footer-bottom que Drupal pose autour des blocs (copyright,
   mentions) — le flex/space-between doit donc porter sur elle, pas sur
   .footer__bottom, sinon les deux blocs restent empilés au lieu de se
   répartir à gauche/droite. */
.footer__bottom {
  border-top: var(--cde-rule-invert);
  padding: 18px 0 26px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
}

.footer__bottom .region--footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer__bottom .region--footer-bottom p {
  margin: 0;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0; 
  font-size: 14px;
}

.footer ul li {
  margin-bottom: 10px;
}

/* Titres de bloc dans le pied de page (menus, blocs de contenu) : Drupal
   pose un <h2> brut, sans classe — même traitement que le kicker corail
   du footer prévu dans la maquette. */
.footer h2 {
  display: inline-block;
  font: 700 var(--cde-fs-kicker)/1 var(--cde-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cde-white);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cde-red);
}

/* Le menu « Rubriques » du pied de page réutilise la classe .nav-primary__list
   (même bloc de menu que la nav principale) : on annule son habillage
   « barre de navigation » pour qu'il ressemble aux autres colonnes du pied
   de page (Le journal, Suivre), qui sont de simples <ul> sans classe. */
.footer .nav-primary__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  min-height: 0;
  align-items: flex-start;
}

.footer .nav-primary__list>li>a {
  min-height: 0;
  box-shadow: none;
}

/* --- Adaptatif ------------------------------------------------------- */
@media (max-width: 1100px) {

  .grid--3-aside,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--fil,
  .layout-article,
  .layout-listing,
  .region--content-before {
    grid-template-columns: 1fr;
  }

  .views-element-container>div:has(> .card) {
    grid-template-columns: repeat(2, 1fr);
  }

  .col-rule-right,
  .layout-article__main {
    border-right: 0;
    border-bottom: var(--cde-rule-soft);
  }

  .col-rule-left {
    border-left: 0;
    border-top: var(--cde-rule-soft);
    padding-left: 0;
    padding-top: var(--cde-gut);
  }

  /* Colonnes empilées : le conteneur (padding-inline: --cde-edge) gère déjà
     les deux bords, les anciennes colonnes n'ont plus de filet voisin à
     border-gouttièrer. */
  .layout-article__main,
  .layout-article__aside {
    padding-inline: 0;
  }

  .region--content-before .block--views-block-a-la-une-block-1 {
    border-right: 0;
    border-bottom: var(--cde-rule-soft);
  }

  .block--views-block-dernieres-publications-block-1 {
    padding-left: 0;
    padding-top: 24px;
  }

  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .section--dark .region {
    grid-template-columns: 1fr;
    gap: var(--cde-gut) 0;
  }

  .section--dark .region> :nth-child(2) {
    border-left: 0;
    padding-left: 0;
    border-top: var(--cde-rule-invert);
    padding-top: var(--cde-gut);
  }

  /* La colonne aside « Actualités » retourne sous les cartes (comme les
     autres grilles brutes) : plus assez de place pour 4 colonnes. */
  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card) {
    grid-template-columns: repeat(2, 1fr);
  }

  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
    border-top: var(--cde-rule-hair);
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }

  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container .views-field-title:nth-child(2) {
    border-top: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --cde-pad: 18px;
    --cde-gut: 18px;
  }

  .masthead {
    grid-template-columns: 1fr auto;
  }

  .block--search-form-block.is-open .search-block-form {
    width: min(240px, 60vw);
  }

  .block--block-group-header-right {
    gap: 8px;
  }

  .block--commerce-donation-flow-link a {
    padding: 0 12px;
    font-size: 12px;
  }

  .grid--2,
  .grid--3,
  .grid--3-aside,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .views-element-container>div:has(> .card) {
    grid-template-columns: 1fr;
  }

  .views-element-container>div:has(> .card)>.views-element-container {
    grid-template-columns: 1fr;
  }

  .views-element-container>div:has(> .card)>.views-element-container .views-field-title:nth-child(2) {
    border-top: var(--cde-rule-hair);
  }

  .block--views-block-front-blocks-block-3 .views-element-container>div:has(> .card),
  .block--views-block-front-blocks-block-5 .views-element-container>div:has(> .card),
  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card),
  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container {
    grid-template-columns: 1fr;
  }

  /* Une seule colonne en mobile : la 1ère carte ne doit plus s'étirer sur
     2 rangées, sinon la 2e colonne (devenue inexistante) laisse un trou. */
  .block--views-block-front-blocks-block-3 .card:first-of-type,
  .block--views-block-front-blocks-block-5 .card:first-of-type {
    grid-row: auto;
  }

  .block--views-block-front-blocks-block-2 .views-element-container>div:has(> .card)>.views-element-container .views-field-title:nth-child(2) {
    border-top: var(--cde-rule-hair);
  }

  .footer__cols {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: 2px solid var(--cde-ink);
    color: inherit;
    font: 700 12px/1 var(--cde-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav-primary__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 10px;
  }

  .nav-primary.is-open .nav-primary__list {
    display: flex;
  }

  nav#block-courrier-theme-main-menu .nav-primary__list>li>a {
    min-height: 48px;
    border-top: var(--cde-rule-hair);
  }
}

.region.region--footer-first {
  padding-right: 90px;
  font-size: 12px;
}

div#block-courrier-theme-fr2026 {
  margin-top: var(--cde-pad);
}


/* --- Regions de l'accueil : entretien/edito, rubriques, territoires ----
   Ces trois regions recoivent des blocs de vue poses bruts par Drupal
   (pas de wrapper a nous) : c'est la region qui porte la grille, comme
   .region--content-before plus haut. */
.region--content-bottom {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--cde-gut);
  align-items: stretch;
}

div#block-front-blocks-block-9 .views-element-container {
  height: 100%;
}

.region--content-bottom-3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cde-gut);
  align-items: stretch;
}

.region--content-bottom-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cde-gut);
}

/* La selection en tete d'accueil est dans une .section--flush (sans marge
   laterale) : elle reprend le bord plein cadre a son compte. */

/* En page d'accueil, le bloc de contenu principal rend une vue vide : il
   n'ajoute qu'un conteneur sans contenu au milieu de la region. */
.is-front #block-courrier-theme-content {
  display: none;
}

@media (max-width: 1100px) {

  .region--content-bottom-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  .region--content-bottom {
    grid-template-columns: 1fr;
  }

  .region--content-bottom-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 720px) {


  .region--newsletter>.newsletter {
    flex: 1 1 380px;
  }

}

@media (max-width: 720px) {

  .region--content-bottom-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  .masthead .region--header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }

  .masthead .anniv,
  .masthead .block--system-branding-block,
  .masthead .block--block-group-header-right {
    grid-column: 1;
    justify-self: center;
  }

  .utility {
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 10px;
  }

  .nav-primary__list>li>a {
    padding: 0 14px;
  }
}


@media (max-width: 500px) {
  .block--views-block-front-blocks-block-1 .views-element-container>div,
  .block--block-group-complement-special,
  .region--content-bottom-4 {
    grid-template-columns: 1fr;
  }
}


nav.nav-primary div#block-courrier-theme-sitebranding {
  display: none;
}

.is-scrolled nav.nav-primary div#block-courrier-theme-sitebranding {
  display: block;
}

nav.nav-primary div#block-courrier-theme-sitebranding img {
  width: 110px;
}

nav.nav-primary {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.is-scrolled nav.nav-primary {
  justify-content: space-between;
}