@charset "ISO-8859-1";
/* senior.rencontreparsms.com - feuille unique, mobile d'abord.
   Audience 50+ : corps de texte large, contraste eleve, cibles tactiles genereuses. */

:root {
  /* Couleur de marque : reecrite par le generateur pour chaque site */`n  --marque:        #f59200;
  --marque-clair:  #ffab21;
  --marque-fonce:  #d97d00;
  --ciel:          #4a9fd4;
  --ciel-fonce:    #2b7cb0;
  --encre:         #22201d;
  --encre-douce:   #55504a;
  --creme:         #fdfaf5;
  --bordure:       #e6ded2;
  --blanc:         #ffffff;

  --large:  min(1080px, 100% - 2rem);
  --rayon:  10px;
  --ombre:  0 2px 8px rgba(34, 32, 29, .10);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Pas de police telechargee : affichage immediat, zero requete.
     Georgia pour les titres (chaleureuse, tres lisible), sans-serif systeme pour le texte. */
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;      /* 18px : plus grand que la valeur par defaut */
  line-height: 1.6;
  color: var(--encre);
  background: var(--creme);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ciel-fonce); }
a:hover { color: var(--marque-fonce); }

.contenu { width: var(--large); margin-inline: auto; }

/* ---------- En-tete ---------- */

.entete {
  background: linear-gradient(180deg, var(--marque-clair), var(--marque));
  color: var(--blanc);
  padding: .9rem 0;
  box-shadow: var(--ombre);
}
.entete .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.marque {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.marque span { display: block; font-size: .82rem; font-weight: 400; opacity: .92; letter-spacing: .04em; }

.nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.nav a {
  color: var(--blanc);
  text-decoration: none;
  padding: .55rem .8rem;
  border-radius: var(--rayon);
  font-size: .97rem;
  min-height: 44px;              /* cible tactile confortable */
  display: inline-flex;
  align-items: center;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,.22); color: var(--blanc); }

/* ---------- Hero ---------- */

.hero { padding: 1.5rem 0 0; }
.hero-image {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  margin-bottom: 1.25rem;
}
.hero-image img { width: 100%; }

.accroche {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0 0 1.25rem;
  color: var(--encre);
}
.accroche strong { color: var(--marque-fonce); }

/* ---------- Carte formulaire ---------- */

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
}
.carte h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  margin: 0 0 1rem;
  color: var(--marque-fonce);
}

.champ-groupe { margin-bottom: 1rem; }
.champ-groupe label,
.etiquette {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
  font-size: 1.02rem;
}

select, input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%;
  font: inherit;
  font-size: 1.08rem;
  padding: .75rem .8rem;
  min-height: 50px;              /* confortable au doigt */
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
}
select:focus, input:focus {
  outline: 3px solid var(--ciel);
  outline-offset: 1px;
  border-color: var(--ciel);
}
input.erreur { border-color: #cc2b20; background: #fff3f2; }

.radios { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.radios label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 400;
  min-height: 44px;
  cursor: pointer;
}
input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--marque); }

.case { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .9rem; font-size: .97rem; }
.case input { margin-top: .2rem; flex: 0 0 auto; }

.bouton {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blanc);
  background: linear-gradient(180deg, var(--marque-clair), var(--marque));
  border: 0;
  border-radius: var(--rayon);
  padding: .95rem 1.2rem;
  min-height: 56px;
  cursor: pointer;
  box-shadow: var(--ombre);
}
.bouton:hover { background: linear-gradient(180deg, var(--marque), var(--marque-fonce)); }
.bouton:focus-visible { outline: 3px solid var(--ciel-fonce); outline-offset: 2px; }
.bouton.secondaire {
  background: none;
  color: var(--encre-douce);
  border: 2px solid var(--bordure);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 400;
  margin-top: .6rem;
  min-height: 48px;
}
.bouton.secondaire:hover { background: #f3ede4; color: var(--encre); }

.mention-tarif {
  font-size: .9rem;
  color: var(--encre-douce);
  margin: .9rem 0 0;
  line-height: 1.45;
}
.mention-tarif strong { color: var(--encre); }

.message {
  border-left: 4px solid var(--marque);
  background: #fff6e6;
  padding: .8rem 1rem;
  border-radius: var(--rayon);
  margin-bottom: 1rem;
}

/* ---------- Profils ---------- */

.profils { margin: 2rem 0 1.5rem; }
.profils h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin: 0 0 .9rem;
}
.grille-profils {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
.profil {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--marque);
  border-radius: var(--rayon);
  padding: .8rem .9rem;
  text-decoration: none;
  color: inherit;
  display: block;
}
.profil:hover { border-left-color: var(--ciel); background: #fffdf8; color: inherit; }
.profil b { display: block; font-size: 1.05rem; }
.profil .lieu { color: var(--encre-douce); font-size: .88rem; }
.profil .mot { display: block; margin-top: .3rem; font-style: italic; font-size: .95rem; }

/* ---------- Conversation ---------- */

.conversation { margin: 1.75rem 0; }
.conversation h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin: 0 0 .9rem;
}
.fil { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fil li {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .65rem .85rem;
  font-size: 1rem;
  max-width: 88%;
}
.fil li.eux { margin-left: auto; background: #fff6e6; border-color: #f2dfbc; }
.fil .qui { font-weight: 700; color: var(--marque-fonce); }
.fil li.eux .qui { color: var(--ciel-fonce); }

/* ---------- Temoignages (page dediee) ---------- */

.temoignage {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
}
.temoignage h3 {
  margin: 0 0 .4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  color: var(--marque-fonce);
}
.temoignage p { margin: 0; }

/* ---------- Texte long (mentions) ---------- */

.texte { max-width: 68ch; }
.texte h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin: 1.6rem 0 .6rem;
}
.texte p { margin: 0 0 1rem; }

/* ---------- Pied ---------- */

.pied {
  margin-top: 2.5rem;
  padding: 1.5rem 0 2rem;
  background: #f3ede4;
  border-top: 3px solid var(--marque);
  font-size: .88rem;
  color: var(--encre-douce);
  line-height: 1.55;
}
.pied a { color: var(--ciel-fonce); }
.pied .legal { margin: .8rem 0 0; }

.appel-autre {
  display: inline-block;
  margin: 1rem 0 0;
  font-weight: 600;
}

/* ---------- A partir de la tablette ---------- */

@media (min-width: 700px) {
  body { font-size: 1.15rem; }
  .marque { font-size: 1.6rem; }
  .accroche { font-size: 2rem; }
  .hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.75rem;
    align-items: start;
    padding-top: 2rem;
  }
  .hero-image { margin-bottom: 0; }
  .grille-profils { grid-template-columns: repeat(4, 1fr); }
  .fil li { max-width: 68%; }
  .carte { padding: 1.6rem; }
}

@media (min-width: 1000px) {
  .accroche { font-size: 2.25rem; }
}

/* ---------- Confort de lecture et accessibilite ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .entete, .nav, .bouton, .hero-image { display: none; }
  body { background: #fff; font-size: 12pt; }
}

/* ---------- Arguments commerciaux (sites migres depuis WordPress) ---------- */

.arguments {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.arguments li {
  position: relative;
  padding: .55rem .8rem .55rem 2.1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
  line-height: 1.4;
}
.arguments li::before {
  content: "";
  position: absolute;
  left: .8rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  margin-top: -.28rem;
  border-radius: 50%;
  background: var(--marque);
}
.arguments li:first-child {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--marque-fonce);
}

/* ---------- Diaporama du mobile (sites hybrides) ---------- */
/* Les images sont empilees et se succedent en fondu, sans JavaScript.
   Duree totale 15 s pour 6 vues. Chaque image porte son propre
   animation-delay, calcule a la generation. */

.diaporama {
  position: relative;
  width: 174px;
  height: 214px;
  margin: 1.75rem auto 0;
}
.diaporama img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: defile 15s infinite;
}
@keyframes defile {
  0%, 2%    { opacity: 0; }
  4%, 14%   { opacity: 1; }
  16%, 100% { opacity: 0; }
}
/* Sans animation : on montre la premiere vue, fixe. */
@media (prefers-reduced-motion: reduce) {
  .diaporama img { animation: none; opacity: 0; }
  .diaporama img:first-child { opacity: 1; }
}

/* ---------- Portraits de profil (sites hybrides) ---------- */

.profil .portrait {
  width: 46px;
  height: 63px;
  border-radius: 6px;
  float: right;
  margin: 0 0 .4rem .6rem;
  object-fit: cover;
}

/* ---------- Portraits dans les temoignages ---------- */
/* Les portraits d'origine sont petits (41 a 73 px de large) : on les affiche
   a leur taille utile sans les agrandir, sinon ils deviennent flous. */

.temoignage {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.temoignage > div { flex: 1 1 auto; min-width: 0; }
.portrait-temo {
  flex: 0 0 auto;
  width: 58px;
  height: 76px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--bordure);
}
.temoignage:not(:has(.portrait-temo)) { display: block; }

/* ---------- Messages bloquants et message de succes ---------- */
/* Ces deux blocs decident si le visiteur s'inscrit ou abandonne : ils doivent
   se voir immediatement, sans dependre de la couleur du site. Rouge et vert
   sont doubles d'un pictogramme et du gras, pour rester lisibles par une
   personne daltonienne ou sur un ecran mal calibre. */

.alerte,
.succes {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--rayon);
  border: 2px solid;
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 700;
}
.alerte::before,
.succes::before {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1.1;
}

.alerte {
  color: #7a1c14;
  background: #fdecea;
  border-color: #c0392b;
}
.alerte::before { content: "\26A0"; }          /* triangle d'avertissement */

.succes {
  color: #1c5c2e;
  background: #e8f6ec;
  border-color: #2e7d43;
}
.succes::before { content: "\2713"; }           /* coche */

.alerte ul {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  font-weight: 400;
}
.alerte li { margin-bottom: .25rem; }
.alerte .titre-alerte { display: block; margin-bottom: .1rem; }

/* Champ en faute : bordure rouge epaisse, visible sans lire le message */
input.erreur,
select.erreur {
  border-color: #c0392b;
  background: #fdecea;
}
input.erreur:focus { outline-color: #c0392b; }

/* Message sous un champ en faute : rouge et gras, pas le gris des mentions */
.erreur-champ {
  margin: .35rem 0 0;
  color: #7a1c14;
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.35;
}


/* ---------- Couleur propre a ce site ---------- */
/* Relevee sur la version d'origine. Modifier ces trois valeurs suffit
   a rehabiller tout le site : bandeau, boutons, liens, bordures. */
:root {
  --marque:        #7B5C91;
  --marque-clair:  #9880A9;
  --marque-fonce:  #604871;
  --sur-marque:    #ffffff;   /* contraste 5.55:1 */
  --bandeau: linear-gradient(180deg, var(--marque-clair), var(--marque));
}
.entete { background: var(--bandeau); }

/* Le texte pose sur la couleur de marque suit --sur-marque, calcule pour
   garantir un contraste suffisant quelle que soit la teinte du site. */
.entete, .marque, .nav a            { color: var(--sur-marque); }
.nav a:hover, .nav a:focus-visible  { color: var(--sur-marque); }
.bouton                             { color: var(--sur-marque); }
.bouton.secondaire                  { color: var(--encre-douce); }