/* Polices auto-hébergées : aucune requête vers un tiers. */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
  src: url('polices/amiri-arabic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('polices/amiri-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('polices/fraunces-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('polices/karla-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('polices/karla-latin-600.woff2') format('woff2');
}

/* ============================================================================
   Mosquée AsSalam — Maisons-Alfort
   Feuille de style unique, pensée d'abord pour le téléphone.
   Palette ivoire / bleu profond / sable. Aucune dépendance externe.
   ========================================================================== */

/* ------------------------------------------------------------------ jetons */
:root {
  /* Couleurs */
  --ivoire: #fbf9f4;
  --blanc: #ffffff;
  --encre: #171712;
  --gris: #5c5a52;
  --primaire: #123a63;
  --primaire-clair: #1a4b7a;
  --primaire-pale: #edf2f9;
  --sable: #b8912f;
  --sable-pale: #f4ecdb;
  --filet: #e6dfd0;
  --ombre-douce: 0 1px 2px rgba(23, 23, 18, .04), 0 10px 30px -20px rgba(23, 23, 18, .25);

  /* Typographie */
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabe: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --t-xs: .78rem;
  --t-s: .9rem;
  --t-m: 1.0625rem;
  --t-l: 1.2rem;
  --t-xl: 1.4rem;
  --t-2xl: clamp(1.55rem, 1.15rem + 1.7vw, 2.15rem);
  --t-3xl: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  --t-4xl: clamp(2.5rem, 1.7rem + 4.4vw, 4.2rem);

  /* Espaces et formes */
  --e1: .25rem; --e2: .5rem; --e3: 1rem; --e4: 1.5rem;
  --e5: 2rem; --e6: 2.5rem; --e7: clamp(3rem, 5.5vw, 4rem);
  --large: 70rem;
  --lecture: 40rem;
  --r: 12px;
  --r-petit: 8px;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-m);
  line-height: 1.65;
  padding-bottom: 4.5rem; /* place pour la barre d'onglets du téléphone */
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--primaire);
  margin: 0 0 var(--e3);
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-2xl); margin-bottom: var(--e3); }
h3 { font-size: var(--t-l); letter-spacing: -.01em; }
p { margin: 0 0 var(--e3); }
p:last-child, ul:last-child, figure:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--e3); padding-left: 1.1rem; }
li { margin-bottom: var(--e2); }
img { max-width: 100%; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e5) 0; }
strong { font-weight: 600; }

a { color: var(--primaire); text-decoration: underline; text-decoration-color: var(--sable);
  text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--sable); outline-offset: 2px; border-radius: 4px; }

.arabe, [lang="ar"] {
  font-family: var(--arabe); direction: rtl; unicode-bidi: isolate;
  font-size: 1.15em; line-height: 1.9;
}

/* Le contenu occupe la largeur, mais reste lisible. */
main { display: block; max-width: var(--large); margin: 0 auto; padding: 0 1.25rem; }

/* --------------------------------------------------------------- coutures */
.lien-evitement {
  position: absolute; left: -100vw; top: 0; z-index: 20;
  background: var(--primaire); color: var(--ivoire); padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-petit) 0; text-decoration: none;
}
.lien-evitement:focus { left: 0; }

.discret { font-size: var(--t-s); color: var(--gris); }
.discret-titre > h2 { font-size: var(--t-l); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e4) 0; }
.code {
  font-family: var(--titre); font-size: var(--t-3xl); color: var(--sable);
  margin: 0 0 var(--e3);
}

/* --------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .68rem 1.15rem;
  border: 1px solid var(--primaire); border-radius: 999px;
  background: var(--primaire); color: var(--ivoire);
  font-family: var(--texte); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.bouton:hover { background: var(--primaire-clair); border-color: var(--primaire-clair); }
.bouton:active { transform: translateY(1px); }
.bouton--ligne { background: transparent; color: var(--primaire); border-color: var(--filet); }
.bouton--ligne:hover { background: var(--primaire-pale); border-color: var(--primaire); }
.bouton--sable { background: var(--sable); border-color: var(--sable); color: #171712; }
.bouton--sable:hover { background: #cfa53c; border-color: #cfa53c; }

/* --------------------------------------------------------------- en-tête */
.en-tete {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 249, 244, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.en-tete__interieur {
  max-width: var(--large); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: var(--e3);
}
.marque { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--primaire); }
.marque img { flex: none; width: 44px; height: auto; }
.marque svg path { fill: var(--primaire); }
.marque__bloc { display: block; }
.marque__nom { display: block; font-family: var(--titre); font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.marque__assoc {
  display: block; font-size: .66rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris);
}
.en-tete__outils { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.en-tete__outils .bouton { min-height: 38px; padding: .45rem .85rem; font-size: .88rem; }
/* Sur téléphone, la barre d'onglets suffit : l'en-tête reste au menu. */
@media (max-width: 47.99rem) { .en-tete__outils { display: none; } }

nav.principale { display: none; }
nav.principale ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
nav.principale li { margin: 0; }
nav.principale a {
  display: block; padding: .45rem .7rem; border-radius: var(--r-petit);
  font-size: .95rem; text-decoration: none; color: var(--encre);
  transition: background-color .18s ease, color .18s ease;
}
nav.principale a:hover { background: var(--primaire-pale); color: var(--primaire); }
nav.principale a[aria-current="page"] { color: var(--primaire); font-weight: 600; }

/* Menu du téléphone, à base de <details> : il fonctionne sans script. */
.menu-mobile { position: relative; margin-left: auto; }
.menu-mobile summary {
  display: flex; align-items: center; gap: .45rem;
  min-height: 42px; padding: .5rem .9rem; cursor: pointer;
  border: 1px solid var(--filet); border-radius: 999px;
  font-size: .92rem; font-weight: 600; color: var(--primaire);
  list-style: none;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--sable);
  border-bottom: 2px solid var(--sable); transform: rotate(45deg) translateY(-2px);
}
.menu-mobile[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu-mobile nav {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 15;
  min-width: 15rem; padding: .5rem;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--r); box-shadow: var(--ombre-douce);
}
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li { margin: 0; }
.menu-mobile a {
  display: block; padding: .6rem .7rem; border-radius: var(--r-petit);
  text-decoration: none; color: var(--encre); font-size: .98rem;
}
.menu-mobile a:hover { background: var(--primaire-pale); color: var(--primaire); }

/* ---------------------------------------------------------------- héros */
.heros {
  position: relative; overflow: hidden;
  background: var(--primaire); color: var(--ivoire);
  padding: var(--e6) 0 var(--e6);
  margin-bottom: var(--e5);
}
.heros::before {
  content: ""; position: absolute; inset: 0;
  background: url(motif.svg) repeat top left / 72px 72px;
  opacity: .05; pointer-events: none;
}
.heros__interieur {
  position: relative; max-width: var(--large); margin: 0 auto; padding: 0 1.25rem;
  display: grid; gap: var(--e5);
}
.heros h1 { color: var(--ivoire); margin-bottom: var(--e3); }
.heros__marque {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--e3);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sable);
}
.heros__arabe {
  font-family: var(--arabe); direction: rtl; font-size: 1.6rem;
  color: var(--sable); margin: 0 0 var(--e2); line-height: 1.5;
}
.heros__sous-titre {
  font-size: var(--t-l); color: rgba(251, 249, 244, .84); max-width: 34rem;
  margin-bottom: var(--e4);
}
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.heros .bouton { background: var(--sable); border-color: var(--sable); color: #171712; }
.heros .bouton:hover { background: #cfa53c; border-color: #cfa53c; }
.heros .bouton--ligne { background: transparent; color: var(--ivoire); border-color: rgba(251, 249, 244, .45); }
.heros .bouton--ligne:hover { background: rgba(251, 249, 244, .12); border-color: var(--ivoire); }

/* Pastille « en direct », affichée seulement si le statut est vérifié. */
.pastille {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(184, 145, 47, .18); color: var(--sable);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.pastille::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c4553b;
}
.pastille--calme::before { background: var(--sable); }

/* ------------------------------------------------------ horaires du jour */
.horaires-jour {
  background: var(--blanc); color: var(--encre);
  border-radius: var(--r); padding: var(--e4);
  box-shadow: var(--ombre-douce);
}
.horaires-jour__etiquette {
  margin: 0 0 var(--e1); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sable); font-weight: 600;
}
.horaires-jour__prochaine {
  font-family: var(--titre); font-size: var(--t-2xl); font-weight: 600;
  line-height: 1.1; color: var(--primaire); margin: 0 0 var(--e3);
}
.horaires-jour__prochaine:empty { display: none; }
.horaires-jour__liste {
  list-style: none; margin: 0; padding: var(--e3) 0 0;
  border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem var(--e3);
}
.horaires-jour__liste li {
  display: flex; justify-content: space-between; gap: var(--e2); margin: 0;
  font-size: .95rem; color: var(--gris);
}
.horaires-jour__liste li strong { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.horaires-jour__liste li.est-prochaine {
  color: var(--primaire); font-weight: 600;
  grid-column: 1 / -1; padding: .35rem .6rem; margin: 0 0 var(--e2);
  background: var(--primaire-pale); border-radius: var(--r-petit);
}
.horaires-jour__liste li.est-prochaine strong { color: var(--primaire); }
.horaires-jour__source { margin: var(--e3) 0 0; font-size: var(--t-xs); color: var(--gris); }

/* ------------------------------------------------------- bandeau accueil */
.horaires-bandeau {
  background: var(--primaire-pale); border: 1px solid var(--filet);
  border-radius: var(--r); padding: var(--e3) var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  font-size: var(--t-s); color: var(--gris);
}
.horaires-bandeau strong { color: var(--primaire); }

/* -------------------------------------------------------------- sections */
.section { padding: var(--e6) 0; border-top: 1px solid var(--filet); }
.section:first-child { border-top: 0; }
.section > h2 { position: relative; padding-top: 1.1rem; }
.section > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.25rem; height: 2px; background: var(--sable);
}
.section--chapeau { padding-top: var(--e5); }
.section--chapeau > p:first-of-type {
  font-family: var(--titre); font-size: var(--t-xl); line-height: 1.45;
  color: var(--primaire); max-width: var(--lecture);
}

/* Grilles */
.grille { display: grid; gap: var(--e4); }
.grille--deux, .grille--trois, .grille--deux-asymetrique { grid-template-columns: 1fr; }
.grille--quatre { grid-template-columns: 1fr; }

/* Cartes */
.carte {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r);
  padding: var(--e4);
}
.carte > :last-child { margin-bottom: 0; }
.carte h3 { margin-bottom: var(--e2); }
.carte--teinte { background: var(--primaire-pale); border-color: transparent; }
.carte__meta {
  margin: 0 0 var(--e2); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sable); font-weight: 600;
}
.carte--lien { display: block; color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.carte--lien:hover { border-color: var(--sable); box-shadow: var(--ombre-douce); transform: translateY(-2px); }

/* Entrée d'agenda : le jour détaché à gauche. */
.carte--date { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: start; }
.date-bloc {
  display: grid; place-items: center; gap: 0;
  min-width: 3.6rem; padding: .5rem .6rem;
  background: var(--primaire); color: var(--ivoire); border-radius: var(--r-petit);
  font-family: var(--titre); line-height: 1.05;
}
.date-bloc span { display: block; font-size: 1.35rem; font-weight: 600; }
.date-bloc small { display: block; font-family: var(--texte); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------- appels */
.appel {
  display: grid; gap: var(--e4);
  background: var(--primaire); color: var(--ivoire);
  border-radius: var(--r); padding: var(--e5);
}
.appel h2 { color: var(--ivoire); }
.appel p { color: rgba(251, 249, 244, .88); max-width: 52ch; }
.appel .bouton { background: var(--sable); border-color: var(--sable); color: #171712; }
.appel__action { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ------------------------------------------------------- illustrations */
.figure { margin: 0 0 var(--e4); }
.figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); box-shadow: var(--ombre-douce);
}
.figure--large img { aspect-ratio: 16 / 9; object-fit: cover; }
.figure figcaption { margin-top: var(--e3); font-size: var(--t-s); color: var(--gris); }

.bloc-illustre { display: grid; gap: var(--e4); align-items: center; }
.bloc-illustre .figure { margin: 0; order: -1; }
.bloc-illustre .figure img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --------------------------------------------------- chargement à la demande */
.chargeur {
  background: var(--primaire-pale); border: 1px dashed #ccd7e4;
  border-radius: var(--r); padding: var(--e4);
  display: grid; gap: var(--e3); justify-items: start;
}
.chargeur p { margin: 0; max-width: var(--lecture); font-size: var(--t-s); color: var(--gris); }
.chargeur[data-etat="charge"] { padding: 0; border: 0; background: none; }
.chargeur iframe { display: block; width: 100%; border: 1px solid var(--filet); border-radius: var(--r); background: var(--blanc); }
.chargeur__etat { font-size: var(--t-s); color: var(--gris); }

  /* Fenêtre d'un service tiers : format compact et centré, tenu comme un module.
     Le mur d'horaires Mawaqit est conçu pour une colonne étroite ; étalé sur
     toute la largeur de la page, il perd sa lisibilité. */
  .fenetre { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ listes et tableaux */
.entrees { list-style: none; margin: 0; padding: 0; }
.entrees li {
  padding: var(--e3) 0; margin: 0;
  border-bottom: 1px solid var(--filet);
}
.entrees li:first-child { padding-top: 0; }
.entrees li:last-child { border-bottom: 0; padding-bottom: 0; }
.entrees h3 { margin-bottom: var(--e2); }

table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e4); }
caption {
  text-align: left; font-size: var(--t-s); color: var(--gris);
  padding-bottom: var(--e3); caption-side: top;
}
th, td { padding: .72rem .5rem; text-align: left; border-bottom: 1px solid var(--filet); }
thead th {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sable); font-weight: 600;
}
tbody th { font-weight: 600; color: var(--primaire); }
td { font-variant-numeric: tabular-nums; }
tbody tr.est-prochaine { background: var(--primaire-pale); }

/* ---------------------------------------------------------------- avis (aperçu) */
.apercu {
  background: var(--sable-pale); border: 1px solid #e5d3a8;
  border-radius: var(--r); padding: var(--e3) var(--e4);
  margin: var(--e4) 0;
  font-size: var(--t-s); color: #5a4a1f;
}
.avis {
  border-left: 2px solid var(--sable); padding-left: var(--e3);
  color: var(--gris); font-size: var(--t-s);
}

/* ------------------------------------------------------------------ pied */
.pied {
  position: relative; margin-top: var(--e7); padding: var(--e6) 0 var(--e5);
  background: var(--blanc); border-top: 1px solid var(--filet);
}
.pied::before {
  content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: var(--ivoire);
  background-image: url(separateur.svg); background-repeat: no-repeat;
  background-position: center; background-size: contain;
}
.pied__interieur { max-width: var(--large); margin: 0 auto; padding: 0 1.25rem;
  display: grid; gap: var(--e5); }
.pied h2 { font-size: var(--t-l); margin-bottom: var(--e3); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied address, .pied p { font-size: var(--t-s); color: var(--gris); }
.pied a { text-decoration-color: transparent; }
.pied a:hover { text-decoration-color: var(--sable); }
.pied__note {
  grid-column: 1 / -1; margin: 0; padding-top: var(--e4);
  border-top: 1px solid var(--filet); font-size: var(--t-xs); color: var(--gris);
}

/* ------------------------------------------- barre d'onglets du téléphone */
.barre-onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(251, 249, 244, .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.barre-onglets a {
  display: grid; justify-items: center; gap: 2px; padding: .5rem .15rem .45rem;
  min-width: 0;
  text-decoration: none; color: var(--gris); font-size: .62rem; line-height: 1.25;
  letter-spacing: -.01em; text-align: center;
}
.barre-onglets span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.barre-onglets svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barre-onglets a[aria-current="page"], .barre-onglets a.actif { color: var(--primaire); }
.barre-onglets a[aria-current="page"] svg, .barre-onglets a.actif svg { stroke: var(--sable); }

/* ============================ grands écrans ============================== */
@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .barre-onglets { display: none; }
  .grille--deux { grid-template-columns: repeat(2, 1fr); }
  .grille--trois { grid-template-columns: repeat(3, 1fr); }
  .grille--quatre { grid-template-columns: repeat(4, 1fr); }
  .grille--deux-asymetrique { grid-template-columns: 1.3fr .7fr; align-items: start; }
  .appel { grid-template-columns: 1fr auto; align-items: center; }
  .bloc-illustre { grid-template-columns: 1fr 1fr; gap: var(--e6); }
  .bloc-illustre--inverse .bloc-illustre__texte { order: 2; }
  .bloc-illustre--inverse .figure { order: 1; }
  .horaires-jour__liste { grid-template-columns: repeat(2, 1fr); }
  .pied__interieur { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 60rem) {
  .heros { padding: var(--e7) 0; }
  .heros__interieur { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--e6); }
  nav.principale { display: block; margin-left: var(--e3); }
  .menu-mobile { display: none; }
  .section { padding: var(--e7) 0; }
}

/* ------------------------------------------------------------- impression */
@media print {
  .en-tete, .barre-onglets, .pied__note, .apercu, .chargeur { display: none; }
  body { background: #fff; padding: 0; }
  .heros { background: #fff; color: #000; padding: 0 0 1rem; }
  .heros h1, .heros__marque, .heros__arabe, .heros__sous-titre { color: #000; }
  .heros::before { display: none; }
  .horaires-jour { box-shadow: none; border: 1px solid #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------ formulaires */
.formulaire { display: grid; gap: var(--e3); max-width: var(--lecture); }
.formulaire__champ { margin: 0; }
.formulaire label { display: block; margin-bottom: .3rem; font-size: var(--t-s); font-weight: 600; color: var(--primaire); }
.formulaire input[type="text"], .formulaire input[type="email"],
.formulaire select, .formulaire textarea {
  width: 100%; padding: .7rem .8rem;
  font-family: var(--texte); font-size: var(--t-m); color: var(--encre);
  background: var(--ivoire); border: 1px solid var(--filet); border-radius: var(--r-petit);
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  border-color: var(--primaire); background: var(--blanc);
}
.formulaire textarea { resize: vertical; min-height: 9rem; }
.formulaire .bouton { justify-self: start; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__etat { margin: 0; font-size: var(--t-s); color: var(--gris); }
.formulaire__etat a { color: var(--primaire); }
.carte__avance { color: var(--primaire-clair); font-family: var(--titre); font-size: var(--t-l); margin-bottom: var(--e2); }

/* Marque et blason */
.pied__blason { display: block; width: 104px; height: auto; margin-bottom: var(--e3); }
.heros__blason { display: block; width: 220px; height: auto; margin: 0 0 var(--e4); }
.heros--centre .heros__interieur { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.heros--centre .heros__marque { justify-content: center; }
.heros--centre .heros__sous-titre { margin-left: auto; margin-right: auto; }
.heros--centre .heros__actions { justify-content: center; }
.heros__arabe { text-align: center; }