/* Site de Véronique Canivet — HTML, CSS et JS purs.
   Reproduction de la mise en page Wix : planche de 980 px, bandes pleine
   largeur, colonnes proportionnelles. Écrit à partir des valeurs relevées
   dans le JSON de page Wix ; aucune ligne de CSS de Wix n'y figure. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: 'Work Sans', sans-serif;
  color: #191532;
  overflow-x: hidden;
  /* Pas de gras synthétique : chaque famille n'a qu'une graisse, et la
     laisser épaissir par le navigateur élargit le texte de 5 % — assez pour
     déplacer les retours à la ligne. L'italique, lui, reste synthétisé :
     Work Sans n'a pas de vraie italique et le site en ligne fait pareil. */
  font-synthesis: style;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; }

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: #191532; padding: .75rem 1rem;
}
.evitement:focus { left: 0; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid #F5945F; outline-offset: 2px; }

/* ------------------------------------------------------------- ossature */
.page { position: relative; }
.sec { position: relative; width: 100%; }

/* Une bande Wix occupe toute la largeur, moins sa marge de site. */
.bande {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: stretch;
}
.bande > .fond { z-index: 0; }
.bande__i { position: relative; display: flex; width: 100%; height: 100%; }
.col { position: relative; flex-basis: 0; min-width: 0; }
.col__b { position: relative; height: 100%; max-width: 100%; }

/* Contenu posé directement sur la section : planche de 980 px centrée. */
.planche {
  position: absolute; left: 50%; top: 0;
  width: 980px; height: 100%;
  transform: translateX(-50%);
}

/* La planche est un cadre de positionnement : elle n'a ni fond ni contenu
   propre, et elle est écrite APRÈS les bandes dans le HTML. À `z-index`
   égal, c'est le dernier qui l'emporte : sa surface vide se posait donc
   par-dessus les bandes et avalait leurs clics. Sur l'accueil, une planche
   ne portant que l'ancre `#contact` rendait ainsi tout le formulaire
   inutilisable — champs visibles, mais impossibles à remplir.
   Le cadre laisse passer le pointeur, ses enfants le reprennent. */
.planche { pointer-events: none; }
.planche > * { pointer-events: auto; }

.el { position: absolute; }
.grp { position: absolute; }
.ancre { position: absolute; top: 0; }

/* ----------------------------------------------------------------- fonds */
.fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.fond > * { position: absolute; inset: 0; }
.fond__img picture, .fond__img img { width: 100%; height: 100%; }
.fond__img img { object-fit: cover; object-position: center; }
/* Le fond occupe le plan 0 de son conteneur ; tout le reste passe au-dessus.
   ATTENTION : ne jamais imposer `position` ici. Une règle
   `.sec > :not(.fond) { position: relative }` écrase le positionnement absolu
   des bandes — sans effet visible tant qu'une section n'a qu'une bande, mais
   les sections à plusieurs bandes les empilent alors en flux. */
.bande, .planche, .col, .col__b, .el, .diapo__r, .bande__i > .col { z-index: 1; }
.bande, .col, .sec, .diapo { isolation: isolate; }

/* ----------------------------------------------------------------- texte */
/* Wix ne souligne pas les liens posés dans un texte : ils prennent la
   couleur écrite dans le texte lui-même. */
.txt a { color: inherit; text-decoration: none; }
.txt a:hover, .txt a:focus-visible { text-decoration: underline; }
.txt .vide { height: 1em; }
.vec__i, .vec__i svg { width: 100%; height: 100%; }
.vec { display: flex; }
.vec > a { display: block; width: 100%; height: 100%; }

/* Un filet Wix garde la boîte de sa mise en page ; le trait est dessiné en
   bordure, d'épaisseur `lnw`, et `box-sizing: border-box` l'empêche de
   déborder (le filet vertical fait 5 px de large pour un trait de 6). */
.filet { border-top: var(--ep, 6px) solid var(--trait); }
.filet--v { border-top: 0; border-left: var(--ep, 6px) solid var(--trait); }

/* --------------------------------------------------------------- boutons */
.bouton {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--bg, transparent);
  border: var(--bw, 2px) solid var(--bd, currentColor);
  border-radius: var(--rd, 0);
  color: var(--tx, inherit);
  font-family: var(--ff, Montserrat, sans-serif);
  font-size: var(--fs, 12px);
  font-weight: var(--fw, 700);
  line-height: var(--lh, 1.4);
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton:hover, .bouton:focus-visible {
  background: var(--bgh, var(--bg));
  border-color: var(--bdh, var(--bd));
  color: var(--txh, var(--tx));
}

/* ---------------------------------------------------------------- entête */
.entete {
  position: sticky; top: 0; z-index: 40;
  width: 100%;
}
.entete > .bande { height: 100%; }
.menu { display: flex; align-items: center; }
.menu ul {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0; margin: 0; padding: 0; list-style: none; width: 100%;
}
.menu a {
  display: block;
  padding: var(--pad, 5px) 10px;
  color: var(--tx, #88D2F2);
  font-family: var(--ff, 'Work Sans', sans-serif);
  font-size: var(--fs, 13px);
  font-weight: var(--fw, 600);
  line-height: var(--lh, 1.4);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.menu a:hover, .menu a:focus-visible { color: var(--txh, #F5945F); }
.menu a[aria-current="page"] { color: var(--txs, #F5945F); }
.mobile-seul { display: none; }
.entete__c, .entete__b { display: none; }

/* ------------------------------------------------------------ formulaire */
.champ input, .champ textarea {
  width: 100%; height: 100%;
  padding: .5rem .75rem;
  border: 1px solid #D9D9D9;
  border-radius: 0;
  background: #fff;
  font: inherit; font-size: 15px;
  color: #191532;
}
.champ textarea { resize: vertical; }
.form__etat { position: absolute; left: 0; bottom: -1.75rem; font-size: 14px; }
/* message de confirmation : masqué sans être retiré du flux, comme l'original */
.form__succes { visibility: hidden; }
.form__succes.montre { visibility: visible; }

/* ------------------------------------------------------------- carrousel */
.diapo__r { position: absolute; left: 0; right: 0; overflow: hidden; }
.diapo__l { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
/* Wix fait glisser les diapositives horizontalement (SlideHorizontal) :
   la suivante entre par le bord, la sortante part de l'autre côté. */
.diapo {
  position: absolute; inset: 0;
  transform: translateX(100%);
  transition: transform .8s ease;
  pointer-events: none;
}
.diapo[data-actif] { transform: translateX(0); pointer-events: auto; }
.diapo__b {
  position: absolute; top: 50%; z-index: 3;
  width: 33px; height: 33px; margin-top: -16px;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.diapo__b::before {
  content: ""; display: block; width: 18px; height: 18px;
  border-top: 3px solid #fff; border-right: 3px solid #fff;
}
.diapo__b--p { left: 100px; }
.diapo__b--p::before { transform: rotate(-135deg); }
.diapo__b--s { right: 100px; }
.diapo__b--s::before { transform: rotate(45deg); margin-left: 8px; }
.diapo__p {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3;
  display: flex; justify-content: center; gap: 12px;
}
.diapo__p button {
  width: 6px; height: 6px; padding: 0;
  border: 1px solid #fff; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.diapo__p button[aria-selected="true"] { background: #fff; }

/* --------------------------------------------------------------- galerie */
.galerie ul { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
.galerie li { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.galerie li[data-actif] { opacity: 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie__b {
  position: absolute; top: 50%; z-index: 2;
  width: 32px; height: 32px; margin-top: -16px;
  border: 0; background: rgba(0,0,0,.35); cursor: pointer;
}
.galerie__b::before {
  content: ""; display: block; margin: 8px auto; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.galerie__b--p { left: 8px; }
.galerie__b--p::before { transform: rotate(-135deg); }
.galerie__b--s { right: 8px; }
.galerie__b--s::before { transform: rotate(45deg); }

.reseaux { display: flex; align-items: center; gap: 14px; }
.reseaux a { display: block; width: 24px; height: 24px; }
.reseaux svg { width: 100%; height: 100%; }

/* ------------------------------------------------- effets d'apparition
   Wix fait monter chaque élément de 60 px en fondu quand il entre dans
   l'écran (effet « FloatIn » vers le bas, seuil 0,15, joué une seule fois).
   Durée et délai sont relevés composant par composant.

   L'état initial n'est posé que sous `.anim`, classe ajoutée par un script
   en tête de page : sans JavaScript, rien n'est masqué. */
.anim [data-anim] { opacity: 0; will-change: opacity, transform; }
.anim [data-anim="bottom"] { transform: translateY(60px); }
.anim [data-anim="top"]    { transform: translateY(-60px); }
.anim [data-anim="left"]   { transform: translateX(-60px); }
.anim [data-anim="right"]  { transform: translateX(60px); }
.anim [data-anim].vu {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--anim-d, 1000ms) cubic-bezier(.445, .05, .55, .95) var(--anim-r, 0ms),
    transform var(--anim-d, 1000ms) cubic-bezier(.445, .05, .55, .95) var(--anim-r, 0ms);
}
.anim [data-anim].vu.fini { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .diapo, .galerie li, .bouton { transition: none !important; }
  .anim [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ----------------------------------------------------- écrans plus étroits
   En dessous de 980 px, la planche ne tient plus. Le site est réduit
   proportionnellement par `script.js` (propriété `zoom` sur <body>), ce qui
   conserve la mise en page d'origine au lieu d'en inventer une autre.
   Sans JavaScript, la page défile horizontalement. */
@media (max-width: 979.98px) {
  body { min-width: 980px; }
  body.echelle { min-width: 0; }
}

.font_0{font-family:'Work Sans', sans-serif;font-weight:600;font-size:70px;line-height:1.4;color:#4A298F}
.font_1{font-weight:300;font-size:16px;line-height:1.4;color:#999997}
.font_2{font-family:'Work Sans', sans-serif;font-weight:600;font-size:28px;line-height:1.4;color:#4A298F}
.font_3{font-family:'Work Sans', sans-serif;font-weight:600;font-size:24px;line-height:1.4;color:#191532}
.font_4{font-family:'Work Sans', sans-serif;font-weight:600;font-size:60px;line-height:1.4;color:#4A298F}
.font_5{font-family:'Work Sans', sans-serif;font-weight:300;font-size:22px;line-height:1.4;color:#312B64}
.font_6{font-family:'Work Sans', sans-serif;font-weight:600;font-size:18px;line-height:1.4;color:#312B64}
.font_7{font-family:'Work Sans', sans-serif;font-weight:300;font-size:18px;line-height:1.4;color:#191532}
.font_8{font-family:'Work Sans', sans-serif;font-weight:300;font-size:16px;line-height:1.4;color:#312B64}
.font_9{font-family:'Work Sans', sans-serif;font-weight:600;font-size:15px;line-height:1.4;color:#4A298F}
.font_10{font-weight:300;font-size:12px;line-height:1.4;color:#999997}