/* ── Témoignages — styles du module ──────────────────────────────────────────
   Toutes les classes sont préfixées « c321-tem- ». Aucune classe générique n'est
   créée ni modifiée. Module AUTONOME : ne dépend d'aucune règle locale de page, il
   réutilise uniquement les variables de la charte (aucune couleur/police/rayon en dur).
   Chargé une seule fois par partials/temoignages-bloc.php (balise <link>).                */

.c321-tem-section {
  padding: clamp(3rem, 7vw, 5.5rem) 8vw;
  background: var(--cream);
  text-align: center;
}

/* Titre de section — calqué sur les titres du site (Nunito 950, majuscules, <em> rouge),
   mais autonome pour rendre à l'identique sur l'accueil ET les pages formules. */
.c321-tem-title {
  font-family: var(--fd);
  font-weight: 950;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 24ch;
}
.c321-tem-title em { color: var(--red); font-style: normal; }

.c321-tem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}

/* Carte de témoignage — même langage que les cartes de contenu du site
   (fond blanc, bordure claire, coins arrondis, plat au repos). */
.c321-tem-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--r20);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  margin: 0; /* neutralise la marge par défaut de <figure> */
  position: relative; /* repère de la pastille, qui chevauche le bord haut */
}

/* Pastille de la carte — « Anniversaire / 7 enfants ». Elle situe la prestation
   avant même de lire la citation : c'est ce qui permet au visiteur de se
   reconnaître (même occasion, même taille de groupe).
   Même langage que .forfait-popular des forfaits de /anniversaire/ (rouge plein,
   Poppins 700, lettres espacées, capitales), mais CENTRÉE sur le bord haut :
   left:50% + translate -50% sur les DEUX axes — le X centre la pastille sur son
   propre milieu, le Y la fait chevaucher la bordure. Changer l'un sans l'autre
   la décale. La carte est en position:relative pour lui servir de repère. */
.c321-tem-pastille {
  position: absolute; top: -1px; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--red); color: var(--white);
  font-family: var(--fb); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.85rem; border-radius: 50px;
  white-space: nowrap;
}
.c321-tem-pastille-sep { margin: 0 6px; opacity: 0.55; }

.c321-tem-texte {
  font-family: var(--fb);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--black);
  margin: 0; /* neutralise la marge par défaut de <blockquote> */
}

/* Méta discrète — gris secondaire (#6B6860 sur blanc = ratio ~5,5:1, AA OK). */
.c321-tem-meta {
  margin-top: auto; /* aligne la méta en bas même si les textes ont des hauteurs différentes */
  font-family: var(--fb);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gray);
}
.c321-tem-prenom { font-weight: 600; color: var(--black); }

/* Mention légale. La phrase fait 75 caractères : à 60ch elle débordait d'un
   cheveu et laissait « accord. » seul sur la 2e ligne (mot orphelin). On élargit
   juste ce qu'il faut pour qu'elle tienne sur UNE ligne sur ordinateur, et
   « balance » répartit proprement les deux lignes quand il faut vraiment couper
   (mobile). Propriété ignorée par les vieux navigateurs → sans conséquence. */
.c321-tem-legal {
  margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
  max-width: 78ch;
  font-family: var(--fb);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--gray);
  text-wrap: balance;
}

/* Mobile : une seule colonne. */
@media (max-width: 860px) {
  .c321-tem-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* ── Formulaire (/temoignage/) & page merci ──────────────────────────────────
   Même langage que les champs du devis, mais en contexte CLAIR (le devis est sur
   bandeau sombre) : texte anthracite, focus anthracite (pas de glow rouge). */
.c321-tem-page {
  max-width: 680px;
  margin: 0 auto;
  /* offset de la nav + bandeau fixes (80px + 52px = 132px) + respiration */
  padding: 152px 6vw clamp(3rem, 6vw, 5rem);
}
.c321-tem-intro { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.c321-tem-intro h1 {
  font-family: var(--fd); font-weight: 950; text-transform: uppercase;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.05; color: var(--black); margin: 0 0 12px;
}
.c321-tem-intro h1 em { color: var(--red); font-style: normal; }
.c321-tem-intro p { font-family: var(--fb); color: var(--gray); line-height: 1.6; margin: 0 auto; max-width: 52ch; }

.c321-tem-alert {
  font-family: var(--fb); font-size: 0.9rem; color: var(--red); font-weight: 600;
  background: var(--red-pale); border: 1px solid var(--red-pale2); border-radius: var(--r8);
  padding: 12px 16px; margin-bottom: 20px;
}

.c321-tem-form { display: flex; flex-direction: column; gap: 26px; }
.c321-tem-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Libellés centrés au-dessus du champ, en « label » du design system (Poppins capitales espacées). */
.c321-tem-label {
  font-family: var(--fb); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--black);
}
.c321-tem-opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gray); }

/* Deux cadres de même gabarit, étiquette posée sur le bord haut :
   · publiable (prénom, ville, avis, autorisation) → rouge ;
   · interne (--interne : recommandation, retours parent et enfant) → beige neutre. */
.c321-tem-cadre {
  display: flex; flex-direction: column; gap: 26px; min-width: 0; margin: 0;
  border: 1.5px solid var(--red-pale2);
  border-color: color-mix(in srgb, var(--red) 35%, var(--white));  /* repli : rouge pâle */
  border-radius: var(--r12);
  padding: 18px clamp(14px, 3vw, 24px) 22px;
}
.c321-tem-cadre > legend {
  margin: 0 auto; padding: 4px 12px; border-radius: var(--r32);
  background: var(--red-pale); color: var(--red);
  font-family: var(--fb); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.c321-tem-cadre--interne {
  border-color: var(--gray-light);
  border-color: color-mix(in srgb, var(--black) 22%, var(--white));  /* repli : beige clair */
}
.c321-tem-cadre--interne > legend { background: var(--warm); color: var(--black); }

/* Rangée de champs courts (prénom + ville) : centrés, retour à la ligne si trop étroit. */
.c321-tem-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.c321-tem-row > .c321-tem-field { align-items: center; }

/* Sous-parties « Et pour vous ? » / « Et côté <enfant> ? » du cadre interne : sans le cadre natif du fieldset. */
.c321-tem-bloc {
  border: 0; margin: 0; min-width: 0; gap: 14px;
  padding: 0;
}
.c321-tem-bloc > legend {
  float: left; width: 100%; padding: 0; margin-bottom: 12px;  /* float : la légende reste DANS le fond */
  font-family: var(--fd); font-weight: 900; font-size: 1rem; letter-spacing: 0;
}
.c321-tem-bloc > legend + * { clear: both; }

.c321-tem-input,
.c321-tem-textarea {
  width: 100%; padding: 12px 16px;
  border-radius: var(--r8);
  border: 1.5px solid var(--gray-light);
  background: var(--cream);
  color: var(--black);
  font-family: var(--fb); font-size: 16px;   /* 16 px : en dessous, l'iPhone zoome sur le champ touché */
  outline: none; transition: border-color .2s, background-color .2s;
}
/* Largeur au contenu (règle maison) : ~12 caractères, s'élargit à la frappe.
   Repli (navigateurs sans field-sizing) : largeur calée sur la saisie habituelle. */
.c321-tem-court { width: 14ch; min-width: 12ch; max-width: 100%; field-sizing: content; }
.c321-tem-ville { width: 18ch; }
/* Une largeur explicite l'emporterait sur field-sizing : on la lâche là où il est compris. */
@supports (field-sizing: content) { input.c321-tem-court { width: auto; } }
.c321-tem-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.c321-tem-textarea--court { min-height: 84px; }
.c321-tem-input::placeholder,
.c321-tem-textarea::placeholder { color: var(--gray); opacity: .8; }
.c321-tem-input:focus,
.c321-tem-textarea:focus { border-color: var(--black); background: var(--white); }
.c321-tem-input[aria-invalid="true"],
.c321-tem-textarea[aria-invalid="true"] { border-color: var(--red); }

.c321-tem-count { align-self: flex-end; font-family: var(--fb); font-size: 0.75rem; color: var(--gray); }
.c321-tem-error { font-family: var(--fb); font-size: 0.8rem; color: var(--red); font-weight: 600; text-align: center; }
.c321-tem-hint  { font-family: var(--fb); font-size: 0.78rem; color: var(--gray); line-height: 1.5; }

/* Oui / Non : deux pastilles de 44 px, la choisie passe au rouge. */
.c321-tem-radiogroup { display: flex; justify-content: center; gap: 12px; }
.c321-tem-radio {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px;
  border: 1.5px solid var(--gray-light); border-radius: var(--r32); background: var(--cream);
  font-family: var(--fb); font-weight: 600; font-size: 0.95rem; color: var(--black); cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.c321-tem-radio:hover { border-color: var(--black); }
.c321-tem-radio:has(input:checked) { border-color: var(--red); background: var(--red-pale); color: var(--red); }
.c321-tem-radio input { accent-color: var(--red); width: 18px; height: 18px; margin: 0; }
.c321-tem-radiogroup[aria-invalid="true"] .c321-tem-radio { border-color: var(--red); }

.c321-tem-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--fb); font-size: 0.85rem; line-height: 1.5; color: var(--black); cursor: pointer; }
.c321-tem-consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--red); }
.c321-tem-lie { margin-top: -14px; }   /* rattachée au champ du dessus */

.c321-tem-submit {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--fd); font-weight: 800; font-size: 0.95rem;
  background: var(--red); color: var(--white);
  border: none; cursor: pointer; text-decoration: none;
  padding: 14px 28px; border-radius: var(--r32);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.c321-tem-form .c321-tem-submit { align-self: center; min-height: 48px; padding: 14px 36px; }
.c321-tem-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,18,48,.28); }
.c321-tem-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Piège à robots : invisible mais présent dans le DOM. */
.c321-tem-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Focus clavier visible partout (AA). */
.c321-tem-form :focus-visible,
.c321-tem-submit:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* Page merci. */
.c321-tem-merci { text-align: center; max-width: 520px; margin: clamp(1rem, 4vw, 3rem) auto 0; }
.c321-tem-merci-ico {
  width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--red-pale); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.c321-tem-merci-ico svg { width: 34px; height: 34px; }
.c321-tem-merci h1 {
  font-family: var(--fd); font-weight: 950; text-transform: uppercase;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.05; color: var(--black); margin: 0 0 12px;
}
.c321-tem-merci h1 em { color: var(--red); font-style: normal; }
.c321-tem-merci p { font-family: var(--fb); color: var(--gray); line-height: 1.7; margin: 0 auto 28px; }
.c321-tem-merci .c321-tem-submit { align-self: center; }