/* ==========================================================================
   Papa.Elec — components.css
   Éléments réutilisables : en-tête, boutons, cartes, formulaire, pied de page.
   Convention de nommage : .bloc, .bloc__element, .bloc--variante
   ========================================================================== */

/* --- En-tête -------------------------------------------------------------- */
.en-tete {
  position: sticky;
  /* décalage sous la barre de session */
  top: var(--h-session, 0px);
  z-index: 40;
  background: var(--bleu-nuit);
}

.en-tete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 16px;
}

.en-tete__logo img { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 20px; }

.nav__lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: var(--titre);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav__lien:hover { color: var(--blanc); }
.nav__lien svg { flex-shrink: 0; stroke: var(--jaune); }
.nav__lien[aria-current="page"] {
  color: var(--blanc);
  border-bottom-color: var(--jaune);
}

.nav__tel {
  font-family: var(--titre);
  font-size: 14px;
  font-weight: 700;
  color: var(--bleu-nuit);
  background: var(--jaune);
  padding: 11px 20px;
  border-radius: var(--r-s);
  white-space: nowrap;
  transition: background var(--t-survol) ease-out, transform 80ms ease-out;
}
.nav__tel:hover { background: var(--jaune-fonce); color: var(--bleu-nuit); }
.nav__tel:active { transform: translateY(1px); }

/* Bouton burger — masqué au-dessus de 760px */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.burger svg { stroke: var(--jaune); }

/* Seuil relevé de 900 à 1080 px. En dessous de ~1060 px, le logo, les cinq
   libellés et le bouton d'appel ne tiennent plus sur une ligne : la barre
   dépassait de 33 px et le site défilait latéralement sur une tablette en
   paysage. Les icônes seules suffisent à cette largeur. */
@media (max-width: 1080px) {
  .nav__lien span { display: none; }          /* libellés masqués, icônes conservées */
  .nav { gap: 14px; }
}

@media (max-width: 760px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    /* décalé sous la barre de session quand un utilisateur est connecté */
    inset: calc(72px + var(--h-session, 0px)) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bleu-profond);
    padding: 8px 0 16px;
    transform: translateY(-120%);
    transition: transform var(--t-bascule) var(--courbe-sortie);
  }
  .nav[data-ouvert="true"] { transform: none; }
  .nav__lien {
    padding: 15px var(--marge-page);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .nav__lien span { display: inline; }
  .nav__lien[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, .08); }
  .nav__tel { margin: 12px var(--marge-page) 0; text-align: center; }
}

/* --- Barre de session ---------------------------------------------------- */
.barre-session {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--jaune);
  color: var(--bleu-nuit);
  box-shadow: inset 0 -1px 0 rgba(11, 31, 58, .14);
}

.barre-session__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  min-height: 44px;
}

.barre-session__gauche,
.barre-session__droite { display: flex; align-items: center; gap: 4px; }
.barre-session__droite { gap: 14px; }

.barre-session__marque {
  display: grid;
  place-items: center;
  margin-right: 8px;
  color: var(--bleu-nuit);
}
.barre-session__marque svg { stroke: currentColor; fill: currentColor; }

.barre-session__onglet {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(11, 31, 58, .68);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--t-survol) ease-out, box-shadow var(--t-survol) ease-out;
}
.barre-session__onglet:hover { color: var(--bleu-nuit); box-shadow: inset 0 -2px 0 rgba(11, 31, 58, .3); }
.barre-session__onglet--actif { color: var(--bleu-nuit); box-shadow: inset 0 -2px 0 var(--bleu-nuit); }
.barre-session__onglet:focus-visible { outline: 2px solid var(--bleu-nuit); outline-offset: -4px; }

.barre-session__identite { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.barre-session__nom {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barre-session__role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  /* 3,76 sur le jaune de la barre : la transparence mangeait le contraste.
     En opaque : 9,47. (audit 23/08) */
  color: #0B1F3A;
  white-space: nowrap;
}

.barre-session__forme { display: flex; }
.barre-session__quitter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-s);
  font-size: 13px;
  font-weight: 600;
  color: var(--bleu-nuit);
  background: rgba(11, 31, 58, .08);
  cursor: pointer;
  transition: background var(--t-survol) ease-out;
}
.barre-session__quitter:hover { background: rgba(11, 31, 58, .16); }
.barre-session__quitter svg { stroke: currentColor; }
.barre-session__quitter:focus-visible { outline: 2px solid var(--bleu-nuit); outline-offset: 2px; }

@media (max-width: 760px) {
  .barre-session__inner { padding: 0 16px; gap: 12px; }
  .barre-session__onglet { padding: 0 11px; font-size: 12px; }
  .barre-session__marque { display: none; }
  .barre-session__role { display: none; }
  .barre-session__quitter span { display: none; }
  .barre-session__quitter { padding: 8px 10px; }
}

/* --- Bandeau d'annonce ---------------------------------------------------- */
.bandeau-site { background: var(--attente-fond); color: var(--attente-texte); }
.bandeau-site--info { background: var(--fond-froid); color: var(--bleu-nuit); }
.bandeau-site--alerte { background: var(--alerte-fond); color: var(--alerte-texte); }
.bandeau-site[hidden] { display: none; }

.bandeau-site__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.bandeau-site__texte { font-size: 13px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.bandeau-site__texte a { color: inherit; text-decoration: underline; }

.bandeau-site__fermer {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  color: inherit;
  transition: background var(--t-survol) ease-out;
}
.bandeau-site__fermer:hover { background: rgba(0, 0, 0, .07); }
.bandeau-site__fermer svg { stroke: currentColor; }

@media (max-width: 700px) {
  .bandeau-site__texte { font-size: 12px; }
}

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 9px;
  text-align: center;
  transition: background var(--t-survol) ease-out,
              border-color var(--t-survol) ease-out,
              color var(--t-survol) ease-out,
              transform 80ms ease-out;
}
.btn:active { transform: translateY(1px); }

.btn--jaune { background: var(--jaune); color: var(--bleu-nuit); }
.btn--jaune:hover { background: var(--jaune-fonce); color: var(--bleu-nuit); }

.btn--bleu { background: var(--bleu-nuit); color: var(--blanc); }
.btn--bleu:hover { background: var(--bleu-profond); color: var(--blanc); }

.btn--blanc { background: var(--blanc); color: var(--bleu-nuit); }
.btn--blanc:hover { background: #F1F5F9; color: var(--bleu-nuit); }

.btn--contour {
  border: 2px solid rgba(255, 255, 255, .4);
  color: var(--blanc);
  padding: 12px 22px;
}
.btn--contour:hover { border-color: var(--blanc); color: var(--blanc); }

.btn--contour-bleu {
  border: 2px solid var(--bordure-forte);
  color: var(--bleu-nuit);
  padding: 12px 22px;
}
.btn--contour-bleu:hover { border-color: var(--bleu-nuit); }

.btn--bloc { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* --- Étiquettes ----------------------------------------------------------- */
.etiquette {
  display: inline-block;
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--bleu-nuit);
  color: var(--blanc);
}
.etiquette--douce { background: var(--fond-panneau); color: var(--bleu-moyen); font-weight: 600; }
.etiquette--jaune { background: var(--jaune); color: var(--bleu-nuit); }

.puce {
  display: inline-block;
  font-size: 13px;
  background: var(--fond-froid);
  color: var(--bleu-nuit);
  padding: 6px 12px;
  border-radius: 20px;
}

/* --- Cartes --------------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  padding: 22px;
  transition: transform var(--t-survol) ease-out,
              box-shadow var(--t-survol) ease-out,
              border-color var(--t-survol) ease-out;
}
.carte--cliquable:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-carte);
  border-color: var(--bleu-clair);
}

.carte__icone {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bleu-nuit);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.carte__icone svg { stroke: var(--jaune); }

.carte__titre { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.carte__texte { font-size: 14px; line-height: 1.7; color: var(--gris-texte); }
.carte__prix {
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 700;
  color: var(--bleu-nuit);
  margin-top: 14px;
}
.carte__prix small { display: block; font-family: var(--texte); font-size: 12px; font-weight: 400; color: var(--gris-doux); }

/* Carte média (chantier) */
.carte-media {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform var(--t-survol) ease-out, box-shadow var(--t-survol) ease-out;
}
.carte-media:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.carte-media__visuel { overflow: hidden; aspect-ratio: 3 / 2; }
.carte-media__visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-bascule) ease-out;
}
.carte-media:hover .carte-media__visuel img { transform: scale(1.02); }
.carte-media__corps { padding: 16px; }
.carte-media__meta { font-size: 12px; font-weight: 600; color: var(--bleu-texte); margin-bottom: 6px; }
.carte-media__titre { font-family: var(--titre); font-size: 16px; font-weight: 700; color: var(--bleu-nuit); line-height: 1.35; }

/* --- Étapes numérotées ---------------------------------------------------- */
.etape { background: var(--blanc); border-radius: var(--r-m); padding: 22px; }
/* Le numéro d'étape était en jaune sur blanc : 1,75 de contraste, le pire du
   site. Plutôt que de renoncer au jaune, il devient une pastille — fond jaune,
   chiffre bleu nuit : 7,38, et l'accent de la marque est même plus présent
   qu'avant. (audit 23/08) */
.etape__num {
  font-family: var(--titre); font-size: 12px; font-weight: 700;
  color: var(--bleu-nuit); background: var(--jaune);
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  letter-spacing: .5px; margin-bottom: 10px;
}
.etape__titre { font-size: 16px; font-weight: 700; margin-bottom: 7px; }
.etape__texte { font-size: 14px; line-height: 1.65; color: var(--gris-texte); }

/* --- Bloc avis Google ----------------------------------------------------- */
.note-google {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  padding: 16px 22px;
}
.note-google__mot { font-family: var(--titre); font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
.note-google__sep { width: 1px; height: 34px; background: var(--bordure); }
.note-google__valeur { font-family: var(--titre); font-size: 24px; font-weight: 700; color: var(--bleu-nuit); }
.note-google__total { font-size: 12px; color: var(--gris-doux); }

.avis__auteur { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.avis__initiale {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.avis__nom { font-family: var(--titre); font-size: 14px; font-weight: 700; color: var(--bleu-nuit); }
.avis__date { font-size: 11px; color: var(--gris-doux); }
.etoiles { color: var(--jaune); font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; }
.etoiles--vide { color: var(--bordure-forte); }

/* --- Formulaire ----------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ__label { font-size: 13px; font-weight: 600; color: var(--encre); }
.champ__aide { font-size: 12px; color: var(--gris-doux); }

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  border: 1px solid var(--bordure-forte);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--blanc);
  transition: border-color var(--t-survol) ease-out, box-shadow var(--t-survol) ease-out;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu-clair);
  box-shadow: 0 0 0 3px rgba(61, 159, 224, .16);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea { border-color: var(--alerte-texte); }
.champ__erreur { font-size: 12px; font-weight: 600; color: var(--alerte-texte); }

/* Choix en pastilles (type de demande, urgence, étape du projet) */
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bleu-nuit);
  background: var(--fond-panneau);
  border: 1px solid transparent;
  padding: 10px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--t-survol) ease-out, color var(--t-survol) ease-out;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.choix label:hover { background: var(--fond-froid); }
.choix input:checked + label { background: var(--bleu-nuit); color: var(--blanc); }
/* Coche jaune sur le choix sélectionné */
.choix label::before {
  content: "";
  width: 0;
  height: 6px;
  margin-right: 0;
  border-left: 2px solid var(--jaune);
  border-bottom: 2px solid var(--jaune);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--t-bascule) ease-in-out, width var(--t-bascule) ease-in-out, margin var(--t-bascule) ease-in-out;
}
.choix input:checked + label::before {
  width: 9px;
  margin-right: 9px;
  transform: rotate(-45deg) scale(1) translateY(-2px);
}
.choix input:focus-visible + label { outline: 3px solid var(--bleu-clair); outline-offset: 2px; }

/* États d'envoi */
.form__etat { display: none; align-items: center; gap: 10px; border-radius: 9px; padding: 14px 16px; font-size: 14px; font-weight: 600; }
.form__etat[data-actif="true"] { display: flex; }
.form__etat--succes { background: var(--succes-fond); color: var(--succes-texte); }
.form__etat--erreur { background: var(--alerte-fond); color: var(--alerte-texte); }

.rotateur {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(27, 49, 89, .3);
  border-top-color: var(--bleu-nuit);
  animation: rotation 700ms linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

/* --- Bandeau cookies ------------------------------------------------------ */
.bandeau-cookies {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 32px));
  background: var(--bleu-profond);
  border-radius: var(--r-m);
  padding: 24px 26px;
  box-shadow: 0 14px 44px rgba(27, 49, 89, .3);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies__titre { font-family: var(--titre); font-size: 17px; font-weight: 700; color: var(--blanc); margin-bottom: 7px; }
.bandeau-cookies__texte { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .75); margin-bottom: 18px; }
.bandeau-cookies__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bandeau-cookies__lien { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); text-decoration: underline; }

/* --- Pied de page --------------------------------------------------------- */
.pied { background: var(--bleu-profond); color: rgba(255, 255, 255, .7); padding-block: 48px 28px; }
.pied a { color: rgba(255, 255, 255, .7); }
.pied a:hover { color: var(--blanc); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied__titre {
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bleu-clair);
  margin-bottom: 12px;
}
.pied__liste { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.pied__bas {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pied__grille { grid-template-columns: 1fr; } }

/* --- Barre d'appel mobile ------------------------------------------------- */
.cta-flottant { display: none; }
@media (max-width: 600px) {
  .cta-flottant {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(27, 49, 89, .96);
  }
  .cta-flottant .btn { font-size: 14px; padding: 13px 12px; }
  body { padding-bottom: 76px; }
}