/* ==========================================================================
   SWISSCARE — Feuille de style du site
   --------------------------------------------------------------------------
   Ce fichier contient TOUTE l'apparence du site : couleurs, polices,
   espacements, composants. Les pages HTML ne contiennent que du contenu.

   Pour changer une couleur partout sur le site, modifiez une seule ligne
   dans le bloc « :root » ci-dessous.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LES VARIABLES — la palette et les polices du site
   -------------------------------------------------------------------------- */
:root {
  /* Bleu de la marque */
  --bleu:        #17356F;   /* bleu roi, couleur principale */
  --bleu-fonce:  #0F2450;   /* survol des liens et boutons */
  --bleu-clair:  #E7ECF6;   /* fonds de pastilles */
  --bleu-surface:#EEF1F8;   /* fonds de blocs */
  --bleu-bord:   #D4DCE9;   /* bordures claires */

  /* Textes sur fond bleu */
  --sur-bleu:        #C3CFE6;
  --sur-bleu-discret:#93A7CC;
  --bleu-separateur: #35528C;

  /* Fonds et textes */
  --ivoire:      #FBFAF7;   /* fond général du site */
  --creme:       #F5F4EE;   /* bandeau de réassurance */
  --bord:        #E4E2D9;   /* bordures chaudes */
  --encre:       #121A2B;   /* texte principal, pied de page */
  --texte:       #3A4356;   /* paragraphes */
  --texte-doux:  #4E5668;   /* textes secondaires */

  /* Textes sur fond sombre */
  --sur-sombre:  #A6B2C8;
  --sur-sombre-discret: #7C89A3;

  /* Accents */
  --laiton:      #8A6B2B;   /* petites mentions en capitales */
  --or:          #C9A24A;   /* repères du plan d'accès */
  --etoile:      #C98A2E;   /* étoiles des avis */
  --rouge-logo:  #E02A2E;   /* rouge du logo SwissCare */
  --rouge-clair: #F0555A;   /* logo sur fond sombre */

  /* Polices */
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte-police: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Largeur maximale du contenu */
  --largeur: 1280px;
  --marge: 48px;
}

/* --------------------------------------------------------------------------
   2. RÉGLAGES DE BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(34px, 4.4vw, 58px); }
h2 { font-size: clamp(27px, 3vw, 38px); }
h3 { font-size: clamp(18px, 1.6vw, 21px); }

p { margin: 0; }

a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-fonce); text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

/* Accessibilité : contour visible au clavier */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

/* Lien « aller au contenu », visible seulement au clavier */
.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--bleu); color: var(--ivoire);
  padding: 12px 20px; border-radius: 0 0 8px 0; z-index: 100;
}
.saut-contenu:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   3. STRUCTURE — le conteneur centré
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.section { padding: 64px 0; }
.section-serree { padding: 40px 0; }

/* --------------------------------------------------------------------------
   4. BANDEAU SUPÉRIEUR ET EN-TÊTE
   -------------------------------------------------------------------------- */
.bandeau-haut {
  background: var(--bleu);
  color: var(--sur-bleu);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.bandeau-haut .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; padding-top: 8px; padding-bottom: 8px;
}

.entete {
  background: var(--ivoire);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 50;
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 90px;
}

.logo { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-texte { display: flex; flex-direction: column; gap: 3px; }
.logo-nom {
  font-family: var(--titre); font-size: 27px; font-weight: 700;
  color: var(--bleu); letter-spacing: 0.03em; line-height: 1;
}
.logo-baseline {
  font-size: 10.5px; color: var(--texte-doux);
  letter-spacing: 0.14em; text-transform: uppercase;
}

.navigation { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.navigation a { color: var(--encre); padding: 12px 0; text-decoration: none; }
.navigation a:hover { color: var(--bleu); text-decoration: none; }
.navigation a.actif { color: var(--bleu); border-bottom: 2px solid var(--bleu); }

/* Bouton d'ouverture du menu, visible uniquement sur téléphone */
.bouton-menu {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--bleu-bord); border-radius: 9px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.bouton, .bouton-clair, .bouton-contour {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border-radius: 999px;
  font-family: var(--texte-police); font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  min-height: 52px;
}
.bouton { background: var(--bleu); color: var(--ivoire); }
.bouton:hover { background: var(--bleu-fonce); color: var(--ivoire); text-decoration: none; }

.bouton-contour { color: var(--bleu); border-color: var(--bleu); background: none; }
.bouton-contour:hover { background: var(--bleu-clair); text-decoration: none; }

.bouton-clair { background: var(--ivoire); color: var(--bleu); }
.bouton-clair:hover { background: #FFFFFF; color: var(--bleu-fonce); text-decoration: none; }

.bouton-telephone { padding: 13px 22px; font-size: 15px; min-height: 46px; }

/* --------------------------------------------------------------------------
   6. HÉRO — le haut de chaque page
   -------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 468px; gap: 56px; align-items: start; padding: 68px 0 60px; }
.hero-texte { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.hero img { border-radius: 18px; width: 100%; height: 400px; object-fit: cover; object-position: 55% 50%; }

.surtitre {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--laiton);
}
.chapeau { font-size: 19px; line-height: 1.6; color: var(--texte); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Encadré d'information bleu clair */
.info {
  display: flex; gap: 14px; align-items: flex-start;
  background: #EAEFF8; border: 1px solid #C2CFE6; border-radius: 12px;
  padding: 18px 20px; font-size: 14.5px; line-height: 1.6; color: #1E2C4C;
}
.info svg { flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------------------
   7. BANDEAU DE RÉASSURANCE (les quatre arguments)
   -------------------------------------------------------------------------- */
.reassurance {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--bord); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
.reassurance > div {
  background: var(--creme); padding: 26px 30px;
  display: flex; flex-direction: column; gap: 9px;
}
.reassurance strong { font-size: 15px; font-weight: 600; }
.reassurance span { font-size: 13.5px; color: var(--texte-doux); line-height: 1.5; }

/* --------------------------------------------------------------------------
   8. GRILLES ET CARTES
   -------------------------------------------------------------------------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.carte {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 14px;
  padding: 28px; display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit;
}
a.carte:hover { border-color: var(--bleu); text-decoration: none; }
.carte h3 { color: var(--encre); }
.carte p { font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.carte .lire { font-size: 14.5px; font-weight: 600; color: var(--bleu); margin-top: 4px; }
.carte-etiquette {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--laiton);
}

.carte-bleue { background: var(--bleu); border-color: var(--bleu); }
.carte-bleue h3 { color: var(--ivoire); }
.carte-bleue p { color: var(--sur-bleu); }
.carte-bleue .lire { color: var(--ivoire); }
.carte-bleue .carte-etiquette { color: var(--sur-bleu-discret); }

.carte-douce {
  background: var(--bleu-surface); border-radius: 14px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.carte-douce p { font-size: 14.5px; line-height: 1.6; color: var(--texte); }

/* --------------------------------------------------------------------------
   9. ÉTAPES NUMÉROTÉES
   -------------------------------------------------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.etape { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 3px solid var(--bleu); }
.etape .numero { font-family: var(--titre); font-size: 30px; color: var(--bleu); line-height: 1; }
.etape p { font-size: 14px; line-height: 1.6; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   10. PASTILLES DE COMMUNES
   -------------------------------------------------------------------------- */
.pastilles { display: flex; flex-wrap: wrap; gap: 9px; }
.pastille {
  font-size: 14px; padding: 9px 16px; border-radius: 999px;
  background: var(--bleu-clair); color: var(--bleu); font-weight: 500;
}
.pastille-or { background: #F4EFE3; color: #745A20; }

/* --------------------------------------------------------------------------
   11. AVIS CLIENTS
   -------------------------------------------------------------------------- */
.avis {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 14px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.etoiles { display: flex; gap: 3px; }
.avis blockquote { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texte); }
.avis cite { font-style: normal; font-size: 13.5px; color: var(--texte-doux); margin-top: auto; }

/* --------------------------------------------------------------------------
   12. QUESTIONS FRÉQUENTES
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.faq-liste > div { padding: 22px 0; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 9px; }
.faq-liste > div:last-child { border-bottom: 1px solid var(--bord); }
.faq-liste h3 { font-size: 18px; }
.faq-liste p { font-size: 15px; line-height: 1.65; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   13. TABLEAU DES TARIFS
   -------------------------------------------------------------------------- */
.tableau {
  width: 100%; border-collapse: collapse; background: #FFFFFF;
  border: 1px solid var(--bord); border-radius: 14px; overflow: hidden;
}
.tableau thead th {
  background: var(--bleu-surface); text-align: left; padding: 15px 26px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texte);
}
.tableau td { padding: 20px 26px; border-top: 1px solid var(--bord); font-size: 15.5px; vertical-align: middle; }
.tableau .prix { font-size: 17px; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.tableau .exemple { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }

/* --------------------------------------------------------------------------
   14. FICHES DE L'ÉQUIPE
   -------------------------------------------------------------------------- */
.equipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.soignant {
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.soignant .portrait {
  height: 196px; background: #EAEFF8; border-bottom: 1px solid var(--bleu-bord);
  display: flex; align-items: center; justify-content: center;
}
.soignant .portrait img { width: 158px; height: 158px; border-radius: 50%; object-fit: cover; }
.soignant .identite { padding: 17px 19px; display: flex; flex-direction: column; gap: 5px; }
.soignant .prenom { font-family: var(--titre); font-size: 18px; font-weight: 600; }
.soignant .fonction { font-size: 13.5px; color: var(--bleu); font-weight: 600; line-height: 1.4; }

.compteur-equipe {
  grid-column: span 3; background: var(--bleu); border-radius: 14px;
  padding: 32px 36px; display: flex; align-items: center; gap: 36px;
}
.compteur-equipe .chiffre { font-family: var(--titre); font-size: 76px; color: var(--ivoire); line-height: 1; flex-shrink: 0; }
.compteur-equipe strong { font-size: 19px; color: var(--ivoire); font-weight: 600; }
.compteur-equipe p { font-size: 14.5px; color: var(--sur-bleu); line-height: 1.6; }

/* --------------------------------------------------------------------------
   15. FORMULAIRE
   -------------------------------------------------------------------------- */
.formulaire {
  display: flex; flex-direction: column; gap: 18px;
  background: #FFFFFF; border: 1px solid var(--bord); border-radius: 16px; padding: 30px 32px;
}
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-size: 14px; font-weight: 600; color: #2B3446; }
input, select, textarea {
  font-family: var(--texte-police); font-size: 15px; color: var(--encre);
  background: #FFFFFF; border: 1px solid #D2D0C4; border-radius: 9px;
  padding: 13px 14px; width: 100%; min-height: 48px;
}
textarea { min-height: 110px; resize: vertical; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consentement { display: flex; align-items: flex-start; gap: 11px; }
.consentement input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex-shrink: 0; }
.consentement label { font-weight: 400; font-size: 13.5px; color: var(--texte-doux); line-height: 1.55; }

/* --------------------------------------------------------------------------
   16. BLOCS COLORÉS ET APPEL À L'ACTION
   -------------------------------------------------------------------------- */
.bloc-bleu { background: var(--bleu); color: var(--ivoire); border-radius: 16px; padding: 32px 34px; }
.bloc-bleu h2, .bloc-bleu h3 { color: var(--ivoire); }
.bloc-bleu p { color: var(--sur-bleu); }

.appel {
  background: var(--bleu); text-align: center; padding: 64px var(--marge);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.appel h2 { color: var(--ivoire); max-width: 700px; }
.appel p { color: var(--sur-bleu); max-width: 560px; font-size: 17px; }

.alerte {
  background: #FEF3C7; border: 1px solid #E8C879; border-radius: 12px;
  padding: 20px 22px; display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: #713F12; line-height: 1.6;
}
.alerte svg { flex-shrink: 0; margin-top: 2px; }

/* --------------------------------------------------------------------------
   17. FIL D'ARIANE
   -------------------------------------------------------------------------- */
.fil { padding: 20px 0 0; font-size: 13.5px; color: var(--texte-doux); }
.fil span { color: #A9A89C; margin: 0 6px; }

/* --------------------------------------------------------------------------
   18. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied { background: var(--encre); color: var(--sur-sombre); padding: 44px 0 38px; }
.pied .conteneur { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr; gap: 48px; }
.pied a { color: var(--sur-sombre); font-size: 13.5px; }
.pied a:hover { color: var(--ivoire); }
.pied p { font-size: 13.5px; line-height: 1.65; }
.pied .titre-colonne {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sur-sombre-discret); display: block; margin-bottom: 10px;
}
.pied-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pied-logo span { font-family: var(--titre); font-size: 22px; font-weight: 700; color: var(--ivoire); letter-spacing: 0.03em; }
.pied li { margin-bottom: 10px; }
.pied .ide { font-size: 12.5px; color: var(--sur-sombre-discret); }

/* --------------------------------------------------------------------------
   19. ADAPTATION AUX TABLETTES (moins de 1000 pixels de large)
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --marge: 28px; }
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero img { height: 300px; }
  .reassurance { grid-template-columns: repeat(2, 1fr); }
  .grille-3, .grille-4, .etapes, .equipe { grid-template-columns: repeat(2, 1fr); }
  .grille-2 { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .bloc-cout, .bloc-garanties, .bloc-charge { grid-template-columns: 1fr !important; gap: 24px !important; }
  .compteur-equipe { grid-column: span 2; }
  .pied .conteneur { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .navigation { gap: 18px; font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   20. ADAPTATION AUX TÉLÉPHONES (moins de 720 pixels de large)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --marge: 18px; }

  .bandeau-haut .conteneur { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11.5px; }
  .entete .conteneur { min-height: 64px; }
  .logo-baseline { display: none; }
  .logo-nom { font-size: 20px; }

  /* Le menu se replie derrière le bouton ; la barre d'appel prend le relais */
  .navigation { display: none; }
  .navigation.ouvert {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--ivoire); border-bottom: 1px solid var(--bord); padding: 8px var(--marge) 16px;
  }
  .navigation.ouvert a { padding: 14px 0; border-bottom: 1px solid var(--bord); font-size: 16px; }
  .navigation.ouvert .bouton-telephone { margin-top: 12px; border-bottom: none; }
  .bouton-menu { display: flex; }

  /* Barre d'appel fixe sous l'en-tête */
  .barre-appel {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--bleu); color: var(--ivoire); min-height: 52px;
    font-weight: 600; font-size: 16px; text-decoration: none;
  }
  .barre-appel:hover { color: var(--ivoire); text-decoration: none; }

  .section { padding: 40px 0; }
  .hero { padding: 28px 0 32px; gap: 24px; }
  .hero img { height: 220px; }
  .chapeau { font-size: 16.5px; }
  .actions { flex-direction: column; align-items: stretch; }
  .bouton, .bouton-contour, .bouton-clair { width: 100%; }

  .reassurance, .grille-3, .grille-4, .etapes, .equipe { grid-template-columns: 1fr; }
  .compteur-equipe { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 16px; }
  .compteur-equipe .chiffre { font-size: 56px; }

  .carte, .carte-douce, .bloc-bleu, .formulaire { padding: 22px; }
  .champ-double { grid-template-columns: 1fr; }

  /* Le tableau des tarifs se transforme en fiches empilées */
  .tableau, .tableau thead, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau thead { display: none; }
  .tableau tr { border-top: 1px solid var(--bord); padding: 6px 0; }
  .tableau td { border: none; padding: 6px 20px; }
  .tableau td::before { content: attr(data-libelle); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-doux); margin-bottom: 4px; }

  .pied .conteneur { grid-template-columns: 1fr; gap: 28px; }
  .appel { padding: 44px var(--marge); }
}

/* La barre d'appel n'existe que sur téléphone */
.barre-appel { display: none; }

/* --------------------------------------------------------------------------
   21. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .bandeau-haut, .navigation, .bouton-menu, .barre-appel, .appel { display: none; }
  body { background: #FFFFFF; font-size: 12pt; }
  .entete { position: static; }
}