/* ═══════════════════════════════════════════════════════════════════════
   PAGE PARTENAIRE — pro.revenuslocatifs.fr

   Chargée APRÈS style.css et conciergerie.css, jamais à leur place : les
   jetons de la charte y sont déjà déclarés, et les redéclarer ici aurait créé
   deux sources de vérité pour la même couleur. Ce fichier ne contient que ce
   que la page pro ajoute : son en-tête propre, la mosaïque des quatre étapes,
   le bloc de prix sur fond nuit.

   Charte v3 : aucune ombre, aucun dégradé, une seule animation (celle de la
   réglette, qui n'apparaît pas ici). La séparation se fait au filet 1 px et au
   rayon 12 px. On pose les blocs, on ne les fait pas flotter.
   ═══════════════════════════════════════════════════════════════════════ */

.page-pro{background:var(--papier)}

/* MÊME LARGEUR QUE LE SITE PUBLIC : 1280 px, comme `.container` de style.css.
   La page a d'abord repris la colonne étroite des pages communes, faite pour
   lire un relevé de marché en 70 caractères par ligne. Ce n'est pas ce qu'on
   fait ici : cette page présente une offre, elle a besoin de poser des cartes
   côte à côte. Les paragraphes gardent leur mesure de lecture par `--mesure`,
   c'est le CONTENEUR qui s'élargit, pas les lignes de texte. */
.pro-large{width:100%;max-width:1280px;margin:0 auto;padding:0 40px}

/* L'œil de section : l'annotation qui vivait dans la gouttière de la grille
   étroite. La gouttière n'a plus lieu d'être sur une page large, l'annotation
   si — elle dit à qui la page s'adresse avant même le titre. */
.pro-oeil{margin:0 0 10px}

/* ── En-tête ─────────────────────────────────────────────────────────
   FOND NUIT, LÀ OÙ LE SITE PUBLIC EST SUR PAPIER CLAIR. Une conciergerie et un
   propriétaire arrivent sur deux sites qui portent le même logotype ; sans ce
   bandeau, rien ne leur dit qu'ils ne sont pas au même endroit. La couleur est
   un jeton déjà posé par la charte, pas une seconde couleur de marque.

   UNE SEULE ENTRÉE : l'appel à l'action. L'adresse de contact y a d'abord été
   retirée, puis le lien vers le site public ; tous deux occupaient la place de
   la seule chose à faire ici, pour des intentions rares. Ils sont au pied de
   page, avec le reste. */
.pro-tete{background:var(--nuit);position:sticky;top:0;z-index:20}
.pro-tete .pro-large{display:flex;align-items:center;justify-content:space-between;
                     gap:16px;min-height:68px}
.pro-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.pro-logo img{width:32px;height:32px;border-radius:0}
.pro-tete .logo-text{color:#fff}

.pro-nav{display:flex;align-items:center;gap:20px}
/* L'ambre vif est la couleur des fonds sombres (§3). Il désigne ici l'action,
   qui est la seule chose à faire sur cette page. */
.pro-nav-cta{background:var(--ambre-vif);color:var(--encre);border:1px solid var(--ambre-vif);
             padding:10px 18px;font-size:15px;font-weight:500;text-decoration:none;
             white-space:nowrap}
.pro-nav-cta:hover{background:#F2B93A;border-color:#F2B93A;color:var(--encre)}
.pro-tete a:focus-visible{outline:2px solid var(--ambre-vif);outline-offset:3px}

/* ── Sections ────────────────────────────────────────────────────────
   Le filet supérieur remplace l'ombre et le fond alterné : il sépare sans
   fabriquer de hiérarchie que le contenu n'a pas. */
.pro-hero{padding:56px 0 48px}
.pro-section{padding:48px 0;border-top:1px solid var(--trait)}
.pro-section h2{margin:0 0 18px}
.pro-section p{margin:0 0 16px}

/* ── Héros à deux colonnes ───────────────────────────────────────────
   MÊME GABARIT QUE L'ESTIMATEUR DE L'ACCUEIL : le discours à gauche, le
   formulaire à droite, dans une carte posée au filet. Mêmes proportions,
   même bascule sous 1000 px. Un second gabarit pour le même geste aurait
   donné deux formulaires qui ne se ressemblent pas sur un site qui n'en a
   que deux. */
/* `grid-template-rows` explicite, et la dernière rangée en `1fr`. Sans lui, le
   formulaire — qui couvre les trois rangées et qui est plus haut qu'elles —
   voit son excédent de hauteur RÉPARTI également entre elles : il s'ouvrait
   soixante-dix pixels de vide entre le titre et le chapeau, sans qu'aucune
   marge ne l'explique. Les deux premières rangées se calent sur leur contenu,
   le reste tombe sous le bloc de prix. */
.pro-hero-grille{display:grid;grid-template-columns:minmax(0,1fr) 460px;
                 grid-template-rows:min-content min-content 1fr;
                 gap:24px 48px;align-items:start}
/* Placement EXPLICITE : trois blocs empilés dans la colonne de gauche, et le
   formulaire qui occupe la colonne de droite sur les trois rangées. Sans ces
   quatre lignes, la grille rangerait les blocs dans leur ordre d'écriture,
   c'est-à-dire titre / formulaire / discours / prix en damier. */
.pro-hero-titre     {grid-column:1;grid-row:1}
.pro-hero-dire      {grid-column:1;grid-row:2}
.pro-hero-prix      {grid-column:1;grid-row:3}
.pro-hero-formulaire{grid-column:2;grid-row:1 / 4}
.pro-hero-titre{padding-top:8px}
.pro-hero h1{margin:0 0 16px}
.pro-chapeau{font-size:18px;line-height:1.55;color:var(--encre-2);
             margin:0 0 24px;max-width:var(--mesure)}
.pro-preuve{margin:0}

/* La carte du formulaire, à l'identique de `.hero-formulaire .lead-container` :
   filet 1 px, rayon 12, aucune ombre. La charte ne fait pas flotter les blocs,
   elle les pose. */
.pro-hero-formulaire .candidature{background:var(--carte);
                                  border:1px solid var(--trait);
                                  border-radius:var(--r);padding:28px;
                                  max-width:none;scroll-margin-top:88px}
.pro-hero-formulaire h2{font-size:24px;margin:0 0 8px}
.pro-hero-formulaire .cand-intro{color:var(--encre-2);font-size:15px;margin:0 0 22px}
.pro-hero-formulaire .cand-form .champ,
.pro-hero-formulaire .cand-form fieldset{margin:0 0 18px}
.pro-hero-formulaire .cand-pied{padding-top:18px}
.pro-hero-formulaire .cand-pied .btn{width:100%;justify-content:center;
                                     text-align:center;padding:14px 20px;font-size:17px}

.pro-preuve a{color:var(--cadastre);text-decoration:underline;
              text-underline-offset:3px;text-decoration-thickness:1px;font-size:16px}
.pro-preuve a:hover{color:var(--cadastre-clair)}

/* Sous 1000 px, une colonne, et LE FORMULAIRE PASSE EN DEUXIÈME — juste après
   le titre, avant le discours et avant le prix. C'est le seul ordre qui le
   laisse au-dessus de la ligne de flottaison sur un téléphone : quatre lignes
   de titre, puis le premier champ. Le raisonnement se lit ensuite, pour qui
   veut le lire. */
@media (max-width:1000px){
  .pro-hero-grille{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:28px}
  .pro-hero-titre,.pro-hero-dire,.pro-hero-prix,.pro-hero-formulaire{
    grid-column:1;grid-row:auto}
  .pro-hero-titre     {order:1}
  .pro-hero-formulaire{order:2}
  .pro-hero-dire      {order:3}
  .pro-hero-prix      {order:4}
}

/* ── Les quatre étapes du parcours, en mosaïque ──────────────────────
   Quatre cartes posées côte à côte. Elles ont d'abord défilé à l'horizontale ;
   la mosaïque les rend toutes lisibles d'un seul regard, sans commande à
   manipuler, sans une ligne de JavaScript et sans le quatrième arrêt qu'aucune
   flèche n'atteignait. Le parcours du propriétaire tient en quatre phrases : il
   n'y a aucune raison d'en cacher trois.

   `auto-fit` plus `minmax` : quatre colonnes au large, deux au milieu, une sur
   téléphone, et le point de bascule est la largeur du CONTENU, pas un seuil
   deviné dans une requête média.

   Pas de pictogrammes : une icône de loupe n'ajoute rien à « le propriétaire
   cherche », elle prend la place du texte qui, lui, informe. */
.pro-mosaique{list-style:none;margin:0;padding:0;
              display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
              gap:16px}
.pro-etape{background:var(--carte);border:1px solid var(--trait);
           border-radius:var(--r);padding:22px 24px;
           display:flex;flex-direction:column;gap:8px}
.pro-etape h3{margin:0}
.pro-etape p{margin:0;color:var(--encre-2);max-width:none}
.pro-etape-n{color:var(--ambre-texte);font-size:13px;font-weight:600;line-height:1}

/* ── La vitrine ─────────────────────────────────────────────────────
   Le texte à gauche, la liste de ce qu'affiche la fiche à droite : elle est
   l'illustration du paragraphe, elle se lit à côté et pas à la suite. Une
   colonne sous 860 px, où deux colonnes donneraient deux fois trente
   caractères par ligne. */
.pro-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
          gap:40px;align-items:start}
@media (max-width:860px){.pro-deux{grid-template-columns:minmax(0,1fr);gap:24px}}
.pro-deux > div > p:last-child{margin-bottom:0}

.pro-fiche{margin:0}
.pro-fiche .etiquette{display:block;margin:0 0 12px}
.pro-liste{margin:0;padding-left:20px}
.pro-liste li{margin:0 0 6px}
.pro-liste li:last-child{margin-bottom:0}
.pro-appui{font-weight:600}

/* ── Le prix ─────────────────────────────────────────────────────────
   Fond nuit, comme les blocs de résultat (§3 de la charte). C'est le SEUL
   endroit de la page où l'on parle d'argent, et il doit se voir : une
   conciergerie qui découvre le prix au premier lead se sent trompée.
   L'ambre passe en ambre vif sur ce fond, sinon il s'éteint. */
/* Le bloc vit dans la colonne gauche du héros : c'est elle qui le borne, il n'a
   plus besoin de son propre plafond de largeur. */
.pro-prix{background:var(--nuit);color:#fff;border-radius:var(--r);
          padding:28px 30px 26px;margin:0 0 14px}
.pro-prix h2{font-size:24px}
.pro-prix h2{color:#fff;margin:0 0 14px}
.pro-prix > p{color:#DCE7E4;max-width:62ch}
.pro-prix-ligne{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
                margin:26px 0 10px !important;padding-top:22px;
                border-top:1px solid rgba(255,255,255,.18)}
.pro-prix-valeur{font-size:40px;font-weight:600;color:var(--ambre-vif);
                 letter-spacing:-.01em;line-height:1}
.pro-prix-unite{font-size:17px;color:#DCE7E4}
/* Le tarif normal, barré. Il n'est pas décoratif : sans lui, « 50 € » n'est
   qu'un prix, et rien ne dit que la place fondateur vaut quelque chose. */
.pro-prix-barre{font-size:19px;color:#A9BEB9}
.pro-prix-barre s{text-decoration-thickness:1px}
.pro-prix-note{color:#DCE7E4;margin:0 0 12px !important;max-width:62ch}
.pro-prix-note:last-child{margin-bottom:0 !important}
.pro-prix-note strong{color:#fff}

/* Le compteur est HORS du bloc nuit : il ne fait pas partie de l'offre, il en
   mesure le remplissage. Il n'apparaît que s'il est non nul — voir pro.php. */
.pro-compteur{margin:0 0 18px !important;font-size:15px;font-weight:500;
              color:var(--encre-2)}

/* `.candidature` pose une largeur et un rembourrage faits pour une page
   entière : ici elle vit dans la carte du héros, qui porte les siens. */
.candidature-embarquee{margin:0}

/* Les trois lignes sous le formulaire : ce qui se passe après l'envoi. C'est
   la question que se pose une conciergerie au moment de cliquer, elle a sa
   place sous le bouton et pas ailleurs. */
.pro-suites{list-style:none;margin:22px 0 0;padding:18px 0 0;
            border-top:1px solid var(--trait);
            font-size:15px;color:var(--encre-2)}
.pro-suites li{margin:0 0 8px;padding-left:18px;position:relative}
.pro-suites li::before{content:"";position:absolute;left:0;top:9px;
                       width:6px;height:6px;border-radius:999px;
                       background:var(--cadastre-clair)}
.pro-suites li:last-child{margin-bottom:0}

/* Le pied de page est celui du site public : `site-footer` et ses classes
   sont déjà stylées dans style.css, il n'y a rien à redessiner ici. */

/* ── Jusqu'à 360 px (plancher de qualité, §10) ───────────────────────── */
@media (max-width:900px){
  .pro-large{padding:0 24px}
  .pro-hero{padding:36px 0 32px}
  .pro-section{padding:36px 0}
  .pro-hero h1{max-width:none}
}
@media (max-width:560px){
  .pro-large{padding:0 16px}
  .pro-prix{padding:22px 20px}
  .pro-prix-valeur{font-size:34px}
  /* Le prix et son unité passent l'un sous l'autre plutôt que de se serrer :
     « 50 € au lieu de 79 € » sur une ligne de 328 px se coupe n'importe où. */
  .pro-prix-ligne{gap:4px 10px}
  .pro-prix-unite{width:100%}

  /* L'EN-TÊTE PASSE À DEUX LIGNES, il ne se replie pas dans un menu.
     Sur une ligne, le logotype et « Créer ma vitrine gratuite » débordaient de
     360 px : le mot de marque était coupé en deux et le bouton sortait de
     l'écran. Un menu déroulant coûterait un script et un état pour deux liens ;
     une deuxième ligne ne coûte que sa hauteur, et le bouton y gagne toute la
     largeur, ce qui est la bonne cible tactile.
     Plus de `sticky` non plus : deux lignes collées en haut mangeraient un
     sixième de l'écran sur toute la page. */
  .pro-tete{position:static}
  .pro-tete .pro-large{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .pro-nav{width:100%;gap:12px}
  .pro-nav-cta{flex:1;text-align:center;padding:11px 14px}
  .pro-tete .logo-text{font-size:18px}

  /* Une carte par ligne, et un peu moins de rembourrage : à 360 px, 24 px de
     chaque côté d'une carte, c'est un sixième de l'écran perdu. */
  .pro-mosaique{gap:12px}
  .pro-etape{padding:18px 18px}
}