/* Fitem — socle : jetons de design (tokens.md), remise à zéro, éléments communs */

:root {
  /* Couleurs (planche « Couleurs » et styles de Cath) */
  --violet: #343875;
  --violet-moyen: #5D62A2;
  --lavande: #7E82BA;
  --lavande-claire: #B5B8E3;
  --lavande-voile: #D6D4FE;
  --lavande-carte: #CBCDE3;
  --corail: #C86954;
  --corail-survol: #B5503A;
  --or: #C09054;
  --noir: #232323;
  --titre: #3A3935; /* Marron #494742 recouvert de noir à 20 % */
  --marron: #494742;
  --gris-bordure: #D9D9D9;
  --gris-champ: #F2F2F2;
  --gris-entete: #C6C6C6;
  --fond-mobile: #F7F7F9;
  --jaune: #F4C311;
  --blanc: #FFFFFF;
  --degrade-gris: linear-gradient(to bottom right, rgba(232, 232, 232, .5), rgba(115, 115, 115, .4));

  /* Polices */
  --police-titre: "Syne", "Outfit", system-ui, sans-serif;
  --police-texte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mise en page */
  --contenu: 1280px;
  --gouttiere: clamp(16px, 5.56vw, 80px);
  --r-pilule: 50px;
  --r-carte: 16px;
  --r-bloc: 12px;
  --r-petit: 8px;
  --ombre-menu: 0 4px 4px rgba(0, 0, 0, .25);
  --ombre-popin: 0 8px 48px rgba(0, 0, 0, .2);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement { position: absolute; left: 16px; top: -100px; z-index: 2000; background: var(--noir); color: var(--blanc); padding: 10px 16px; border-radius: 4px; }
.lien-evitement:focus { top: 8px; }

.conteneur {
  width: 100%;
  max-width: calc(var(--contenu) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.icone { flex: none; }

/* Photos recadrées comme dans la maquette */
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recadrage repris de Figma : décalage (--pos) ou zoom autour d'un point (--zoom, --origine) */
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origine, 50% 50%);
}
@media (max-width: 767px) {
  .photo { object-position: var(--pos-m, 50% 50%); transform: scale(var(--zoom-m, 1)); transform-origin: var(--origine-m, 50% 50%); }
}

/* Cadrage repris de Figma : la photo garde ses proportions, sa largeur est en % du cadre (--w) et le point
   de la photo que Cath a mis au centre du cadre (--cx, --cy, en % de la photo) reste au centre quelle que soit
   la largeur de l'écran. Le cadre doit être positionné et rogner (overflow: hidden). */
.photo.photo--cadre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: auto;
  max-width: none;
  object-fit: fill;
  transform: translate(calc(-1% * var(--cx)), calc(-1% * var(--cy)));
}
@media (max-width: 767px) {
  .photo.photo--cadre { width: var(--w-m, var(--w)); transform: translate(calc(-1% * var(--cx-m, var(--cx))), calc(-1% * var(--cy-m, var(--cy)))); }
}

/* Textes différents entre bureau et mobile dans la maquette (un seul champ dans le thème, à trancher) */
.texte-mobile { display: none; }
.insecable { white-space: nowrap; }
@media (max-width: 767px) {
  .texte-bureau, .texte-bureau-flex { display: none !important; }
  .texte-mobile { display: inline; }
}

/* Titres de section */
.titre-section {
  font: 600 40px/48px var(--police-titre);
  color: var(--titre);
  text-wrap: balance;
}
.sous-titre-section { font: 300 24px/30.2px var(--police-texte); color: var(--noir); }

/* Boutons (composants CTA de Cath) */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pilule);
  font: 500 16px/20.2px var(--police-texte);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bouton--corail { background: var(--corail); color: var(--blanc); }
.bouton--corail:hover { background: var(--corail-survol); }
.bouton--blanc { background: var(--blanc); color: var(--noir); }
.bouton--blanc:hover { background: var(--gris-champ); }
.bouton--violet { background: var(--violet); color: var(--blanc); }
.bouton--violet:hover { background: #2A2D60; }
.bouton--contour {
  padding: 15px 20px;
  background: var(--blanc);
  border: 1px solid rgba(73, 71, 66, .5);
  color: var(--titre);
  font: 600 16px/20px var(--police-titre);
}
.bouton--contour:hover { border-color: var(--titre); }

/* Étiquette pilule */
.etiquette {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  border-radius: var(--r-pilule);
  font: 400 14px/20px var(--police-texte);
  color: var(--noir);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .conteneur { padding-inline: 16px; }
  .titre-section { font-size: 26px; line-height: 30px; }
  .sous-titre-section { font-size: 14px; line-height: 17.6px; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Badge flottant Avis Vérifiés : son script le réduit à 42 % en style en ligne, trop gros sur téléphone
   (il masque le contenu en bas à gauche). On le ramène à 30 %, ancré au même coin. */
@media (max-width: 767px) {
  [id^="netreviewsWidgetNum"][id$="widget03av"] { transform: scale(.3) !important; }
}