/* ==========================================================================
   Site Compagnie NAO — habillage web
   La mise en page vient du document Claude Design (styles en attribut
   `style`, déjà fluides via clamp()). Ce fichier ajoute : la navigation,
   les animations, et les ajustements par format d'écran.
   ========================================================================== */

:root {
  --courbe: cubic-bezier(.2, .7, .3, 1);
  --duree: 320ms;
  --duree-longue: 720ms;
  --hauteur-entete: 78px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; background: #FFFFFF; }
body { overflow-x: hidden; }

section[id] { scroll-margin-top: var(--hauteur-entete); }

a { color: var(--nao-rouge); text-decoration: none; }
a:hover { color: var(--nao-bleu); }
input::placeholder, textarea::placeholder { color: #9A9A9A; }
p { max-width: none; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--nao-bleu);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement, pour la navigation au clavier */
.saut-contenu {
  position: fixed; top: -100px; left: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--nao-noir); color: var(--nao-creme);
  font-family: var(--nao-font-titre); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: top var(--duree) var(--courbe);
}
.saut-contenu:focus { top: 12px; color: var(--nao-creme); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* L'en-tête gagne une ombre dès que la page défile */
header {
  transition: box-shadow var(--duree) var(--courbe),
              background var(--duree) var(--courbe);
  backdrop-filter: saturate(1.4) blur(10px);
}
header.defile { box-shadow: 0 6px 26px rgba(38, 38, 38, .10); }

/* Le soulignement se déploie sous le lien, comme le trait du motif */
.nav-bureau nav a:not([href="#contact"]) {
  position: relative;
  padding-block: 6px;
}
.nav-bureau nav a:not([href="#contact"])::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--nao-rouge);
  transition: right var(--duree) var(--courbe);
}
.nav-bureau nav a:not([href="#contact"]):hover::after,
.nav-bureau nav a.actif::after { right: 0; }
.nav-bureau nav a.actif { color: #262626 !important; }

/* Le bouton Contact de l'en-tête se remplit au survol */
.nav-bureau nav a[href="#contact"] {
  transition: background var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.nav-bureau nav a[href="#contact"]:hover {
  background: var(--nao-rouge);
  color: #FFFFFF !important;
}

/* Bouton sommaire (petits écrans) */
.nav-tactile { display: none; }
.nav-tactile button { transition: transform var(--duree) var(--courbe); }
.nav-tactile button:hover { transform: scale(1.06); }
.nav-tactile button span { transition: transform var(--duree) var(--courbe); }
.nav-tactile button[aria-expanded="true"] span:nth-child(1) { transform: translateX(-2px) scale(1.5); }
.nav-tactile button[aria-expanded="true"] span:nth-child(3) { transform: translateX(2px) scale(1.5); }

.menu-mobile[hidden] { display: none; }
.menu-mobile > nav > a { transition: background var(--duree) var(--courbe),
                                     padding-left var(--duree) var(--courbe); }
.menu-mobile > nav > a:hover { background: var(--nao-creme); }
.menu-mobile > nav > a.actif { color: #262626 !important; text-decoration: underline; text-underline-offset: 6px; }

/* Bulle « Rencontrons-nous ! »
   Elle suit le lecteur sur toute la page : elle doit se faire oublier.
   Verre dépoli translucide au repos, elle ne s'affirme qu'au survol.
   (`!important` : fond, bordure et ombre sont en style inline.) */
.bulle > a {
  background: rgba(38, 38, 38, .48) !important;
  border-color: rgba(254, 236, 199, .30) !important;
  box-shadow: 0 6px 18px rgba(38, 38, 38, .12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
          backdrop-filter: blur(12px) saturate(1.3);
  padding: 12px 22px !important;
  transition: transform var(--duree) var(--courbe),
              opacity var(--duree) var(--courbe),
              background var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe);
}
.bulle > a:hover {
  transform: translateY(-3px);
  background: rgba(38, 38, 38, .93) !important;
  border-color: rgba(254, 236, 199, .55) !important;
  box-shadow: 0 18px 38px rgba(38, 38, 38, .26) !important;
}

/* Sans flou disponible, on compense par un fond plus dense pour garder le texte lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bulle > a { background: rgba(38, 38, 38, .80) !important; }
}
.bulle.masquee > a {
  opacity: 0;
  transform: translateY(14px) scale(.94);
  pointer-events: none;
}
/* Le point jaune respire doucement */
.bulle > a > span:first-child { animation: pulse 2.8s var(--courbe) infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .65; }
}

/* --------------------------------------------------------------------------
   Barre de progression de lecture
   -------------------------------------------------------------------------- */
.progression {
  position: fixed; top: 0; left: 0; z-index: 61;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--nao-rouge), var(--nao-jaune), var(--nao-bleu));
}

/* --------------------------------------------------------------------------
   Révélation au défilement
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--duree-longue) var(--courbe),
              transform var(--duree-longue) var(--courbe);
}
[data-reveal].vu {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Le héros ne dépend pas du défilement : il s'ouvre au chargement */
#accueil [data-reveal] { opacity: 1; transform: none; }
#accueil > div:last-child > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  animation: monte 900ms var(--courbe) forwards;
}
#accueil > div:last-child > *:nth-child(1) { animation-delay: 120ms; }
#accueil > div:last-child > *:nth-child(2) { animation-delay: 240ms; }
#accueil > div:last-child > *:nth-child(3) { animation-delay: 360ms; }
#accueil > div:last-child > *:nth-child(4) { animation-delay: 480ms; }
@keyframes monte { to { opacity: 1; transform: none; } }

/* L'image du héros se pose par un très léger dézoom */
#accueil > img:first-of-type {
  animation: pose 1600ms var(--courbe) both;
}
@keyframes pose { from { transform: scale(1.06); } to { transform: none; } }

/* --------------------------------------------------------------------------
   Survol
   -------------------------------------------------------------------------- */

/* Essai d'arrondi de signature du 16/08/2026 : écarté après comparaison.
   Le bord franc l'emporte — il tient la rigueur Bauhaus de la charte. */

/* Images de contenu : zoom rogné par leur cadre */
.media { overflow: hidden; display: block; }
.media img {
  transition: transform 520ms var(--courbe), filter 520ms var(--courbe);
  will-change: transform;
}
.media:hover img { transform: scale(1.05); filter: brightness(1.04); }

/* Boutons du héros --------------------------------------------------------
   Le fond est en style inline (export Claude Design) : on le rejoue ici en
   pseudo-élément, ce qui permet de l'animer sans `!important` sur `background`. */
.btn-heros {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
/* z-index négatif + `isolation: isolate` : le voile se peint après le fond
   du bouton mais avant son texte, qui est un simple nœud texte. */
.btn-heros::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--courbe);
}

.btn-heros:hover { transform: translateY(-2px); }
.btn-heros:active { transform: translateY(0); transition-duration: 90ms; }

/* Bouton principal : liseré rouge au repos, qui se remplit au survol.
   Le libellé reste crème et non rouge — sur la photo sombre du héros,
   du rouge sur fond foncé tombe à 3:1, insuffisant pour un texte de 14 px.
   Le liseré est à 2 px là où le second bouton est à 1 px : la hiérarchie
   entre les deux tient encore, maintenant qu'aucun n'est plein. */
.btn-heros--plein {
  background: rgba(220, 30, 30, .72) !important;          /* rouge de marque, en retrait */
  border: 1px solid rgba(220, 30, 30, .72) !important;
  color: #FFFFFF !important;
}
.btn-heros--plein::before { background: var(--nao-rouge); }
.btn-heros--plein:hover::before { transform: scaleX(1); }
.btn-heros--plein:hover {
  border-color: var(--nao-rouge) !important;   /* le rouge reprend sa pleine valeur */
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(220, 30, 30, .26);
}

/* Bouton contour : le crème se remplit et le texte passe en noir.
   `!important` : la couleur du texte est en style inline (export Claude Design),
   sans quoi le libellé resterait crème sur crème — donc illisible. */
.btn-heros--contour::before { background: var(--nao-creme); }
.btn-heros--contour:hover::before { transform: scaleX(1); }
.btn-heros--contour:hover {
  color: #262626 !important;
  border-color: var(--nao-creme) !important;
  box-shadow: 0 12px 26px rgba(38, 38, 38, .3);
}

/* Cartes des formats et des créations : légère élévation */
[data-reveal]:has(> .media) { transition-property: opacity, transform; }
.carte-survol { transition: transform var(--duree) var(--courbe); }
.carte-survol:hover { transform: translateY(-5px); }

/* --------------------------------------------------------------------------
   Section « Pour votre prochain événement »
   C'était la 4e section crème d'affilée, sans image : elle se noyait.
   Les arguments deviennent des cartes blanches numérotées — le seul endroit
   du site où le contenu se détache du fond, donc le seul qui accroche l'œil.
   -------------------------------------------------------------------------- */
.section-atouts { position: relative; overflow: hidden; }

/* Filigrane du motif de marque, en respiration d'angle */
.section-atouts::after {
  content: '';
  position: absolute;
  right: clamp(-140px, -8vw, -60px);
  bottom: -90px;
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 158 / 254;
  background: url('assets/logo-noir.svg') no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}

.section-atouts .carte-atout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  background: #FFFFFF;
  border-top: 3px solid var(--teinte, var(--nao-rouge));
  box-shadow: 0 1px 3px rgba(38, 38, 38, .06);
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              opacity var(--duree-longue) var(--courbe);
}

.section-atouts .carte-atout:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(38, 38, 38, .14);
}

/* Le numéro donne l'ordre de lecture et pose un repère visuel fort */
.section-atouts .num-atout {
  font-family: var(--nao-font-titre);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  color: var(--teinte, var(--nao-rouge));
  opacity: .28;
  transition: opacity var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
  transform-origin: left center;
}
.section-atouts .carte-atout:hover .num-atout { opacity: 1; transform: scale(1.06); }

.section-atouts .carte-atout > h3 { margin-top: 2px !important; }

/* Les titres de pièces sont en `white-space: nowrap` dans l'export d'origine :
   pertinent sur une ligne pleine largeur, mais ils débordaient de la carte.
   On les laisse revenir à la ligne, et on borne tout dépassement résiduel. */
.section-atouts .carte-atout,
.section-atouts .carte-atout * {
  min-width: 0;
  white-space: normal !important;
  word-break: normal;
}

/* Césure française plutôt qu'une coupure sèche : dans une carte étroite,
   « institutionnelle » se scindait en « institutionnell / e ». */
.section-atouts .carte-atout h3 {
  -webkit-hyphens: auto;
          hyphens: auto;
  overflow-wrap: normal;
}

/* Les listes de titres, elles, peuvent céder si un mot dépasse vraiment */
.section-atouts .carte-atout p,
.section-atouts .carte-atout span { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Logo du héros : le tracé se forme
   Le logo est un dessin au trait ; un balayage à bord doux donne l'illusion
   que les lignes se dessinent, de la gauche vers la droite.
   -------------------------------------------------------------------------- */
.logo-trace {
  display: block;
  -webkit-mask-image: linear-gradient(100deg,
      #000 0 34%, rgba(0, 0, 0, .55) 44%, transparent 56% 100%);
          mask-image: linear-gradient(100deg,
      #000 0 34%, rgba(0, 0, 0, .55) 44%, transparent 56% 100%);
  -webkit-mask-size: 280% 100%;
          mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}

/* La règle d'entrée du héros — `#accueil > div:last-child > *` — pèse (1,1,1) :
   on reprend son chemin complet pour passer devant, et on rejoue `monte`
   sans quoi le logo perdrait son apparition.
   Courbe écrite en toutes lettres : un var() dans un raccourci à plusieurs
   valeurs séparées par des virgules fait tomber la seconde animation. */
#accueil > div:last-child > .logo-trace {
  animation-name: monte, tracer;
  animation-duration: 900ms, 1900ms;
  animation-timing-function: cubic-bezier(.2, .7, .3, 1), cubic-bezier(.32, .74, .28, 1);
  animation-delay: 120ms, 260ms;
  animation-fill-mode: forwards, forwards;
}

@keyframes tracer {
  to {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}

/* Puces de liste : le point grossit */
.puce-liste span:first-child { transition: transform var(--duree) var(--courbe); }
.puce-liste:hover span:first-child { transform: scale(1.6); }

/* Champs du formulaire : le trait du bas prend la couleur de marque */
#form-contact input,
#form-contact textarea {
  transition: border-color var(--duree) var(--courbe),
              background var(--duree) var(--courbe);
}
#form-contact input:focus,
#form-contact textarea:focus { border-bottom-color: var(--nao-bleu) !important; }

#form-contact button[type="submit"] {
  transition: background var(--duree) var(--courbe),
              color var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
}
#form-contact button[type="submit"]:hover {
  background: var(--nao-rouge) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}
#form-contact button[type="submit"] svg { transition: transform var(--duree) var(--courbe); }
#form-contact button[type="submit"]:hover svg { transform: translateX(5px); }

#msg-envoye[hidden] { display: none; }

/* Champs obligatoires et facultatifs -------------------------------------- */
#form-contact .oblig {
  color: var(--nao-rouge);
  font-weight: 600;
  margin-left: 2px;
}
#form-contact .facult {
  color: #9A9A9A;
  text-transform: none;
  letter-spacing: 0;
  font-size: .92em;
}
.legende-oblig {
  margin: 26px 0 0 !important;
  font-family: var(--nao-font-texte);
  font-weight: 300;
  font-size: 14px;
  color: #6A6A6A;
}

/* Champ en erreur */
#form-contact .en-erreur { border-bottom-color: var(--nao-rouge) !important; }
.msg-erreur {
  margin-top: 8px;
  font-family: var(--nao-font-texte); font-weight: 400; font-size: 14px;
  color: var(--nao-rouge);
}

/* Liens du pied de page — le sommaire complet y est repris.
   Chaque lien reçoit une zone de contact confortable au doigt (≥ 44 px). */
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 2px;
  transition: color var(--duree) var(--courbe);
}
footer a:hover { color: var(--nao-jaune) !important; }

@media (max-width: 620px) {
  /* En colonne, la liste se lit mieux qu'en pavé de onze liens qui se replient */
  footer > div > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  footer > div > div > span { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   Formats d'écran
   -------------------------------------------------------------------------- */

/* Tablette et téléphone : le sommaire remplace la navigation en ligne */
@media (max-width: 900px) {
  .nav-bureau { display: none; }
  .nav-tactile { display: block; }
  :root { --hauteur-entete: 74px; }
  header { height: 74px !important; }
  main { padding-top: 74px !important; }
  .menu-mobile > nav { top: 74px !important; }
}

/* Téléphone */
@media (max-width: 620px) {
  /* La bulle passe pleine largeur pour rester atteignable au pouce */
  .bulle > a {
    left: clamp(16px, 4vw, 40px);
    justify-content: center;
  }
  /* Les grilles de deux colonnes retombent sur une seule */
  [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
  [style*="minmax(280px"] { grid-template-columns: 1fr !important; }
}

/* Très petits écrans : on desserre les marges intérieures */
@media (max-width: 380px) {
  .bulle > a { padding: 12px 18px !important; }
}

/* Grands écrans : le contenu reste centré, la typographie ne s'emballe pas */
@media (min-width: 1600px) {
  #accueil { min-height: min(82vh, 860px) !important; }
}

/* Écrans très larges (16/9 et au-delà) : hauteur de héros bornée */
@media (min-aspect-ratio: 2/1) and (min-width: 1000px) {
  #accueil { min-height: 92vh !important; }
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */
@media print {
  header, .bulle, .progression, .saut-contenu, .menu-mobile { display: none !important; }
  main { padding-top: 0 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  section { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #accueil > div:last-child > * { opacity: 1; transform: none; }
}