/* ==========================================================================
   Pages institutionnelles (admission, vie à la CFA, la CFA, actualités, portes
   ouvertes, contact) : composants partagés. Chaque section reste un bloc autonome
   (public/blocs/<nom>/), ces classes forment la grammaire commune du thème.
   ========================================================================== */
.ins { overflow-x: clip; }
.ins [hidden] { display: none !important; }
.ins-section { position: relative; padding-block: var(--space-section); }
.ins-section--serre { padding-block: var(--space-2xl); }
.ins-section--sable { background: color-mix(in oklab, var(--paper) 70%, var(--u-soft)); }
.ins-section--blanc { background: var(--bg-raised); }
.ins-section--sombre { background: var(--navy); color: #E9E8F2; }
.ins-section--sombre :is(h2, h3, h4) { color: #fff; }
.ins-section--sombre .eyebrow { color: rgb(255 255 255 / 0.78); }
.ins-section--sombre .ins-tete p { color: rgb(255 255 255 / 0.82); }

/* En-tête de section : numéro, sur-titre, très grand titre, texte en regard */
.ins-tete {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-l);
  align-items: end; margin-bottom: var(--space-l);
}
.ins-tete h2 { font-size: var(--step-4); line-height: 1; max-width: 20ch; margin-top: var(--space-xs); }
.ins-tete h2 em { font-style: normal; color: var(--u-text); }
.ins-section--sombre .ins-tete h2 em { color: var(--u); }
.ins-tete p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
.ins-tete__num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1;
  color: var(--u-text); display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.02em;
}
.ins-section--sombre .ins-tete__num { color: var(--u); }
.ins-tete--simple { grid-template-columns: 1fr; }

/* Texte courant */
.ins-prose { max-width: 64ch; }
.ins-prose p + p { margin-top: 0.9em; }
.ins-prose strong { color: var(--ink); }
.ins-section--sombre .ins-prose strong { color: #fff; }

/* Liste à puces pétale */
.ins-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.ins-liste li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; align-items: baseline; }
.ins-liste li::before {
  content: ''; width: 1rem; height: 0.42rem; border-radius: var(--radius-petal); background: var(--u);
  transform: translateY(-0.12em);
}

/* Lien courriel / téléphone en pastille */
.ins-contact {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.42em 0.9em 0.42em 0.75em;
  border-radius: var(--radius-m); background: var(--bg-raised); color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; font-size: var(--step--1);
  transition: box-shadow var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.ins-contact:hover { box-shadow: inset 0 0 0 2px var(--u); transform: translateY(-1px); }
.ins-contact::before { content: ''; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--u); flex: none; }
.ins-section--sombre .ins-contact { background: rgb(255 255 255 / 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }

/* Source et mentions */
.ins-source { font-size: var(--step--2); color: var(--ink-mute); margin-top: var(--space-m); max-width: 70ch; }
.ins-source a { color: inherit; }
.ins-section--sombre .ins-source { color: rgb(255 255 255 / 0.6); }
.ins-a-preciser {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.7em; border-radius: var(--radius-petal);
  background: color-mix(in oklab, var(--yellow) 26%, var(--paper)); color: #6B5200; font-size: var(--step--1); font-weight: 650;
}
.ins-a-preciser::before { content: '!'; display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 0.8em; }

/* Carte de contenu */
.ins-carte {
  position: relative; padding: var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.ins-carte h3 { font-size: var(--step-2); }
.ins-carte p { color: var(--ink-soft); margin-top: 0.5rem; }
.ins-carte p.badge { color: var(--u-ink); }
/* Une carte ne s'élargit jamais pour une adresse électronique : l'adresse passe à la ligne. */
.ins-carte { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ins-contact { max-width: 100%; overflow-wrap: anywhere; }

/* Formulaires (portes ouvertes, contact, entreprise) */
.ins-form { display: grid; gap: var(--space-s); }
.ins-form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.ins-champ { display: grid; gap: 0.4rem; }
.ins-champ label, .ins-champ legend { font-weight: 650; font-size: var(--step--1); }
.ins-champ :is(input, select, textarea) {
  width: 100%; min-height: 52px; padding: 0.8rem 1rem; border: 0; border-radius: var(--radius-m);
  background: var(--bg-raised); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: var(--step-0);
  transition: box-shadow var(--dur-fast) linear;
}
.ins-champ textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.ins-champ select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background: var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231C1D3B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.ins-champ :is(input, select, textarea):hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.ins-champ :is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 4px color-mix(in oklab, var(--sky) 35%, transparent); }
.ins-champ__erreur { display: none; color: #B0173F; font-size: var(--step--1); font-weight: 600; }
.ins-champ.is-erreur :is(input, select, textarea) { box-shadow: inset 0 0 0 2px var(--pink); }
.ins-champ.is-erreur .ins-champ__erreur { display: block; }
.ins-form__rgpd { font-size: var(--step--2); color: var(--ink-soft); line-height: 1.5; }
.ins-form__demo { font-size: var(--step--1); color: var(--ink-soft); display: flex; gap: 0.5rem; align-items: center; }
.ins-form__demo::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--yellow); flex: none; }
.ins-merci { display: grid; gap: var(--space-s); justify-items: start; padding: var(--space-l); border-radius: var(--radius-l); background: var(--bg-raised); box-shadow: var(--shadow-2); }
.ins-merci h3 { font-size: var(--step-3); }
.ins-merci__coche { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: var(--navy); display: grid; place-items: center; }
.ins-merci__coche svg { width: 30px; height: 30px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: ins-trace 0.7s 0.15s var(--ease-out) forwards; }
@keyframes ins-trace { to { stroke-dashoffset: 0; } }

/* Apparition par lignes des grands titres (pilotée par les blocs) */
.ins-ligne { display: block; overflow: hidden; padding-block: 0.12em 0.24em; margin-block: -0.12em -0.24em; }
.ins-ligne > span { display: inline-block; }
/* Le masque ne sert qu'à l'apparition : une fois la ligne en place (ou sans animation), il est
   levé pour qu'aucun jambage ni accent ne soit rogné. */
.ins-ligne:has(> span:not([style])), .ins-ligne:has(> span[style*="translate(0px, 0px)"]) { overflow: visible; }

@media (max-width: 900px) {
  .ins-tete, .ins-form__ligne { grid-template-columns: 1fr; }
}

/* Pages dont l'ouverture est sombre (portes ouvertes) : en-tête clair tant qu'on n'a pas défilé */