/* ============================================================
   Les deux services, IdentiFié et IdentiTé (décision de Meven du 22/10/2026)
   ------------------------------------------------------------
   Chargée par base.html avec le nouvel en-tête seulement (interrupteur
   ACCUEIL_DEUX_SERVICES, ou pages d'aperçu) : tant qu'il est fermé, le reste
   du site ne la reçoit pas. Couleurs : variables --identifie* et --identite*
   de style.css.
   ============================================================ */

/* ---------- Le nom : « Identi » fixe, la fin en couleur ---------- */
.nom-service { white-space: nowrap; }
.nom-identifie .nom-fin, .nom-commun .nom-fin { color: var(--identifie); }
.nom-identite .nom-fin { color: var(--identite); }

/* ---------- En-tête ---------- */
.entete-svc .entete-nav { gap: 1rem; }
/* Logo sur deux lignes : le nom, puis « par IdentiBien » aligné sous lui
   (largeur du pictogramme + son écart). */
.logo-groupe { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; min-width: 0; }
/* Cible d'au moins 24 px de haut (WCAG 2.2, critère 2.5.8) : marges internes
   plutôt qu'un texte plus gros. */
.logo-par {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px;
  margin: -3px 0 -3px calc(30px + 0.55rem);
  font-size: 0.74rem; font-weight: 500; color: #56607a; text-decoration: none;
}
.logo-par:hover { color: var(--encre); text-decoration: underline; }
.entete-svc .entete-liens { gap: 1.1rem; }
.entete-svc .entete-lien { white-space: nowrap; }

/* Pastille vers l'autre service (ou vers les deux, sur une page commune) :
   toujours visible, dans l'en-tête sur ordinateur, sous lui sur téléphone. */
.pastille-service {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1px solid; border-radius: 999px; padding: 0.36rem 0.85rem;
  font-size: 0.88rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  text-decoration: none; color: var(--encre);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Plus précis que `.entete-liens a` (style.css), qui imposait sa taille. */
.entete-svc .entete-liens .pastille-service { color: var(--encre); font-size: 0.88rem; }
.pastille-identifie { background: var(--identifie-teinte); border-color: #b9cbf6; }
.pastille-identite { background: var(--identite-teinte); border-color: #9dd2c9; }
.pastille-identifie:hover { border-color: var(--identifie); }
.pastille-identite:hover { border-color: var(--identite); }
.pastille-nom { font-weight: 700; }

/* Boutons aux couleurs de chaque service (texte blanc à 4,5:1 au moins). */
.bouton-identifie { background: var(--identifie); color: #fff !important; }
.bouton-identifie:hover { background: var(--identifie-fonce); }
.bouton-identite { background: var(--identite); color: #fff !important; }
.bouton-identite:hover { background: var(--identite-fonce); }

/* Largeurs intermédiaires : la pastille garde le nom du service, sans la
   question, pour que l'en-tête tienne sur une ligne. La question reste lue
   par un lecteur d'écran (masquage visuel, comme .visuellement-masque), sinon
   le lien ne dirait plus que « IdentiTé » (revue vierge du 23/10/2026). */
@media (max-width: 1100px) {
  .entete-svc .pastille-question, .entete-svc .pastille-sep {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Téléphone et tablette : l'en-tête collant ne garde que le logo et le bouton ;
   rubriques et pastilles passent sur la ligne du dessous, qui s'en va au
   défilement (même principe que la ligne de rubriques actuelle). */
.entete-svc-telephone { display: none; }
@media (max-width: 960px) {
  .entete-svc .entete-liens > a:not(.bouton) { display: none; }
  .entete-svc-telephone {
    display: block; background: var(--fond); border-bottom: 1px solid var(--bordure);
    padding: 0 0.75rem 0.6rem;
  }
  .svc-rubriques { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 1.1rem; }
  .svc-rubriques a {
    display: inline-flex; align-items: center; min-height: 40px;
    color: var(--encre-douce); text-decoration: none; font-weight: 500; font-size: 0.88rem;
  }
  .svc-rubriques a:hover { color: var(--encre); }
  .svc-pastilles { display: flex; justify-content: center; gap: 0.5rem; }
  .svc-pastilles .pastille-service { min-height: 40px; }
  /* Page commune : les deux services côte à côte, à poids égal, la phrase du
     visiteur au-dessus du nom. */
  .svc-pastilles-deux .pastille-service {
    flex: 1 1 0; max-width: 220px; flex-direction: column; justify-content: center; gap: 0;
    border-radius: 12px; padding: 0.35rem 0.6rem; white-space: normal; text-align: center;
  }
  .svc-pastilles-deux .pastille-sep { display: none; }
  .svc-pastilles-deux .pastille-question { font-size: 0.78rem; color: var(--encre-douce); }
  .page-rapport .entete-svc-telephone { display: none; }
}
/* Petits téléphones : logo et bouton se resserrent pour tenir sur une ligne. */
@media (max-width: 400px) {
  .entete-svc .logo { font-size: 1.2rem; gap: 0.45rem; }
  .entete-svc .logo-picto { width: 26px; height: 26px; }
  .entete-svc .logo-par { margin-left: calc(26px + 0.45rem); }
  .entete-svc .bouton-petit { padding: 0.42rem 0.75rem; font-size: 0.85rem; }
}
@media print {
  .entete-svc-telephone, .autre-service { display: none !important; }
}

/* ---------- Pied de page ---------- */
.pied-grille-services { grid-template-columns: 1.3fr 1fr 1fr 0.8fr 1fr; }
.pied .nom-identifie .nom-fin { color: #93b4f8; }  /* lisibles sur le bleu nuit */
.pied .nom-identite .nom-fin { color: #5fd0c0; }
.pied-note { margin: 0.8rem 0 0; font-size: 0.82rem; }
@media (max-width: 960px) {
  .pied-grille-services { grid-template-columns: 1fr 1fr; }
  .pied-grille-services > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied-grille-services { grid-template-columns: 1fr; }
}

/* ---------- Vitrine (accueil de la marque) ---------- */
.vitrine-hero {
  background: linear-gradient(160deg, #f6f8fd 0%, #eef2fb 50%, #e9f4f2 100%);
  padding: 3.6rem 0 3.4rem;
}
.vitrine-tete { text-align: center; max-width: 760px; margin: 0 auto 2.4rem; }
.vitrine-surtitre { font-weight: 600; color: var(--encre-douce); font-size: 0.95rem; margin: 0 0 0.6rem; }
.vitrine-chapo { font-size: 1.12rem; color: var(--encre); max-width: 640px; margin: 0 auto; }
.vitrine-services {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: 940px; margin: 0 auto;
}
.carte-service {
  display: flex; flex-direction: column; align-items: stretch;
  background: #fff; border: 1px solid var(--bordure); border-top: 5px solid;
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.7rem 1.8rem 1.4rem;
}
.carte-identifie { border-top-color: var(--identifie); }
.carte-identite { border-top-color: var(--identite); }
.carte-service-nom { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.carte-service-situation { font-size: 1.15rem; font-weight: 700; color: var(--encre); margin: 0.15rem 0 0.7rem; }
.carte-service-promesse { margin: 0 0 1.1rem; flex: 1; }
.carte-service-prix {
  margin: 0 0 1.2rem; padding: 0.6rem 0.85rem; border-radius: 8px;
  background: var(--fond-gris); color: var(--encre); font-size: 0.95rem;
}
.carte-service-direct { align-self: center; margin-top: 0.75rem; font-size: 0.92rem; }
.carte-identite .carte-service-direct { color: var(--identite); }
.vitrine-mention { text-align: center; font-size: 0.88rem; color: var(--encre-douce); max-width: 640px; margin: 1.8rem auto 0; }

.familles-rapport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
.famille-rapport { padding: 1.25rem 1.35rem; }
.famille-rapport h3 { font-size: 1.04rem; margin-bottom: 0.35rem; }
.famille-rapport p { margin: 0; font-size: 0.95rem; }
/* Gris des notes trop pâle sur fond teinté (revue du 21/10/2026) : texte courant. */
.familles-reserve { color: var(--encre-douce); font-size: 0.9rem; max-width: 640px; margin: 1.4rem auto 1.2rem; }
.vitrine-engagements { margin-top: 1.8rem; }
.vitrine-engagements .carte { padding: 1.4rem 1.5rem; }
.vitrine-engagements h3 { font-size: 1.05rem; }
.vitrine-engagements p { margin: 0; }

/* ---------- Espace IdentiTé ---------- */
.hero-identite { background: linear-gradient(160deg, #f5fbfa 0%, #ebf6f3 55%, #e3f1ee 100%); }
.badge-identite { background: var(--identite-teinte); color: var(--identite-fonce); }
.carte-sommaire {
  background: #fff; border: 1px solid var(--bordure); border-top: 5px solid var(--identite);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.2rem 1.4rem 0.8rem; max-width: 400px; margin-left: auto;
}
.carte-sommaire-titre { font-weight: 800; color: var(--encre); margin: 0 0 0.4rem; }
.carte-sommaire ol { list-style: none; margin: 0; padding: 0; }
.carte-sommaire li { padding: 0.45rem 0; border-top: 1px solid var(--fond-gris); }
.carte-sommaire li strong { display: block; color: var(--encre); font-size: 0.95rem; }
.carte-sommaire li span { display: block; color: var(--encre-douce); font-size: 0.86rem; line-height: 1.4; }
.rubriques-carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.rubrique-carte { padding: 1.15rem 1.3rem; border-left: 4px solid var(--identite); }
.rubrique-carte h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.rubrique-carte p { margin: 0; font-size: 0.95rem; }
.etapes-identite { list-style: none; padding: 0; }
.etapes-identite .etape-numero { background: var(--identite); }
.etapes-identite p { margin: 0; }
.tarif-identite { border-top: 4px solid var(--identite); }

/* ---------- Bandeau de l'autre service, en bas d'un espace ---------- */
.autre-service { padding: 2.8rem 0; }
.autre-identite { background: var(--identite-teinte); }
.autre-identifie { background: var(--identifie-teinte); }
.autre-service-grille { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; }
.autre-service h2 { margin-bottom: 0.3rem; }
.autre-service p { margin: 0; color: var(--encre); max-width: 600px; }

@media (max-width: 960px) {
  .familles-rapport, .rubriques-carte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .vitrine-services { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vitrine-hero { padding: 2.2rem 0 2.4rem; }
  .vitrine-tete { margin-bottom: 1.6rem; }
  /* Chapô resserré : la seconde carte remonte vers le premier écran. */
  .vitrine-chapo { font-size: 1rem; }
  .carte-service { padding: 1.4rem 1.25rem 1.2rem; }
  .carte-service-nom { font-size: 1.85rem; }
  .familles-rapport, .rubriques-carte { grid-template-columns: 1fr; }
  .autre-service .bouton { width: 100%; }
}