/* ==========================================================================
   ABI Lifestyle - modele Magazine 4
   Echelle typographique : ratio 1.2 sur une base de 17 px.
   Rythme vertical : unite de 9 px.
   Neutres chauds 90 % / teal 9 % / ocre 1 % (numeros, marqueurs, selection).
   ========================================================================== */

:root {
  /* Deux couleurs seulement, toutes deux prises dans le logo :
     le cyan #13A5BF et le vert-jaune #E0E55E. Fond blanc, pas de creme. */
  --abi-fond:    #FFFFFF;
  --abi-alt:     #F2FAFC;   /* le cyan dilue, pour alterner les sections */
  --abi-blanc:   #FFFFFF;
  --abi-encre:   #16262B;
  --abi-encre-2: #55666C;
  --abi-filet:   #DCE6E9;
  --abi-bleu:    #13A5BF;   /* le cyan du logo : bandeau et bandes */
  --abi-teal:    #0A6B7C;   /* le meme cyan assombri : textes, liens, pied */
  --abi-teal-f:  #08535F;
  --abi-teal-c:  #47BDD1;
  --abi-nuit:    #0A6B7C;
  --abi-lime:    #E0E55E;
  --abi-ocre:    #E0E55E;
  --abi-ocre-txt: #616A0F;

  --abi-t-xs: 0.78rem;
  --abi-t-s:  0.88rem;
  --abi-t-m:  1rem;
  --abi-t-l:  1.2rem;
  --abi-t-xl: 1.44rem;
  --abi-t-2x: 1.728rem;
  --abi-t-3x: 2.074rem;
  --abi-t-4x: 2.488rem;
  --abi-t-5x: 2.986rem;

  --abi-u: 9px;
  --abi-g:   40px;   /* gouttiere entre colonnes, la meme partout */
  --abi-g2:  20px;   /* moitie, pour les grilles serrees */
  --abi-sec: 72px;   /* respiration verticale de chaque section, la meme partout */
  --abi-large: 1220px;
}

html { font-size: 17px; }

body.abi-on {
  margin: 0;
  background: var(--abi-fond);
  color: var(--abi-encre);
  font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--abi-t-m);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.abi-on h1, .abi-on h2, .abi-on h3 {
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

.abi-on p { margin: 0 0 calc(var(--abi-u) * 2); text-wrap: pretty; }
.abi-on a { color: inherit; text-decoration: none; }
.abi-on img { max-width: 100%; height: auto; display: block; }
.abi-on ul, .abi-on ol { list-style: none; margin: 0; padding: 0; }

.abi-on ::selection { background: var(--abi-ocre); color: #fff; }

.abi-in { width: min(100% - calc(var(--abi-u) * 5), var(--abi-large)); margin-inline: auto; }

.abi-skip { position: absolute; left: -9999px; background: var(--abi-teal); color: #fff; padding: var(--abi-u) calc(var(--abi-u) * 2); }
.abi-skip:focus { left: var(--abi-u); top: var(--abi-u); z-index: 99; }

/* Un seul style de libelle sur tout le site. La couleur dit le role :
   ocre = libelle de section, teal = rubrique cliquable. */
.abi-eyebrow, .abi-aussi-lib, .abi-redac-spe, .abi-arc-spe, .abi-pied-col h2 {
  font-family: Mulish, sans-serif;
  font-style: normal;
  font-size: var(--abi-t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abi-ocre-txt);
  margin: 0 0 calc(var(--abi-u) * 1.5);
}

.abi-on .abi-lien-fleche {
  font-size: var(--abi-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--abi-teal);
  white-space: nowrap;
  transition: color 150ms ease-out;
}
.abi-on .abi-lien-fleche::after { content: " \2192"; }
.abi-on .abi-lien-fleche:hover { color: var(--abi-teal-f); }

.abi-on .abi-rub {
  display: inline-block;
  font-size: var(--abi-t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abi-teal);
  transition: color 150ms ease-out;
}
.abi-on .abi-rub:hover { color: var(--abi-teal-f); }
.abi-on .abi-rub--clair { color: var(--abi-lime); }

.abi-meta {
  display: flex; gap: calc(var(--abi-u) * 1.5);
  font-size: var(--abi-t-xs);
  color: var(--abi-encre-2);
  margin: 0;
}
.abi-meta span::before { content: "· "; }

/* ---------------------------------------------------------------- En-tete */

.abi-tete { background: var(--abi-bleu); border-bottom: 1px solid rgba(8, 76, 88, .18); position: sticky; top: 0; z-index: 40; }
.abi-tete-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--abi-u) * 3);
  min-height: calc(var(--abi-u) * 8);
}
.abi-logo { max-height: calc(var(--abi-u) * 5); width: auto; }
.abi-wordmark { color: #FFFFFF; font-family: Lora, Georgia, serif; font-size: var(--abi-t-l); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.abi-nav-liste { display: flex; gap: calc(var(--abi-u) * 3.5); }
.abi-nav-liste a {
  font-size: var(--abi-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 700;
  padding-block: calc(var(--abi-u) * 1.5);
  position: relative;
  transition: color 150ms ease-out;
}
.abi-nav-liste a:hover { color: var(--abi-lime); }
.abi-nav-liste a::after {
  content: ""; position: absolute; bottom: var(--abi-u); left: 0;
  width: 0; height: 2px; background: var(--abi-lime);
  transition: width 300ms cubic-bezier(.4, 0, .2, 1);
}
.abi-nav-liste a:hover::after { width: 100%; }
.abi-burger, .abi-burger-case { display: none; }

/* ------------------------------------------------- La une en mosaique */

.abi-une { padding-block: var(--abi-sec); }

.abi-mosaique {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: var(--abi-g2);
  height: 552px;
}
.abi-mosaique-cote { display: grid; grid-template-rows: 1fr 1fr; gap: var(--abi-g2); min-height: 0; }

.abi-tuile { position: relative; overflow: hidden; height: 100%; background: var(--abi-nuit); }
.abi-tuile-lien { display: block; height: 100%; position: relative; }
.abi-tuile-img { display: block; height: 100%; }
.abi-tuile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); }
.abi-tuile:hover .abi-tuile-img img { transform: scale(1.04); }

.abi-tuile-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 107, 124, 0) 32%, rgba(8, 76, 88, .58) 66%, rgba(6, 55, 64, .92) 100%);
}
.abi-tuile-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(var(--abi-u) * 3.5);
  color: #fff;
}
.abi-tuile-rub {
  display: block;
  font-size: var(--abi-t-xs);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--abi-lime);
  margin-bottom: var(--abi-u);
}
.abi-tuile-titre {
  display: block;
  font-family: Lora, Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--abi-t-l);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
.abi-tuile--xl .abi-tuile-titre { font-size: var(--abi-t-3x); letter-spacing: -0.02em; max-width: 18ch; }

.abi-aussi {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; gap: var(--abi-g);
  margin-top: calc(var(--abi-u) * 3);
  padding-top: calc(var(--abi-u) * 2.5);
  border-top: 1px solid var(--abi-filet);
}
.abi-aussi-lib { white-space: nowrap; }
.abi-aussi ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abi-g); }
.abi-aussi li { position: relative; padding-left: calc(var(--abi-u) * 3); }
.abi-aussi li:first-child { padding-left: 0; }
.abi-aussi li:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 1px; background: var(--abi-filet);
}
.abi-aussi a { font-size: var(--abi-t-s); transition: color 150ms ease-out; }
.abi-aussi a:hover { color: var(--abi-teal); }

/* ------------------------------------------------------- Bande de saison */

.abi-saison { background: var(--abi-bleu); color: #EAF9FC; }
.abi-saison-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--abi-g);
  padding-block: var(--abi-sec);
  align-items: start;
}
.abi-saison-mois {
  font-family: Mulish, sans-serif; font-size: var(--abi-t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--abi-lime); margin: 0 0 calc(var(--abi-u) * 1.5);
}
.abi-saison-tete h2 { font-size: var(--abi-t-3x); color: #FFFFFF; margin-bottom: calc(var(--abi-u) * 2); }
.abi-on .abi-saison .abi-lien-fleche { color: var(--abi-lime); }
.abi-on .abi-saison .abi-lien-fleche:hover { color: #fff; }

.abi-saison-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--abi-g); }
.abi-saison-liste li { border-top: 1px solid rgba(255, 255, 255, .18); }
.abi-saison-liste a {
  display: block; padding-block: calc(var(--abi-u) * 2);
  font-family: Lora, Georgia, serif; font-size: var(--abi-t-m); line-height: 1.35;
  transition: color 150ms ease-out;
}
.abi-saison-liste a:hover { color: var(--abi-lime); }

/* ------------------------------------------------------------- Les univers */

.abi-univers { padding-block: var(--abi-sec); }
.abi-univers-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abi-g); }

.abi-univers-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; background: var(--abi-nuit); }
.abi-univers-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.4, 0, .2, 1); }
.abi-univers-photo:hover img { transform: scale(1.04); }
.abi-univers-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 107, 124, 0) 32%, rgba(8, 76, 88, .58) 66%, rgba(6, 55, 64, .92) 100%); }
.abi-univers-nom {
  position: absolute; left: calc(var(--abi-u) * 3); bottom: calc(var(--abi-u) * 2.5);
  font-family: Lora, Georgia, serif; font-size: var(--abi-t-3x); color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
.abi-univers-liste { margin-top: calc(var(--abi-u) * 2); }
.abi-univers-liste li { border-bottom: 1px solid var(--abi-filet); }
.abi-univers-liste li:last-child { border-bottom: 0; }
.abi-univers-liste a {
  display: block; padding-block: calc(var(--abi-u) * 1.75);
  font-family: Lora, Georgia, serif; font-size: var(--abi-t-m); line-height: 1.35;
  transition: color 150ms ease-out;
}
.abi-univers-liste a:hover { color: var(--abi-teal); }
.abi-univers-tete a { font-size: var(--abi-t-l); font-weight: 600; }

/* ---------------------------------------------------------------- Dossier */

.abi-dossier { background: var(--abi-alt); border-block: 1px solid var(--abi-filet); }
.abi-dossier-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abi-g);
  padding-block: var(--abi-sec);
  align-items: center;
}
.abi-dossier-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.abi-dossier-txt h2 { font-size: var(--abi-t-3x); margin-bottom: calc(var(--abi-u) * 3); }

.abi-dossier-liste li {
  display: grid; grid-template-columns: calc(var(--abi-u) * 6) minmax(0, 1fr);
  gap: calc(var(--abi-u) * 2);
  align-items: baseline;
  padding-block: calc(var(--abi-u) * 2);
  border-top: 1px solid var(--abi-filet);
}
.abi-num { font-family: Lora, Georgia, serif; font-size: var(--abi-t-l); color: var(--abi-ocre-txt); }
.abi-dossier-liste a { font-family: Lora, Georgia, serif; font-size: var(--abi-t-l); line-height: 1.3; transition: color 150ms ease-out; }
.abi-dossier-liste a:hover { color: var(--abi-teal); }

/* -------------------------------------------------------------- Redaction */

.abi-redac { padding-block: var(--abi-sec); }
.abi-redac h2 { font-size: var(--abi-t-3x); margin-bottom: calc(var(--abi-u) * 5); }
.abi-redac-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abi-g); }
/* Dans une page, le bloc vit dans la colonne de lecture : deux fiches par ligne. */
.abi-art-texte .abi-redac-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abi-art-texte .abi-redac-fiche h3 { font-size: var(--abi-t-m); }

.abi-mono {
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--abi-u) * 6); height: calc(var(--abi-u) * 6);
  border-radius: 50%;
  background: var(--abi-teal); color: #fff;
  font-family: Lora, Georgia, serif; font-size: var(--abi-t-l);
  margin-bottom: calc(var(--abi-u) * 2);
}
.abi-redac-fiche h3 { font-size: var(--abi-t-l); }
.abi-redac-spe { margin: calc(var(--abi-u) * 0.5) 0 var(--abi-u); }
.abi-redac-bio { font-size: var(--abi-t-s); color: var(--abi-encre-2); }

/* -------------------------------------------------------- Derniers guides */

.abi-derniers { background: var(--abi-alt); border-top: 1px solid var(--abi-filet); padding-block: var(--abi-sec); }
.abi-derniers-tete { margin-bottom: calc(var(--abi-u) * 4); }
.abi-derniers-tete h2 { font-size: var(--abi-t-3x); }
.abi-derniers-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--abi-g); }

.abi-ligne { padding-block: calc(var(--abi-u) * 2.5); border-top: 1px solid var(--abi-filet); }
.abi-ligne h3 { font-size: var(--abi-t-m); line-height: 1.35; margin: calc(var(--abi-u) * 0.5) 0 var(--abi-u); }
.abi-ligne h3 a { transition: color 150ms ease-out; }
.abi-ligne h3 a:hover { color: var(--abi-teal); }

/* ------------------------------------------------------ Cartes et archives */

.abi-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abi-g); }

.abi-carte-img { display: block; overflow: hidden; background: var(--abi-filet); }
.abi-carte-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 500ms cubic-bezier(.4, 0, .2, 1); }
.abi-carte:hover .abi-carte-img img { transform: scale(1.03); }
.abi-carte-txt { padding-top: calc(var(--abi-u) * 2); }
.abi-carte h3 { font-size: var(--abi-t-l); margin: calc(var(--abi-u) * 0.75) 0 var(--abi-u); }
.abi-carte h3 a { transition: color 150ms ease-out; }
.abi-carte h3 a:hover { color: var(--abi-teal); }
.abi-carte-chapo { font-size: var(--abi-t-s); color: var(--abi-encre-2); margin-bottom: var(--abi-u); }

/* La premiere carte d'une rubrique passe en pleine largeur : une grille parfaitement
   reguliere est ce qui fait « gabarit ». */
.abi-arc .abi-grille-3 > .abi-carte:first-child {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--abi-g);
  align-items: center;
  padding-bottom: calc(var(--abi-u) * 5);
  border-bottom: 1px solid var(--abi-filet);
}
.abi-arc .abi-grille-3 > .abi-carte:first-child .abi-carte-txt { padding-top: 0; }
.abi-arc .abi-grille-3 > .abi-carte:first-child h3 { font-size: var(--abi-t-3x); }
.abi-arc .abi-grille-3 > .abi-carte:first-child .abi-carte-chapo { font-size: var(--abi-t-m); }

.abi-arc-tete { background: var(--abi-alt); border-bottom: 1px solid var(--abi-filet); padding-block: calc(var(--abi-u) * 6); }
.abi-arc-tete h1 { font-size: var(--abi-t-4x); }
.abi-arc-desc { color: var(--abi-encre-2); max-width: 62ch; margin-top: calc(var(--abi-u) * 2); }
.abi-arc-spe { margin: var(--abi-u) 0 0; }
.abi-arc-compte { font-size: var(--abi-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--abi-encre-2); margin: calc(var(--abi-u) * 2) 0 0; }
.abi-arc { padding-block: var(--abi-sec); }

.abi-fil { display: flex; flex-wrap: wrap; gap: var(--abi-u); font-size: var(--abi-t-xs); color: var(--abi-encre-2); margin-bottom: calc(var(--abi-u) * 2); }
.abi-fil a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--abi-filet); }
.abi-fil a:hover { text-decoration-color: var(--abi-ocre); }

.abi-pagination { display: flex; flex-wrap: wrap; gap: var(--abi-u); margin-top: calc(var(--abi-u) * 6); font-size: var(--abi-t-s); }
.abi-pagination .page-numbers { padding: calc(var(--abi-u) * 0.75) calc(var(--abi-u) * 2); border: 1px solid var(--abi-filet); background: var(--abi-blanc); transition: border-color 150ms ease-out; }
.abi-pagination .page-numbers:hover { border-color: var(--abi-teal); }
.abi-pagination .current { background: var(--abi-teal); border-color: var(--abi-teal); color: #fff; }
.abi-vide { color: var(--abi-encre-2); }

/* ---------------------------------------------------------------- Article */

.abi-art-tete { background: var(--abi-alt); border-bottom: 1px solid var(--abi-filet); padding-block: calc(var(--abi-u) * 6); }

.abi-art-tete--photo {
  position: relative; border-bottom: 0;
  min-height: min(62vh, 540px);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--abi-u) * 8) calc(var(--abi-u) * 6);
  background: var(--abi-nuit);
}
.abi-art-fond { position: absolute; inset: 0; }
.abi-art-fond img { width: 100%; height: 100%; object-fit: cover; }
.abi-art-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 76, 88, .28) 0%, rgba(8, 76, 88, .55) 52%, rgba(11, 30, 28, .88) 100%); }
.abi-art-tete--photo .abi-art-tete-in { position: relative; color: #fff; }
.abi-art-tete--photo .abi-fil, .abi-art-tete--photo .abi-fil a { color: #C3D7DC; }
.abi-art-tete--photo h1 { color: #fff; text-shadow: 0 1px 22px rgba(0, 0, 0, .35); }
.abi-art-tete--photo .abi-art-signature { color: #C3D7DC; }

.abi-art-tete-in { max-width: 850px; }
.abi-art-tete h1 { font-size: var(--abi-t-5x); letter-spacing: -0.02em; margin: calc(var(--abi-u) * 1.5) 0 calc(var(--abi-u) * 2); }
.abi-art-signature { display: flex; flex-wrap: wrap; gap: calc(var(--abi-u) * 1.5); font-size: var(--abi-t-s); color: var(--abi-encre-2); margin: 0; }
.abi-art-signature a { font-weight: 700; }
.abi-art-signature span::before { content: "· "; }

.abi-art-corps { padding-block: calc(var(--abi-u) * 7); }
.abi-art-texte { max-width: 62ch; margin-inline: auto; font-size: 1.06rem; }
.abi-art-texte h2 { font-size: var(--abi-t-2x); margin: calc(var(--abi-u) * 5) 0 calc(var(--abi-u) * 2); }
.abi-art-texte h3 { font-size: var(--abi-t-xl); margin: calc(var(--abi-u) * 4) 0 calc(var(--abi-u) * 1.5); }
.abi-art-texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--abi-ocre); }
.abi-art-texte a:hover { color: var(--abi-teal); }
.abi-art-texte ul, .abi-art-texte ol { list-style: revert; padding-left: calc(var(--abi-u) * 3); margin-bottom: calc(var(--abi-u) * 2); }
.abi-art-texte li { margin-bottom: var(--abi-u); }
.abi-art-texte li::marker { color: var(--abi-ocre); }
.abi-art-texte blockquote { margin: calc(var(--abi-u) * 4) 0; padding-left: calc(var(--abi-u) * 3); border-left: 1px solid var(--abi-filet); font-family: Lora, Georgia, serif; font-style: italic; font-size: var(--abi-t-l); color: var(--abi-encre-2); }
.abi-art-texte table { width: 100%; border-collapse: collapse; margin: calc(var(--abi-u) * 4) 0; font-size: var(--abi-t-s); }
.abi-art-texte th { background: var(--abi-teal); color: #fff; text-align: left; }
.abi-art-texte th, .abi-art-texte td { padding: calc(var(--abi-u) * 1.25) calc(var(--abi-u) * 1.75); border: 1px solid var(--abi-filet); }
.abi-art-texte tbody tr:nth-child(even) { background: var(--abi-alt); }
.abi-art-texte figcaption { font-size: var(--abi-t-xs); color: var(--abi-encre-2); padding-top: var(--abi-u); }

.abi-art-auteur {
  max-width: 62ch; margin: calc(var(--abi-u) * 6) auto 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--abi-u) * 2.5);
  padding-top: calc(var(--abi-u) * 3);
  border-top: 2px solid var(--abi-encre);
}
.abi-art-auteur .abi-mono { margin-bottom: 0; }
.abi-art-auteur-nom { font-family: Lora, Georgia, serif; font-size: var(--abi-t-l); margin: 0 0 var(--abi-u); }
.abi-art-auteur-nom span { font-family: Mulish, sans-serif; font-size: var(--abi-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--abi-ocre-txt); }
.abi-art-auteur-bio { font-size: var(--abi-t-s); color: var(--abi-encre-2); }

.abi-art-suite { background: var(--abi-alt); border-top: 1px solid var(--abi-filet); padding-block: var(--abi-sec); }
.abi-art-suite h2 { font-size: var(--abi-t-2x); margin-bottom: calc(var(--abi-u) * 4); }

/* ------------------------------------------------------------------- Pied */

.abi-pied { background: var(--abi-teal); color: #CFE7EC; }
.abi-pied-in {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--abi-g);
  padding-block: calc(var(--abi-u) * 8) calc(var(--abi-u) * 5);
}
.abi-pied-nom { font-family: Lora, Georgia, serif; font-size: var(--abi-t-xl); color: #fff; margin-bottom: calc(var(--abi-u) * 2); }
.abi-pied-ligne { font-size: var(--abi-t-s); max-width: 46ch; margin: 0; }
.abi-pied-col h2 { color: var(--abi-lime); }
.abi-pied-col li { margin-bottom: calc(var(--abi-u) * 1.25); }
.abi-pied-col a { font-size: var(--abi-t-s); transition: color 150ms ease-out; }
.abi-pied-col a:hover { color: #fff; }
/* le pied prolonge la teinte de l'en-tete, en profondeur */
.abi-pied-bas {
  width: min(100% - calc(var(--abi-u) * 5), var(--abi-large));
  margin: 0 auto; padding-block: calc(var(--abi-u) * 3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--abi-t-xs); color: #9CC6CF;
}

.abi-on a:focus-visible, .abi-on button:focus-visible, .abi-burger:focus-visible { outline: 2px solid var(--abi-ocre); outline-offset: 3px; }

/* ------------------------------------------------------------ Adaptations */

@media (max-width: 1040px) {
  .abi-mosaique { grid-template-columns: minmax(0, 1fr); height: auto; }
  .abi-mosaique-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .abi-tuile--xl { aspect-ratio: 16 / 10; }
  .abi-tuile--m { aspect-ratio: 4 / 3; }
  .abi-univers-in, .abi-dossier-in, .abi-saison-in { grid-template-columns: minmax(0, 1fr); gap: var(--abi-g); }
  .abi-redac-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abi-aussi { grid-template-columns: minmax(0, 1fr); gap: calc(var(--abi-u) * 1.5); }
  .abi-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abi-pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html { font-size: 16px; }

  .abi-burger { display: block; cursor: pointer; padding: var(--abi-u); }
  .abi-burger span, .abi-burger span::before, .abi-burger span::after { display: block; width: 22px; height: 2px; background: #FFFFFF; content: ""; }
  .abi-burger span::before { transform: translateY(-7px); }
  .abi-burger span::after { transform: translateY(5px); }
  .abi-tete-in { flex-wrap: wrap; }
  .abi-nav { display: none; width: 100%; }
  .abi-burger-case:checked ~ .abi-nav { display: block; }
  .abi-nav-liste { flex-direction: column; gap: 0; padding-bottom: calc(var(--abi-u) * 2); }
  .abi-nav-liste li { border-top: 1px solid var(--abi-filet); }
  .abi-nav-liste a { display: block; padding-block: calc(var(--abi-u) * 2); }
  .abi-nav-liste a::after { display: none; }

  .abi-mosaique-cote { grid-template-columns: minmax(0, 1fr); }
  .abi-aussi { grid-template-columns: minmax(0, 1fr); gap: var(--abi-u); }
  .abi-aussi ul { grid-template-columns: minmax(0, 1fr); gap: calc(var(--abi-u) * 1.5); }
  .abi-aussi li { padding-left: 0; }
  .abi-aussi li:not(:first-child)::before { display: none; }
  .abi-saison-liste, .abi-derniers-liste, .abi-grille-3, .abi-redac-grille, .abi-pied-in { grid-template-columns: minmax(0, 1fr); }
  .abi-arc .abi-grille-3 > .abi-carte:first-child { grid-template-columns: minmax(0, 1fr); }
  .abi-arc .abi-grille-3 > .abi-carte:first-child h3 { font-size: var(--abi-t-2x); }
  .abi-arc .abi-grille-3 > .abi-carte:first-child .abi-carte-txt { padding-top: calc(var(--abi-u) * 2); }
  .abi-tuile--xl .abi-tuile-titre { font-size: var(--abi-t-xl); }
  .abi-art-tete h1 { font-size: var(--abi-t-3x); }
  .abi-univers-nom, .abi-saison-tete h2 { font-size: var(--abi-t-2x); }
}

@media (prefers-reduced-motion: reduce) {
  .abi-on * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}