/* ===========================================================
   La bande libre et sa grille de carreaux.

   Un carreau est carré : sa hauteur vaut la largeur d'une colonne.
   C'est « 100cqw / 12 » qui le garantit — la largeur de la piste,
   divisée par le nombre de colonnes — donc une photo posée sur
   3 × 3 carreaux est carrée à toutes les tailles d'écran.

   Les couleurs et les polices viennent des jetons du thème
   (ombre.css, lumiere.css) : une bande ne connaît pas ses couleurs,
   elle connaît son rôle. La face de la page décide du reste.
   =========================================================== */

.ma-bande {
  --colonnes: 12;
  position: relative;
  width: 100%;

  /* Par défaut, une bande hérite des couleurs de la page. */
  --bande-encre: inherit;
  --bande-second: var(--brume, var(--gris, #65525A));
  --bande-accent: var(--lilas, var(--bordeaux, #921C54));
  --bande-plein: var(--vin, var(--bordeaux, #921C54));
  --bande-sur-plein: var(--os, #EFE6E9);
  --bande-trait: var(--trait, var(--sable, #E6D9C3));
  --bande-papier: var(--crypte, var(--papier, transparent));
  --bande-papier-survol: color-mix(in srgb, var(--bande-papier) 88%, currentColor);
}

.ma-bande--aeree { padding-block: clamp(2.5rem, 5vw, 4.6rem); }

.ma-bande--noir {
  background: var(--nuit, #0B0809);
  color: var(--os, #EFE6E9);
  --bande-second: var(--brume, #B3A3AC);
  --bande-accent: var(--lilas, #D98BB5);
  --bande-plein: var(--vin, #6B1F4A);
  --bande-sur-plein: var(--os, #EFE6E9);
}

.ma-bande--creme {
  background: var(--creme, #F8F2E6);
  color: var(--encre, #2B1A20);
  --bande-second: var(--gris, #65525A);
  --bande-accent: var(--bordeaux, #921C54);
  --bande-plein: var(--bordeaux, #921C54);
  --bande-sur-plein: var(--creme, #F8F2E6);
}

.ma-bande--bordeaux {
  background: var(--bordeaux, #921C54);
  color: var(--creme, #F8F2E6);
  --bande-second: var(--rose, #F3C9D9);
  --bande-accent: var(--rose, #F3C9D9);
  --bande-plein: var(--creme, #F8F2E6);
  --bande-sur-plein: var(--bordeaux, #921C54);
}

.ma-piste {
  container-type: inline-size;
  width: var(--wrap, min(1180px, 100% - 3rem));
  margin-inline: auto;
}

/* Une ligne fait la hauteur d'un carreau — au moins. Si un texte a besoin de
   plus de place (écran étroit, police plus grande, texte rallongé), la ligne
   s'étire et pousse la suite : rien ne déborde, rien n'est coupé. Les photos,
   elles, ne tirent jamais sur la ligne (« contain: size » plus bas) : elles
   restent à la taille des carreaux qu'on leur a donnés. */
.ma-grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  grid-template-rows: repeat(var(--lignes-ordi, 1), minmax(var(--carreau), auto));
  grid-auto-rows: minmax(var(--carreau), auto);
  --carreau: calc(100cqw / var(--colonnes));
}

.ma-carreau {
  grid-column: var(--c) / span var(--w);
  grid-row: var(--l) / span var(--h);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(.3rem, .9cqw, .9rem);
}

.ma-carreau--v-centre { justify-content: center; }
.ma-carreau--v-bas { justify-content: flex-end; }
.ma-carreau--photo { contain: size; }

/* La porte vers l'autre face s'accroche au bord de la bande : on lui fait de la place. */
.ma-bande--porte .ma-piste { padding-inline: var(--porte-gauche, 0px) var(--porte-droite, 0px); }

/* ---------- Téléphone : la seconde mise en page, celle qui a été dessinée ---------- */

@media (max-width: 780px) {
  .ma-bande { --colonnes: 4; }
  .ma-grille { grid-template-rows: repeat(var(--lignes-tel, 1), minmax(var(--carreau), auto)); }
  .ma-carreau {
    grid-column: var(--tc) / span var(--tw);
    grid-row: var(--tl) / span var(--th);
  }

  /* Sur téléphone tout s'empile : centrer un texte dans son bloc n'y dessine
     plus une composition, seulement un vide au-dessus. On cale en haut. */
  .ma-carreau--v-centre,
  .ma-carreau--v-bas { justify-content: flex-start; }
}

/* ===========================================================
   Le contenu des blocs
   =========================================================== */

.ma-aligne--centre { text-align: center; }
.ma-aligne--droite { text-align: right; }

/* ---------- Titre ---------- */

.ma-titre {
  margin: 0;
  font-family: var(--display, Georgia, serif);
  font-weight: 500;
  line-height: 1;
  text-wrap: balance;
  color: var(--bande-titre, inherit);
}

.ma-titre em { font-style: italic; color: var(--bande-accent); }
.ma-titre--geant { font-size: clamp(3.2rem, 8cqw, 6rem); letter-spacing: -.01em; }
.ma-titre--geant em { display: block; padding-left: .5em; }
.ma-titre--grand { font-size: clamp(2.6rem, 5.5cqw, 4.6rem); }
.ma-titre--moyen { font-size: clamp(1.6rem, 3cqw, 2.1rem); line-height: 1.1; }

/* Le petit n'est pas un titre : c'est le sur-titre posé au-dessus d'un titre. */
.ma-titre--petit {
  font: 400 .8rem/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bande-accent);
}

/* ---------- Texte ---------- */

.ma-texte { font-family: var(--body, Georgia, serif); max-width: 62ch; }
.ma-texte p { margin: 0 0 1em; text-wrap: pretty; }
.ma-texte > :last-child { margin-bottom: 0; }
.ma-texte a { color: var(--bande-accent); text-underline-offset: .2em; }
.ma-texte ul { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .35rem; color: var(--bande-second); }
.ma-texte ul li::before { content: "✦ "; color: var(--bande-accent); }
.ma-texte--grand { font-size: clamp(1.15rem, 1.9cqw, 1.35rem); line-height: 1.5; max-width: 40ch; }
.ma-texte--petit { font-size: 1.04rem; color: var(--bande-second); }
.ma-texte.ma-aligne--centre { margin-inline: auto; }
.ma-texte.ma-aligne--droite { margin-left: auto; }

/* ---------- Photo ---------- */

.ma-figure {
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.ma-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.ma-photo--arrondi { border-radius: 6px; }
.ma-photo--arche { border-radius: 999px 999px 4px 4px; }
.ma-photo--rond { border-radius: 50%; }

.ma-figure figcaption {
  flex: none;
  font-family: var(--body, Georgia, serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--bande-second);
}

/* ---------- Bouton ----------
   C'est le bouton du thème (« .btn ») : mêmes lettres, même rondeur. La bande
   ne change que ses couleurs, pour qu'il reste lisible sur son fond. */

.ma-zone-bouton { display: flex; }
.ma-zone-bouton.ma-aligne--centre { justify-content: center; }
.ma-zone-bouton.ma-aligne--droite { justify-content: flex-end; }

.ma-bouton.btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }

.ma-bouton--lien {
  font-family: var(--body, Georgia, serif);
  font-style: italic;
  color: var(--bande-accent);
  text-underline-offset: .25em;
}

.ma-bouton--lien::after { content: " →"; }

/* ---------- Carte ---------- */

.ma-carte {
  display: grid;
  gap: .5rem;
  align-content: start;
  height: 100%;
  padding: 1.8rem;
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}

.ma-carte > span { display: block; }
.ma-carte-surtitre { font-style: italic; color: var(--bande-accent); font-size: 1.02rem; }
.ma-carte-titre { font: 1.45rem/1.15 var(--display, Georgia, serif); color: var(--bande-titre, inherit); }
.ma-carte-texte { color: var(--bande-second); font-size: 1.04rem; line-height: 1.5; }
.ma-carte-go { font-style: italic; color: var(--bande-accent); margin-top: .4rem; }
.ma-carte-go::after { content: " →"; }
a.ma-carte:hover .ma-carte-go { text-decoration: underline; text-underline-offset: .25em; }

.ma-carte--simple { padding: 0; }
.ma-carte--cadre { border: 1px solid var(--bande-trait); background: var(--bande-papier); }
a.ma-carte--cadre:hover { background: var(--bande-papier-survol); }

.ma-carte--sombre { background: var(--encre, #2B1A20); color: var(--creme, #F8F2E6); }
.ma-carte--sombre .ma-carte-titre,
.ma-carte--sombre .ma-carte-go,
.ma-carte--sombre .ma-carte-surtitre { color: var(--rose, #F3C9D9); }
.ma-carte--sombre .ma-carte-texte { color: #D9C9CF; }
a.ma-carte--sombre:hover { background: #1c1015; }

/* L'étape : le sur-titre devient un grand chiffre. */
.ma-carte--etape { padding: 0; }
.ma-carte--etape .ma-carte-surtitre { font: 3.4rem/1 var(--display, Georgia, serif); font-style: normal; color: inherit; opacity: .6; }
.ma-carte--etape .ma-carte-texte { color: inherit; font-size: 1.1rem; }

/* ---------- Filet ---------- */

.ma-filet {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .25;
}

/* ---------- Les listes du site posées sur la grille ----------
   Elles gardent le balisage des sections d'origine, donc leurs styles. */

.ma-carreau--questions .faq { max-width: none; }
.ma-carreau--avis .love blockquote:last-child { margin-bottom: 0; }

/* ---------- Un carreau pas encore rempli (jamais visible en ligne) ---------- */

.ma-carreau-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px dashed currentColor;
  border-radius: 5px;
  opacity: .45;
  font-family: var(--body, Georgia, serif);
  font-size: .85rem;
  text-align: center;
  padding: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .ma-bouton { transition-duration: .01ms; }
}

/* ---------------------------------------------------------------
   Une carte sans adresse n'a pas de flèche : elle ne promet pas un clic.
   --------------------------------------------------------------- */
.ma-carte-go--sans-lien::after,
.ma-carte-go:empty::after { content: none; }

/* ---------------------------------------------------------------
   Les formulaires
   Des champs larges, des étiquettes au-dessus, des cibles d'au moins
   44 px : on remplit ça sur un téléphone, souvent debout.
   --------------------------------------------------------------- */
.ma-form { display: grid; gap: 1.15rem; max-width: 44rem; color: var(--bande-encre, inherit); }
.ma-form-champ { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ma-form-champ > label,
.ma-form-champ > legend { font-size: 1.02rem; color: var(--bande-titre, inherit); padding: 0; margin-bottom: .35rem; }
.ma-form-requis { color: var(--bande-accent); }
.ma-form-aide { font-size: .95rem; font-style: italic; color: var(--bande-second); margin-top: -.35rem; }

.ma-form input[type="text"],
.ma-form input[type="email"],
.ma-form input[type="tel"],
.ma-form input[type="number"],
.ma-form input[type="date"],
.ma-form input[type="time"],
.ma-form textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 10px;
  background: var(--bande-papier);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
}
.ma-form textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.ma-form input:focus-visible,
.ma-form textarea:focus-visible { outline: 2px solid var(--bande-accent); outline-offset: 1px; border-color: var(--bande-accent); }
.ma-form ::placeholder { color: var(--bande-second); opacity: .85; }

.ma-form-choix-liste { display: grid; gap: .5rem; }
.ma-form-choix { display: flex; gap: .7rem; align-items: flex-start; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--bande-trait); border-radius: 10px; background: var(--bande-papier); cursor: pointer; line-height: 1.4; }
.ma-form-choix:has(input:checked) { border-color: var(--bande-accent); }
.ma-form-choix input { flex: none; width: 1.2rem; height: 1.2rem; margin: .12rem 0 0; accent-color: var(--bande-plein); }
.ma-form-choix a { color: var(--bande-accent); }
.ma-form-champ--accord .ma-form-choix { border-style: dashed; }

.ma-form-champ--erreur input,
.ma-form-champ--erreur textarea,
.ma-form-champ--erreur .ma-form-choix { border-color: #B3261E; }
.ma-form-alerte { padding: .9rem 1.1rem; border: 2px solid #B3261E; border-radius: 10px; background: var(--bande-papier); }
.ma-form-alerte p { font-weight: 500; }
.ma-form-alerte ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.ma-form-alerte a { color: inherit; }

.ma-form-note { font-size: .95rem; color: var(--bande-second); }
.ma-form-envoi .btn { min-height: 48px; background: var(--bande-plein); color: var(--bande-sur-plein); border: 0; cursor: pointer; }
.ma-form-envoi .btn:hover { filter: brightness(1.12); }

/* Le piège à robots : hors de l'écran, et hors de portée du clavier. */
.ma-form-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ma-form--merci { padding: 1.6rem 1.8rem; border: 1px solid var(--bande-trait); border-radius: 12px; background: var(--bande-papier); }
.ma-form-merci-titre { font: 1.7rem/1.1 var(--display, Georgia, serif); color: var(--bande-titre, inherit); margin-bottom: .5rem; }

@media (max-width: 780px) {
  .ma-form-envoi .btn { width: 100%; white-space: normal; }
}
/* Les lignes de carte à remplir n'existent qu'en modifiant. */
.ma-carte .ma-ed-a-remplir { display: none; }