/* ==========================================================================
   decouvrir.css — extrait de decouvrir.php le 03/08/2026.
   Charge a la place exacte qu'occupait le <style> : ces regles surclassent
   app.css et app-light.css parce qu'elles viennent APRES. Ne pas remonter
   ce <link> plus haut dans le <head>.
   ========================================================================== */
.app-body{ --bg:var(--bz-bg-soft); --surface:var(--bz-surface); --border:rgba(var(--bz-ink-rgb),.09);
  --accent:var(--bz-blue-vif); --text:var(--bz-text); --text-dim:var(--bz-text-2b); background:var(--bz-bg-soft); color:var(--bz-text); }
.fiche-panel h2{ font-size:1rem; }

/* ==========================================================================
   LA LARGEUR DE LA PAGE.

   Mesure sur un ecran de 1600 px : chaque panneau faisait 1537 px de large,
   alors que le texte a l'interieur restait borne a 68 signes par ligne. Le
   resultat n'etait pas une page large, c'etait une colonne etroite perdue au
   milieu d'une boite vide, avec des filets qui couraient jusqu'aux bords.

   On borne donc le conteneur. 1040 px : assez pour que les six chiffres de la
   conclusion tiennent en trois colonnes confortables (environ 320 px chacune),
   assez peu pour que le panneau reste un objet pose sur la page et non une
   bande. Les blocs qui avaient deja leur propre mesure — l'accroche a 720, le
   bloc d'essai a 840 — ne bougent pas : ils se centrent simplement dedans.

   Cette borne ne vaut QUE pour cette page : « .app-main » sert partout, et
   plusieurs pages ont besoin de toute la largeur pour leurs tableaux.
   ========================================================================== */
.app-body .app-main{ max-width:1040px; margin-left:auto; margin-right:auto; }

/* Accroche du premier ecran */
.dc-hero{ text-align:center; max-width:720px; margin:0 auto; }
.dc-hero h1{ margin:0; font-size:1.58rem; line-height:1.25; }
/* Le chapeau est centre : la mesure se borne avec « margin:auto », pas avec
   une largeur seule, sinon le texte se decale a gauche du titre. */
.dc-hero p{ margin:12px auto 0; font-size:1.02rem; line-height:1.72; color:var(--bz-text-2);
  max-width:56ch; }
.dc-note{ margin:14px auto 0; font-size:.82rem; line-height:1.6; color:var(--bz-text-3); max-width:58ch; }

/* ==========================================================================
   L'INVITATION ET LES DEUX LISTES.

   Le premier ecran demandait de choisir dans une liste unique de 275 valeurs
   melangeant quinze places : il fallait deja savoir ce qu'on cherchait. Deux
   listes le remplacent, decoupees comme les gens y pensent.

   Le bloc est POSE SUR UNE SURFACE, pas sur le fond de page : c'est ce qui le
   designe comme l'endroit ou agir. Un seul bloc porte cet accent — deux
   surfaces d'appel se neutralisent.
   ========================================================================== */
/* Seul en scene depuis que les cartes, le repli des 274 valeurs et le rappel
   du portefeuille type ont ete retires : un peu plus d'air, un peu plus de
   place. Les deux listes suffisent a la demonstration. */
.dc-essai{ margin:28px auto 0; max-width:840px; padding:26px 28px 20px; border-radius:18px;
  background:var(--bz-surface); border:1px solid rgba(var(--bz-blue-rgb),.28);
  box-shadow:0 18px 44px -34px rgba(var(--bz-ink-rgb),.55); text-align:center; }
.dc-essai-invite{ margin:0; font-size:1.06rem; line-height:1.5; font-weight:700; color:var(--bz-text);
  max-width:46ch; margin-left:auto; margin-right:auto; }
.dc-essai-sous{ margin:7px auto 0; font-size:.88rem; line-height:1.6; color:var(--bz-text-3);
  max-width:52ch; }

/* Deux colonnes egales tant que la place le permet ; empilees ensuite. */
.dc-listes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:14px;
  margin-top:18px; text-align:left; }
.dc-liste{ padding:14px 15px 15px; border-radius:14px; background:rgba(var(--bz-blue-rgb),.05);
  border:1px solid rgba(var(--bz-blue-rgb),.16); }
.dc-liste label{ display:block; cursor:pointer; }
.dc-liste-t{ display:block; font-size:.95rem; font-weight:700; color:var(--bz-text); }
.dc-liste-n{ display:block; margin-top:2px; font-size:.78rem; color:var(--bz-text-3); }
.dc-liste-ligne{ display:flex; flex-wrap:wrap; gap:9px; margin-top:11px; }
.dc-liste-ligne select{ flex:1 1 180px; min-width:0; font:inherit; font-size:.92rem;
  padding:10px 12px; border-radius:10px; background:var(--bz-surface);
  border:1px solid rgba(var(--bz-ink-rgb),.18); color:var(--bz-text); }
.dc-liste-ligne select:focus-visible{ outline:2px solid var(--bz-blue-vif); outline-offset:1px; }
.dc-liste-ligne .btn{ flex:0 0 auto; }


/* Un libelle qui n'existe que pour les lecteurs d'ecran. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Le portefeuille type */
.dc-pf{ list-style:none; margin:14px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:8px; }
/* flex-wrap est indispensable : le secteur (flex-basis 100 %) doit passer À LA LIGNE
   sous le nom et le poids. Sans lui, il reste sur la même ligne et la déborde. */
.dc-pf li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:9px 12px;
  border-radius:11px; background:rgba(var(--bz-ink-rgb),.035); border:1px solid rgba(var(--bz-ink-rgb),.08);
  font-size:.86rem; }
.dc-pf b{ flex:1 1 auto; font-weight:700; color:var(--bz-text); }
.dc-pf em{ flex:0 0 auto; font-style:normal; font-weight:600; color:var(--bz-text-2); }
.dc-pf span{ flex:0 0 100%; font-size:.78rem; color:var(--bz-text-3); }
.dc-pf-tot{ margin:12px 0 0; font-size:.85rem; line-height:1.7; color:var(--bz-text-3); max-width:58ch; }

/* Les trois volets */
.dc-volet{ margin-top:18px; }
.dc-volet-h{ display:flex; align-items:flex-start; gap:12px; }
.dc-num{ flex:0 0 auto; width:29px; height:29px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.9rem; font-weight:700; color:var(--bz-sur-accent); background:var(--bz-blue); margin-top:1px; }
.dc-volet-h h2{ margin:0 0 3px; }
.dc-volet-h p{ margin:0; font-size:.87rem; line-height:1.62; color:var(--bz-text-3); max-width:58ch; }
.dc-cta{ margin-top:15px; }
.dc-indispo{ margin:14px 0 0; padding:12px 15px; border-radius:11px; font-size:.86rem; line-height:1.65;
  color:var(--bz-text-2); background:rgba(var(--bz-ink-rgb),.035); border:1px solid rgba(var(--bz-ink-rgb),.10);
  max-width:58ch; }

/* Suite du parcours */
.dc-suite{ margin-top:22px; padding:20px 22px; border-radius:16px; background:var(--bz-surface);
  border:1px solid rgba(var(--bz-blue-rgb),.20); }
.dc-suite h2{ margin:0 0 6px; font-size:1.05rem; }
.dc-suite p{ margin:0; font-size:.92rem; line-height:1.7; color:var(--bz-text-2); max-width:58ch; }
.dc-suite .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }

@media (max-width:640px){
  /* SUR TELEPHONE, LES DEUX CHOIX DOIVENT SE VOIR SANS DEFILER.
     Mesure avant resserrage : le second commencait a 824 px sur un ecran de
     812 — invisible, donc inexistant pour qui ne fait pas defiler. */
  /* Le titre est passe de 56 a 64 signes avec le nouveau positionnement :
     un cran de moins pour qu'il tienne sur le meme nombre de lignes. */
  .dc-hero h1{ font-size:1.26rem; line-height:1.2; }
  .dc-hero p{ margin-top:8px; font-size:.96rem; line-height:1.55; }
  /* Sous 375 px le titre passait a trois lignes : 25 px qui font la difference
     entre voir les deux choix et n'en voir qu'un. */
  @media (max-width:374px){ .dc-hero h1{ font-size:1.17rem; } }
  .dc-essai{ margin-top:12px; padding:13px 14px 11px; border-radius:15px; }
  .dc-essai-invite{ font-size:.97rem; line-height:1.35; }
  .dc-essai-sous{ margin-top:4px; font-size:.83rem; }
  .dc-listes{ margin-top:11px; gap:9px; }
  .dc-liste{ padding:10px 13px 11px; }
  .dc-liste-n{ margin-top:1px; }
  /* Un .btn est en nowrap : « Voir les modeles et leurs valeurs » faisait 293 px
     et sortait de 8 px sur un ecran de 320. Chaque bouton prend sa ligne et
     accepte le retour — meme correction que sur la fiche et la page Idees. */
  .dc-suite .actions{ flex-direction:column; align-items:stretch; }
  .dc-suite .actions .btn, .dc-cta .btn{ white-space:normal; text-align:center; }
  .dc-liste-ligne{ margin-top:9px; gap:8px; }
  /* LE BOUTON REVIENT A COTE DE LA LISTE. La regle d'avant le faisait passer
     dessous « parce qu'il ne restait que 90 px pour choisir une entreprise » :
     c'etait vrai quand la carte partageait la largeur avec les douze cartes et
     le repli des 274. Depuis leur retrait elle fait 311 px, et il en reste 210
     pour la liste — mesure, pas suppose. Economie : 56 px par choix. */
  /* LA LARGEUR PLANCHER FAIT LE CHOIX TOUTE SEULE.
     « flex:1 1 auto » laissait la liste prendre sa largeur NATURELLE — celle
     de sa plus longue entreprise, 285 px — et poussait le bouton a la ligne.
     « flex:1 1 0 » la faisait partager la ligne, mais elle tombait a 136 px
     sur un ecran de 320 : trop etroit pour lire un nom d'entreprise.
     Avec un plancher de 170 px, le calcul se fait seul : a 375 px les deux
     tiennent cote a cote (liste 181, bouton 96) ; a 320 px la somme ne passe
     plus et le bouton repasse dessous, la liste reprenant toute la largeur. */
  .dc-liste-ligne select{ flex:1 1 170px; min-width:0; }
  .dc-liste-ligne .btn{ flex:0 0 auto; min-height:44px; padding-left:14px; padding-right:14px; }
  .dc-note{ margin-top:11px; }
}

.ic-sub{ max-width:58ch; }
