/* Negozimo — maquette de la page Professionnels : ce qui lui est propre. Le reste vient de site.css.
   À envisager pour site.css : .petit-texte, .paliers, les champs de formulaire (.formulaire .f-champ), le carrousel de cartes. */

/* --- Bloc 1 : haut de page sur le bleu nuit, la couverture à droite --- */
.pro-tete .grille { align-items: center; }
.pro-tete .pile { max-width: 44rem; }
.pro-tete h1 .l { display: block; }
.pro-tete .chapo { color: rgb(255 255 255 / .92); max-width: 38rem; }
.petit-texte { font-size: var(--text-petit); font-weight: 600; color: var(--p2); margin-top: -.4rem; }
.pro-tete .couverture { justify-self: center; width: min(19rem, 70%); display: grid; gap: .9rem; }
.pro-tete .couverture img { width: 100%; height: auto; box-shadow: var(--shadow-page); }
.pro-tete .couverture .exemple { text-align: center; }
@media (min-width: 900px) { .pro-tete .grille { grid-template-columns: 7fr 5fr; } .pro-tete .couverture { width: min(24rem, 90%); } }

/* --- Bloc 2 : deux pages du dossier, droites et alignées (retour d'Alexis du 12/11 : plus d'aperçu décalé) --- */
/* Deux vues de la même page : la page entière (A4), puis son pied de page en plus grand (3/4).
   Les colonnes sont réglées sur ces deux formats pour que les deux images aient exactement la même hauteur. */
.pages-duo { display: grid; grid-template-columns: minmax(0, 707fr) minmax(0, 750fr); gap: clamp(.9rem, 2.4vw, 2rem); align-items: start; }
.pages-duo figure { display: grid; gap: .7rem; }
.pages-duo picture, .pages-duo figure > img { display: block; background: var(--color-blanc); box-shadow: var(--shadow-page); }
.pages-duo figcaption { font-size: var(--text-petit); font-weight: 600; color: var(--p2); }
.pages-duo img { width: 100%; height: auto; }
@media (min-width: 900px) { .recu .grille { grid-template-columns: 5fr 7fr; } }

/* --- Bloc 3 : qui répond de quoi --- */
.liens-liste { display: grid; gap: .8rem; }
.repond h2 { max-width: 12ch; }
.repond .chapo { max-width: 40rem; }
@media (min-width: 900px) { .repond .grille { grid-template-columns: 4fr 8fr; align-items: start; } }

/* --- Bloc 4 : trois étapes côte à côte, sans épinglage --- */

/* --- Bloc 5 : le prix, au dossier. Tableau des paliers, simulateur, ce qui est compris. --- */
.paliers { width: 100%; max-width: 32rem; border-collapse: collapse; border-top: 2px solid var(--color-encre); }
.paliers th, .paliers td { padding: .95rem .2rem; border-bottom: 2px solid var(--color-encre); text-align: left; font-weight: 600; }
.paliers thead th { padding-block: .7rem; font-size: var(--text-petit); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.paliers td, .paliers thead th:last-child { text-align: right; }
.paliers td { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.paliers tbody th { font-size: var(--text-chapo); }
.cote-prix { align-content: start; width: 100%; }
.simulateur { display: grid; gap: .9rem; width: 100%; padding: clamp(1.2rem, 2.6vw, 2rem); background: var(--color-blanc); box-shadow: var(--shadow-papier); }
.simulateur[hidden] { display: none !important; }
.simulateur > label { font-size: var(--text-t3); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.sim-champs { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.sim-champs input[type="number"] { min-height: 3.25rem; padding: 0 .8rem; box-shadow: inset 0 0 0 2px var(--color-encre); font-weight: 800; font-size: 1.4rem; background: var(--color-blanc); }
.sim-champs input[type="number"]:focus-visible { outline-offset: 2px; }
.sim-champs input[type="range"] { width: 100%; min-height: 2.75rem; accent-color: var(--color-bleu); }
.sim-resultat { min-height: 3.6em; font-size: var(--text-chapo); font-weight: 600; line-height: 1.4; }
.sim-resultat strong { font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; }
.compris-titre { font-weight: 700; margin-bottom: .5rem; }
.compris ul { display: grid; gap: .4rem; padding-left: 1.2rem; list-style: disc; max-width: 32rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
@media (min-width: 900px) { .prix-pro .grille { grid-template-columns: 6fr 6fr; align-items: start; } }

/* --- Bloc 6 : trois métiers. Cartes posées côte à côte ; sur téléphone, un carrousel à glisser. --- */
.metiers-liste { display: flex; gap: 1rem; margin: clamp(2rem, 4vw, 3.4rem) calc(-1 * var(--spacing-gouttiere)) 0; padding: .5rem var(--spacing-gouttiere) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.metiers-liste::-webkit-scrollbar { display: none; }
.metier { flex: none; width: min(82vw, 22rem); scroll-snap-align: center; display: grid; align-content: start; gap: .9rem; padding: clamp(1.3rem, 2.4vw, 2rem); background: var(--color-blanc); border-top: 6px solid var(--bande, var(--color-bleu-nuit)); box-shadow: var(--shadow-papier); }
.metier.m1 { --bande: var(--color-bleu-nuit); } .metier.m2 { --bande: var(--color-bleu); } .metier.m3 { --bande: var(--color-encre); }
.metier h3 { font-size: var(--text-t3); }
.carrousel-boutons { display: flex; gap: .6rem; margin-top: .4rem; }
.carrousel-boutons button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--color-encre); color: var(--color-blanc); transition: background-color var(--duree-courte); }
.carrousel-boutons button:hover { background: var(--color-bleu); }
.carrousel-boutons svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) {
  .metiers-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; padding: .5rem 0 1rem; overflow: visible; }
  .metier { width: auto; }
  .metier.m2 { translate: 0 1.2rem; }
  .carrousel-boutons { display: none !important; }
}

/* --- Bloc 8 : le formulaire, sur le bleu nuit --- */
.acces .grille { align-items: start; }
.acces-zone { width: 100%; max-width: 40rem; }
.formulaire { display: grid; gap: 1.5rem; }
.f-champ { display: grid; gap: .4rem; }
.f-champ label { font-weight: 700; font-size: 1rem; }
.f-champ input, .f-champ select { width: 100%; min-height: 3.25rem; padding: 0 1.05rem; background: var(--color-blanc); color: var(--color-encre); font-weight: 500; border-radius: 0; }
.f-champ select { appearance: none; padding-right: 3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23151412' stroke-width='2.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }
.f-champ input:focus-visible, .f-champ select:focus-visible, .f-case input:focus-visible { outline: 3px solid var(--color-jaune); outline-offset: 2px; }
.f-champ input[aria-invalid="true"], .f-champ select[aria-invalid="true"] { box-shadow: inset 0 -4px 0 var(--color-erreur); }
.formulaire .champ-aide { margin-top: 0; color: var(--p2); min-height: 0; }
.formulaire .champ-aide:empty { display: none; }
.formulaire .champ-aide.est-erreur { color: var(--color-erreur-clair); }
.f-case { display: grid; gap: .4rem; }
.f-case-ligne { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.f-case input { appearance: none; width: 1.75rem; height: 1.75rem; margin-top: .1rem; background: var(--color-blanc); border-radius: 0; cursor: pointer; }
.f-case input:checked { background: var(--color-jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23151412' stroke-width='2.4'/%3E%3C/svg%3E") center / 80% no-repeat; }
.f-case input[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--color-erreur-clair); }
.f-case label { line-height: 1.5; }
.f-case label a { text-decoration: underline var(--color-jaune) 2px; text-underline-offset: .3em; font-weight: 700; }
.reassurance { font-weight: 600; color: rgb(255 255 255 / .92); }
.f-envoi { display: grid; gap: .8rem; justify-items: start; }
.f-envoi .bouton { width: 100%; max-width: 22rem; }
.f-envoi .bouton[aria-busy="true"] { opacity: .8; cursor: progress; }
.engage { font-size: var(--text-petit); font-weight: 600; color: var(--p2); }
.confirmation { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--color-bleu-voile); color: var(--color-encre); border-left: 6px solid var(--color-jaune); }
.confirmation:focus-visible { outline-color: var(--color-jaune); }
.confirmation-texte { font-size: var(--text-chapo); font-weight: 700; line-height: 1.35; }
.confirmation .champ-aide.est-maquette { margin: 0; color: var(--color-bleu); font-weight: 700; }
@media (min-width: 900px) { .acces .grille { grid-template-columns: 5fr 7fr; } }
.nb { white-space: nowrap; } /* défini dans accueil.css : repris ici */

/* Barre du haut à 360 px : « Demander un accès » est plus long que le bouton des autres pages. */
@media (max-width: 380px) { .site-header .bouton { padding-inline: .55rem; } }

/* Bloc 4 : pourquoi remettre ce dossier. Quatre arguments à filets, numéros jaunes sur le bleu vif. */
.raisons .conteneur { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.raisons-liste { display: grid; gap: clamp(1.8rem, 3.4vw, 2.6rem) var(--spacing-colonnes); margin: 0; padding: 0; list-style: none; counter-reset: raison; }
.raisons-liste li { display: grid; gap: .7rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--pt); counter-increment: raison; }
.raisons-liste li::before { content: counter(raison); font-family: var(--font-titre); font-weight: 800; font-stretch: 112%; font-size: var(--text-numero); line-height: .86; letter-spacing: -0.05em; color: var(--pa); }
.raisons-liste h3 { font-size: var(--text-sous-titre); line-height: 1.05; }
.raisons-liste p { max-width: 30rem; font-size: var(--text-chapo); font-weight: 500; line-height: 1.42; }
@media (min-width: 768px) { .raisons-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }