/**
 * loreaux-maxime — Base : reset léger, typographie, utilitaires, boutons.
 * Issu de maquette/accueil-v2.html (validée le 2026-10-27).
 */

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Le parent souligne tous les liens au survol : ici, seuls les liens de texte le font (règles dédiées). */
a:hover { text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
svg { flex: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-blue, .on-ink { --focus: var(--sun); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }

.sc-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 300;
  background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: 12px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Informations à confirmer : volontairement visibles */
.ph {
  font-family: var(--mono);
  font-size: .8em;
  font-weight: 500;
  letter-spacing: 0;
  background: #FFF3C9;
  color: #5A4500;
  padding: .05em .4em;
  border-radius: 5px;
  outline: 1px dashed #B58900;
  outline-offset: -1px;
}

/* Typographie : un seul caractère, la graisse et la chasse portent la hiérarchie */
.display, .h2 {
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -.035em;
  line-height: .95;
  text-wrap: balance;
}
.h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--slate); max-width: 36rem; }
.lead strong { color: var(--ink); font-weight: 650; }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
@media (max-width: 899px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

/* Mot souligné : un trait jaune tracé à la main */
.u { position: relative; display: inline-block; z-index: 0; }
.u__line {
  position: absolute; left: -.04em; right: -.06em; bottom: -.12em; z-index: -1;
  width: calc(100% + .1em); height: .34em; overflow: visible;
}
.u__line path { fill: none; stroke: var(--sun); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (max-width: 599px) { .u__line path { stroke-width: 6; } }

/* Étiquette autocollant */
.sticker {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--sun); color: var(--ink);
  font-weight: 750; font-stretch: 92%; font-size: .9375rem; line-height: 1.2;
  padding: .45rem .85rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
  white-space: nowrap;
}
.sticker--white { background: var(--white); }

/* Emplacement photo : image Banana par-dessus un dégradé de secours */
.slot {
  position: relative;
  background-color: var(--p-sky);
  /* var(--img, none) : sans image choisie, la déclaration reste valide et le dégradé s'affiche */
  background-image: var(--img, none), var(--fallback, linear-gradient(160deg, #DCE4FF, #9DB1FF));
  background-size: cover, cover;
  background-position: var(--pos, center), center;
}

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 1.25rem; height: 1.25rem; }
.btn--blue { background: var(--blue); color: var(--white); box-shadow: inset 0 -3px 0 var(--blue-deep); }
/* WhatsApp : vert plein, texte bleu nuit (le blanc sur ce vert n'est pas lisible : 2:1). */
.btn--wa { background: var(--wa); color: var(--ink); }
.btn--wa .wa-ico { width: 1.6rem; height: 1.6rem; }
.btn--sun { background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); background: var(--white); }

/* Survol (repris de Selena) : un fond bleu nuit balaie le bouton de gauche à droite,
   puis repart vers la droite à la sortie. --btn-fill / --btn-fill-text changent la couleur. */
.btn, .btn-icon, .wa-card, .form-card .sc-contact-form__submit {
  position: relative; isolation: isolate; overflow: hidden;
  --btn-fill: var(--ink); --btn-fill-text: var(--white);
}
.btn::before, .btn-icon::before, .wa-card::before, .form-card .sc-contact-form__submit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0); transform-origin: right center;
  pointer-events: none;
}
:is(.btn, .btn-icon, .wa-card, .form-card .sc-contact-form__submit:enabled):is(:hover, :focus-visible) { color: var(--btn-fill-text); }
:is(.btn, .btn-icon, .wa-card, .form-card .sc-contact-form__submit:enabled):is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-icon, .wa-card, .form-card .sc-contact-form__submit { transition: color .45s var(--ease, ease); }
  .btn::before, .btn-icon::before, .wa-card::before, .form-card .sc-contact-form__submit::before { transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; }
.link-arrow .chip-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.link-arrow .chip-ico svg { width: 1rem; height: 1rem; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: .2em; }


/* =========================================================
   Compléments au module motion du parent
   ========================================================= */
/* Soulignement du titre principal : tracé après l'apparition des mots.
   .is-inview est posé par le module (data-sc-inview) ; sans module, le trait est déjà là. */
.sc-motion [data-sc-inview]:not(.is-inview) .u__line { clip-path: inset(0 100% 0 0); }
.sc-motion [data-sc-inview] .u__line { transition: clip-path .9s var(--ease) 1.1s; }
/* SplitText masque chaque ligne (overflow: clip) : une marge évite de rogner le soulignement. */
.u .sc-line-mask, .sc-line-mask:has(.u) { overflow-clip-margin: .4em; }

/* Lien d'évitement et texte réservé aux lecteurs d'écran du parent, alignés sur la charte */
.sc-skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 300; background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: 12px; text-decoration: none; }
.sc-skip-link:focus { top: 12px; }