/* Créneaux de pose Nox outdoor kitchens : feuille dédiée aux blocs rendus par creneaux-ui.js.
   Préfixe de classes crx-. Reprend les variables du gabarit du site avec valeurs de repli.
   Rien ne bouge, rien ne change au survol : seul l'état sélectionné change visuellement (le lien
   « Choisir ce créneau » des cartes prend la forme du bouton du gabarit, .btn sur le site, .pp-btn
   dans l'espace ; cette feuille ne lui donne que sa place). Chaque état est porté par le texte
   (« Dernières places », « Complet », « À venir », « Mois sélectionné »), jamais par la couleur
   seule. Contraste AA : encre #171c26 sur crème. */

.crx-bandeau, .crx-composant, .crx-compteur, .crx-offre, .crx-hero, .crx-cta-wrap, .crx-comment {
  box-sizing: border-box;
  font-family: var(--sans, 'Manrope', sans-serif);
  color: var(--ink, #171c26);
  text-shadow: none;
}
.crx-bandeau *, .crx-composant *, .crx-compteur *, .crx-offre *, .crx-hero *, .crx-cta-wrap *, .crx-comment * { box-sizing: border-box; }

/* Focus clavier visible, identique sur tous les éléments interactifs : encre sur crème (15:1),
   jamais bronze (2,97:1 sur crème, sous le 3:1 du critère 1.4.11) */
.crx-lien:focus-visible,
.crx-carte:focus-visible,
.crx-choisir:focus-visible,
.crx-informer:focus-visible,
.crx-btn:focus-visible,
.crx-alerte input:focus-visible,
.crx-alerte-retour:focus-visible {
  outline: 2px solid var(--ink, #171c26);
  outline-offset: 3px;
}

/* ---------- Bandeau (hero et pages autonomes) : boîte crème autonome, lisible sur tout fond ---------- */
.crx-bandeau {
  display: block;
  max-width: 640px;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--cream, #f5f1e9);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-left: 3px solid var(--bronze, #a8875a);
  text-align: left;
}
.crx-bandeau-texte {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink, #171c26);
}
.crx-lien {
  color: var(--ink, #171c26);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.crx-mention {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft, #3c4250);
}

/* ---------- Hero du gabarit : compteur, phrase, bouton, mention, en texte cream sur un voile
   encre translucide (contraste AA garanti quelle que soit la photo, même sur un plafond blanc :
   cream sur encre à 72 % vaut au moins 6,7:1). Depuis le soir du 14/09/2026 (demande de Loris), le
   bloc est le dernier élément du hero, sous le paragraphe : voile plus dense, liseré bronze fin sur
   tout le tour et bord gauche bronze épais, ombre portée, compteur en 18,5 px. Rien n'y bouge : la
   révélation douce est celle du gabarit (sa classe posée sur le slot), coupée par prefers-reduced-motion. ---------- */
.crx-hero {
  display: block;
  max-width: 640px;
  margin: 18px 0 0;
  padding: 16px 22px 14px;
  background: rgba(13, 18, 28, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 110, .55);
  border-left: 5px solid var(--bronze-l, #c9a96e);
  box-shadow: 0 18px 48px rgba(13, 18, 28, .35);
  color: var(--cream, #f5f1e9);
  text-shadow: 0 1px 12px rgba(13, 18, 28, .45);
  text-align: left;
}
.crx-hero .crx-hero-compteur {
  margin: 0;
  max-width: none;
  font-size: 18.5px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--cream, #f5f1e9);
}
.crx-hero .crx-hero-phrase {
  margin: 8px 0 0;
  max-width: none;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--cream, #f5f1e9);
}
.crx-hero .crx-action { margin: 14px 0 0; }
/* Sur le voile encre, le contour de focus encre serait invisible : cream (4,6:1 au pire sur photo blanche) */
.crx-hero .crx-btn:focus-visible { outline: 2px solid var(--cream, #f5f1e9); outline-offset: 3px; }
.crx-hero .crx-mention {
  margin: 10px 0 0;
  max-width: 580px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--cream, #f5f1e9);
}
/* Téléphone (16/09/2026, demande de Loris, captures iPhone à l'appui) : la cuisine doit rester visible
   derrière le hero. Sous 700 px, le bloc ne garde que le compteur, le bouton et son cadre : la phrase du
   parcours et la mention sont masquées ici (la mention « sous réserve des disponibilités restantes » reste
   lue dans le premier bloc cta et au-dessus du formulaire, où le runtime la rend à toute largeur ; à 10,5 px
   elle tenait sur trois lignes, pas deux). Compteur 16 px (une ligne dès qu'elle tient, à partir d'environ
   410 px de large ; à 375 px « Il reste N créneaux de pose en <mois>. » mesure 331 px pour 302 px
   disponibles, donc deux lignes), bouton compact (12 px de padding, pleine largeur par la
   règle .crx-btn sous 480 px), bloc 12 px 14 px, marge haute 12 px. Mesuré à 375 × 812 : bloc de 292 px à
   122 px, il commence donc 170 px plus bas et le bouton (730 à 773 px) reste dans le premier écran. Après
   les règles du hero, même spécificité : la dernière l'emporte. */
@media (max-width: 700px) {
  .crx-hero { margin: 12px 0 0; padding: 12px 14px; border-left-width: 4px; }
  .crx-hero .crx-hero-compteur { font-size: 16px; line-height: 1.35; }
  .crx-hero .crx-hero-phrase { display: none; }
  .crx-hero .crx-action { margin: 10px 0 0; }
  .crx-hero .crx-btn { padding: 12px 20px; }
  .crx-hero .crx-mention { display: none; }
}

/* ---------- Bloc cta répété entre les sections du gabarit ---------- */
/* Le conteneur (data-nox-creneaux="cta") est posé entre deux sections ; vide (runtime absent ou source
   manquante), il ne prend aucune place. La marge négative le remonte dans le bas de la section précédente. */
.crx-cta-section { display: block; margin: calc(-1 * clamp(36px, 5vw, 64px)) 0 0; padding: 0 0 clamp(56px, 7vw, 96px); }
.crx-cta-section:empty, .crx-cta-section[hidden] { display: none; }
.crx-cta-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.crx-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "compteur bouton" "texte bouton" "mention mention";
  align-items: center;
  column-gap: clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 40px);
  background: var(--white, #fbfaf6);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-left: 3px solid var(--bronze, #a8875a);
  text-align: left;
}
.crx-cta .crx-cta-compteur {
  grid-area: compteur;
  margin: 0;
  max-width: none;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink, #171c26);
}
.crx-cta .crx-cta-texte {
  grid-area: texte;
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft, #3c4250);
}
.crx-cta .crx-action { grid-area: bouton; margin: 0; }
.crx-cta .crx-mention { grid-area: mention; margin: 16px 0 0; max-width: none; color: var(--ink-soft, #3c4250); }
/* Fond encre (classe posée par le gabarit sur le conteneur) : la boîte s'éclaircit à peine, textes cream */
.crx-cta-sombre { background: var(--ink, #171c26); }
.crx-cta-sombre .crx-cta {
  background: rgba(245, 241, 233, .07);
  color: var(--cream, #f5f1e9);
  border-color: rgba(245, 241, 233, .28);
  border-left-color: var(--bronze-l, #c9a96e);
}
.crx-cta-sombre .crx-cta .crx-cta-compteur { color: var(--cream, #f5f1e9); }
.crx-cta-sombre .crx-cta .crx-cta-texte, .crx-cta-sombre .crx-cta .crx-mention { color: #d9d3c6; }
.crx-cta-sombre .crx-cta .crx-btn { background: var(--cream, #f5f1e9); color: var(--ink, #171c26); border-color: var(--cream, #f5f1e9); }
.crx-cta-sombre .crx-cta .crx-btn:focus-visible { outline: 2px solid var(--cream, #f5f1e9); outline-offset: 3px; }

/* ---------- « Comment ça marche » : trois étapes, une photo par étape ---------- */
.crx-comment {
  display: block;
  max-width: 1040px;
  margin: 40px auto 0;
  padding: clamp(24px, 3.5vw, 44px) clamp(22px, 3.5vw, 44px) clamp(22px, 3vw, 36px);
  background: var(--white, #fbfaf6);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  text-align: left;
}
.crx-comment .crx-titre {
  margin: 0;
  max-width: none;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink, #171c26);
}
.crx-comment .crx-etapes {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}
.crx-comment .crx-etape { margin: 0; padding: 0; display: block; }
.crx-comment .crx-etape-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 16px;
  background: var(--cream2, #efeade);
}
.crx-comment .crx-etape-num {
  display: block;
  font-family: var(--serif, 'Playfair Display', serif);
  font-style: italic;
  /* 24px = texte large au sens AA : le bronze sur blanc (3,2:1) passe le seuil 3:1 des grands textes */
  font-size: 24px;
  line-height: 1;
  color: var(--bronze, #a8875a);
}
.crx-comment .crx-etape-titre {
  display: block;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink, #171c26);
}
.crx-comment .crx-etape-texte {
  margin: 8px 0 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
  opacity: 1;
  color: var(--ink-soft, #3c4250);
}
.crx-comment .crx-suite {
  margin: 28px 0 0;
  max-width: 62ch;
  padding-top: 20px;
  border-top: 1px solid var(--line, #ddd6c6);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  opacity: 1;
  color: var(--ink, #171c26);
}
.crx-comment .crx-mention { margin: 10px 0 0; max-width: 62ch; opacity: 1; }

/* ---------- Composant : grille des mois ---------- */
.crx-composant { display: block; }
.crx-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.crx-cellule { margin: 0; padding: 0; }
.crx-carte {
  display: block;
  width: 100%;
  min-height: 118px;
  margin: 0;
  padding: 18px 18px 16px;
  background: var(--white, #fbfaf6);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-radius: 0;
  text-align: left;
  font-family: var(--sans, 'Manrope', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.crx-carte-mois {
  display: block;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.01em;
}
.crx-carte-etat {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: .02em;
  font-weight: 600;
}
.crx-carte-choix {
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Dernières places : bordure bronze doublée, texte en gras. L'état reste lisible par le texte. */
.crx-carte-dernieres { border: 2px solid var(--bronze, #a8875a); padding: 17px 17px 15px; }
.crx-carte-dernieres .crx-carte-etat { font-weight: 700; }

/* Complet : carte désactivée, toujours visible, jamais masquée */
.crx-carte-complet {
  cursor: default;
  background: var(--cream2, #efeade);
  border-style: dashed;
  color: var(--ink, #171c26);
}
.crx-carte-complet .crx-carte-etat {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.crx-carte-complet:disabled { opacity: 1; color: var(--ink, #171c26); }

/* À venir : carte non réservable, avec le bouton « Être informé de l'ouverture » */
.crx-carte-avenir { cursor: default; background: var(--cream2, #efeade); }
.crx-carte-avenir .crx-carte-etat { font-weight: 500; }

/* Sélectionné : seul état qui change visuellement, texte « Mois sélectionné » ajouté */
.crx-carte-selectionnee {
  background: var(--ink, #171c26);
  color: var(--cream, #f5f1e9);
  border-color: var(--ink, #171c26);
}
.crx-carte-selectionnee .crx-carte-choix { color: var(--bronze-l, #c9a96e); }

/* Lien « Choisir ce créneau » en bas des cartes disponibles et dernières places (demande de Loris du
   14/09/2026) : la forme vient de la classe .btn du gabarit (.pp-btn dans l'espace), ici seulement sa
   place. Pleine largeur de la carte à toutes les tailles, texte centré, retour à la ligne autorisé : les
   cartes font 180 à 230 px de large au-dessus de 480 px, le libellé en capitales espacées n'y tient pas
   sur une ligne avec les marges du gabarit. Sur la carte sélectionnée (fond encre), le lien s'inverse en
   cream (encre sur cream, 15:1), contour de focus cream pour la même raison ; la spécificité de ces deux
   règles passe devant le survol du gabarit, dont les couleurs seraient invisibles sur l'encre. */
.crx-carte .crx-choisir {
  display: flex;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 14px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.4;
}
.crx-carte.crx-carte-selectionnee .crx-choisir {
  background: var(--cream, #f5f1e9);
  color: var(--ink, #171c26);
  border-color: var(--cream, #f5f1e9);
}
.crx-carte.crx-carte-selectionnee .crx-choisir:focus-visible {
  outline: 2px solid var(--cream, #f5f1e9);
  outline-offset: 3px;
}

/* Bouton et formulaire « Être informé » */
.crx-informer {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 16px;
  background: transparent;
  color: var(--ink, #171c26);
  border: 1px solid var(--ink, #171c26);
  border-radius: 0;
  font-family: var(--sans, 'Manrope', sans-serif);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.crx-alerte {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #ddd6c6);
}
.crx-alerte[hidden] { display: none; }
.crx-champ {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--ink, #171c26);
}
.crx-champ input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-radius: 0;
  font-family: var(--sans, 'Manrope', sans-serif);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.crx-honey {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.crx-erreur {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink, #171c26);
}
.crx-alerte-retour {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink, #171c26);
}
.crx-alerte .crx-alerte-retour { margin-top: 0; }
.crx-btn-informer { justify-self: start; }

/* Sous les cartes : texte, bouton, mention */
.crx-texte {
  max-width: 640px;
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft, #3c4250);
}
.crx-action { margin: 22px 0 0; }
.crx-espace, .crx-composant .crx-suite {
  max-width: 640px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft, #3c4250);
}
.crx-composant .crx-mention { max-width: 640px; margin-top: 16px; }

/* ---------- Compteur page devis ---------- */
.crx-compteur {
  max-width: 640px;
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--cream, #f5f1e9);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-left: 3px solid var(--bronze, #a8875a);
  text-align: left;
}
.crx-compteur .crx-offre { margin-top: 14px; }

/* ---------- Bloc offre : titre en paragraphe, jamais de pourcentage ni de prix barré ---------- */
.crx-offre {
  max-width: 640px;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--white, #fbfaf6);
  color: var(--ink, #171c26);
  border: 1px solid var(--line, #ddd6c6);
  border-left: 3px solid var(--bronze, #a8875a);
  text-align: left;
}
.crx-offre-titre {
  margin: 0;
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink, #171c26);
}
.crx-offre-texte {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft, #3c4250);
}

/* ---------- Écrans moyens : le cta passe en colonne, les trois étapes en une colonne ---------- */
@media (max-width: 900px) {
  .crx-cta {
    grid-template-columns: 1fr;
    grid-template-areas: "compteur" "texte" "bouton" "mention";
    align-items: start;
  }
  .crx-cta .crx-action { margin: 18px 0 0; }
  .crx-comment .crx-etapes { grid-template-columns: 1fr; gap: 26px; }
  .crx-comment .crx-etape-photo { max-height: 240px; }
}

/* ---------- Petits écrans (testé à 375px) ---------- */
@media (max-width: 480px) {
  /* Le hero a ses règles téléphone plus haut (bloc 700 px) ; ici le bouton prend toute la largeur du bloc
     (règle .crx-btn ci-dessous). */
  .crx-cta { padding: 20px 18px; }
  .crx-cta .crx-cta-compteur { font-size: 21px; }
  .crx-comment { padding: 22px 18px 20px; margin-top: 30px; }
  .crx-comment .crx-titre { font-size: 24px; }
  .crx-grille { grid-template-columns: 1fr; gap: 12px; }
  .crx-carte { min-height: 0; padding: 16px 16px 14px; }
  .crx-carte-dernieres { padding: 15px 15px 13px; }
  .crx-carte-mois { font-size: 20px; }
  .crx-btn, .crx-btn-informer {
    width: 100%;
    justify-content: center;
    justify-self: stretch;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
  .crx-bandeau, .crx-compteur { padding: 12px 14px; }
  .crx-bandeau-texte { font-size: 14px; }
  .crx-texte { font-size: 15px; }
}
@media (max-width: 375px) {
  .crx-bandeau, .crx-compteur, .crx-offre, .crx-cta, .crx-comment { padding-left: 12px; padding-right: 12px; }
  .crx-carte { padding: 14px 14px 12px; }
  .crx-carte-dernieres { padding: 13px 13px 11px; }
  .crx-informer { width: 100%; text-align: center; }
}