:root{ --marine:#242954; --or:#d9b451; --or-fonce:#b8933a; --gris:#b3b4b4; --fond:#f8f7f4; --fond2:#faf9f6; --bordeaux:#7c1d19; --vert:#2e7d4f; --bordure:#e6e4dc; --sep:#f0efe9; --sep2:#f6f5f0; --texte2:#9a9a97; } *{box-sizing:border-box} body{margin:0;font-family:Montserrat,sans-serif;background:var(--fond);color:var(--marine)} a{color:var(--marine)} a:hover{color:var(--or-fonce)} input,select,textarea,button{font-family:Montserrat,sans-serif} ::placeholder{color:var(--gris)} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .fade{animation:fadeUp .4s ease} /* Gabarit des écrans : centré, occupe toute la largeur disponible, plafonné sur très grand écran pour que les tableaux restent lisibles. Un seul endroit à régler. */ .page{width:100%;max-width:1500px;margin:0 auto;padding:26px 48px 60px} .page.lecture{max-width:1040px} /* écrans de lecture/saisie : formulaires, vidéos */ @media (max-width:1000px){ .page{padding:22px 26px 48px} } @media (max-width:620px){ .page{padding:18px 16px 40px} } /* ── Coquille : menu latéral fixe + contenu ─────────────────────────────── */ .coquille{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .menu-lateral{background:var(--marine);color:#fff;display:flex;flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto} .barre-mobile,.voile-menu{display:none} .entete-page{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:34px 48px 0} .entete-page h1{margin:0;font-size:32px;font-weight:600} @media (max-width:1000px){ .entete-page{padding:26px 26px 0} } /* ── Écrans étroits (tablette portrait, téléphone) ──────────────────────── Le menu latéral devient un TIROIR : une barre marine porte le logo et le bouton ☰, le menu glisse depuis la gauche par-dessus la page, un voile ferme au toucher. Le menu garde exactement sa mise en page de bureau — une seule navigation à tenir. (Il était auparavant un bandeau horizontal défilant : sept entrées, des sous-onglets et le compte sur une ligne, dont on ne voyait que deux éléments à la fois.) */ @media (max-width:820px){ /* Barre en haut, contenu dessous : sur une page courte, la grille (min-height:100vh) étirait sinon la barre marine sur un tiers de l'écran. */ .coquille{grid-template-columns:1fr;grid-template-rows:auto 1fr} .barre-mobile{display:flex;align-items:center;justify-content:space-between; position:sticky;top:0;z-index:40;background:var(--marine); padding:10px 16px;padding-top:max(10px, env(safe-area-inset-top))} .barre-mobile img{width:86px;cursor:pointer;display:block} .burger{width:44px;height:44px;border:none;border-radius:10px;background:rgba(255,255,255,0.08); color:#fff;font-size:20px;line-height:1;cursor:pointer} .menu-lateral{position:fixed;top:0;bottom:0;left:0;z-index:45;width:min(86vw,300px);height:auto; transform:translateX(-102%);transition:transform .22s ease; padding-bottom:env(safe-area-inset-bottom)} /* Ombre seulement tiroir ouvert : fermé, elle débordait sur le bord gauche de la page. */ .menu-ouvert .menu-lateral{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)} .menu-ouvert .voile-menu{display:block;position:fixed;inset:0;z-index:44;background:rgba(27,31,66,0.5)} .menu-lateral .nav-btn{padding:13px 16px} /* cibles tactiles ≥ 44 px */ .entete-page{padding:22px 16px 0;flex-wrap:wrap;align-items:flex-end} .entete-page h1{font-size:27px;line-height:1.15} /* Champs : 16 px minimum, sinon Safari iOS zoome sur la page à chaque saisie. */ input,select,textarea{font-size:16px !important} .card{max-width:100%} } @media (max-width:820px){ body.sans-defilement{overflow:hidden} } /* Tableaux sur téléphone. Deux régimes : - `.empile` (tableaux larges : S7, comptes, archivés) : chaque ligne devient une fiche, chaque cellule un « libellé / valeur » (libellé tiré de `data-label`) ; - les autres (deux à quatre colonnes : synthèse d'une demande, historique de VL) restent des tableaux, resserrés, et leur texte revient à la ligne. Ils défilaient auparavant en bloc, sans retour à la ligne : dans la fiche d'une demande, les réponses du CGP sortaient de l'écran à droite, derrière des libellés tronqués. */ @media (max-width:820px){ table:not(.empile) th, table:not(.empile) td{padding:9px 8px;white-space:normal} table.empile, table.empile tbody{display:block;width:100%} table.empile{min-width:0 !important;table-layout:auto} table.empile thead, table.empile colgroup{display:none} /* Chaque ligne : une fiche en deux colonnes, libellé au-dessus de la valeur. */ table.empile tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px; padding:16px;border-bottom:1px solid var(--sep)} table.empile td{display:block;padding:0 !important;border:none;text-align:left !important; white-space:normal;font-size:12.5px !important;overflow-wrap:anywhere;max-width:none !important} table.empile td::before{content:attr(data-label);display:block;margin-bottom:3px; font-size:8.5px;font-weight:700;letter-spacing:1.2px;color:#63645f;text-transform:uppercase} table.empile td:not([data-label])::before, table.empile td[data-label=""]::before{display:none} /* Titre de la fiche (nom du fonds, du CGP…) et cellules longues : pleine largeur. */ table.empile td.titre-fiche, table.empile td.plein{grid-column:1 / -1} table.empile td.titre-fiche{order:-1;font-size:14px !important} table.empile td.actions-fiche{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start} /* Tableaux de chiffres (S7) : trois indicateurs par rangée, la catégorie en surtitre. */ table.empile.empile-3 tr{grid-template-columns:repeat(3,minmax(0,1fr))} table.empile td.surtitre{grid-column:1 / -1;order:-2} } .serif{font-family:'Cormorant Garamond',serif} .card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(36,41,84,0.06)} .card-hover{cursor:pointer;transition:box-shadow .15s,transform .15s} /* Logos en couleurs de marque : l'identité de la compagnie doit rester lisible. Le survol se contente d'un léger agrandissement, cohérent avec .card-hover. */ .assureur-carte img{transition:transform .18s} .assureur-carte:hover img{transform:scale(1.05)} .card-hover:hover{box-shadow:0 10px 30px rgba(36,41,84,0.12);transform:translateY(-2px)} .lbl{font-size:9px;letter-spacing:1.5px;color:var(--gris)} /* Petits textes (descriptions, étiquettes de vignette) : même gris foncé lisible que les highlights produit, en gras — le gris clair --texte2 passait mal sous 12 px. */ .txt-fonce{color:#63645f;font-weight:700} /* Étiquette : petites capitales espacées, en gras — c'est un nom de champ. */ .hl-k{font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:#63645f;text-transform:uppercase;line-height:1.3} /* Valeur : le seul élément en gros et en marine — c'est ce que l'œil doit accrocher. */ .hl-v{font-weight:700;color:var(--marine);line-height:1.2;overflow-wrap:anywhere} /* Mise en avant (fréquence de rappel) : or, gras, taille intermédiaire. */ .hl-em{font-weight:700;color:var(--or-fonce);line-height:1.25} /* Références Salesforce : un code à recopier, pas une donnée financière. Monospace, taille fixe, une pastille par référence — deux tickers voisins ne doivent jamais se lire comme une seule chaîne, et le bloc ne doit pas déborder sur sa légende. */ .hl-refs{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px} .hl-ref{max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px; font-weight:700;line-height:1.35;color:var(--marine);background:var(--fond2); border:1px solid var(--bordure);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere} /* Légende : en italique et sans capitales — impossible de la confondre avec l'étiquette. */ .hl-sub{font-style:italic;color:var(--texte2);opacity:.85;line-height:1.45;letter-spacing:0} .sec-title{font-size:11px;font-weight:700;letter-spacing:2px} .field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:var(--texte2)} .field input,.field select,.field textarea{padding:11px 14px;border:1px solid var(--bordure);border-radius:9px;font-size:13px;color:var(--marine);background:#fdfdfb} /* Un champ ne pousse jamais son conteneur : une liste déroulante prend sinon la largeur de sa plus longue option (« Directeur Général et Gestion Privée - Associé ») et la fenêtre d'un compte défilait de 115 px à l'horizontale (signalé le 09/10/2026). */ .field input,.field select,.field textarea{min-width:0;max-width:100%} .field textarea{resize:vertical;line-height:1.6} .btn{padding:12px 20px;background:var(--marine);color:#fff;border:none;border-radius:10px;font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer} .btn:hover{background:#2e3468} .btn-gold{padding:12px 20px;background:var(--or);border:none;border-radius:10px;color:var(--marine);font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer} .btn-gold:hover{background:#e3c26c} .btn-ghost{padding:12px 20px;background:#fff;color:var(--marine);border:1px solid var(--bordure);border-radius:10px;font-size:12px;font-weight:600;cursor:pointer} .btn-ghost:hover{border-color:var(--or);color:var(--or-fonce)} .btn-danger{padding:12px 20px;background:none;border:1px solid var(--bordure);border-radius:10px;font-size:12px;font-weight:600;color:var(--bordeaux);cursor:pointer} .btn-danger:hover{border-color:var(--bordeaux)} .btn-sm{padding:7px 14px;font-size:11px;border-radius:8px} .back-link{display:inline-flex;align-items:center;gap:10px;background:var(--fond2);border:1px solid var(--bordure);border-radius:9px; color:var(--marine);font-size:12.5px;font-weight:700;letter-spacing:.3px;cursor:pointer;padding:9px 16px 9px 13px;margin:0 0 22px;align-self:flex-start;transition:background .15s,border-color .15s} .back-link .fl{font-size:20px;font-weight:800;line-height:1;color:var(--or-fonce);transform:translateY(-1px)} .back-link:hover{background:var(--marine);border-color:var(--marine);color:#fff} .back-link:hover .fl{color:var(--or)} .nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px; margin-left:8px;padding:0 5px;border-radius:9px;background:var(--or);color:var(--marine); font-size:10px;font-weight:800;vertical-align:1px} /* DOF Academy : formations à valider (vidéos non vues ou quiz non réussi). Rouge, à droite de l'entrée du menu ; le bouton passe en flex pour que la pastille ne tombe pas dessous. */ .nav-btn--alerte{display:flex;align-items:center;gap:6px;white-space:nowrap} .nav-alerte{margin-left:auto;flex:none;padding:3px 6px;border-radius:9px;background:var(--bordeaux);color:#fff; font-size:8px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap} .pastille--a-valider{background:var(--bordeaux);color:#fff;box-shadow:0 0 0 3px rgba(124,29,25,.25)} /* Pastilles d'état sur les lignes de demande. Trois niveaux de lecture : `action` = quelque chose est attendu de vous (le plus voyant, halo coloré), `maj` = du nouveau à lire, `ok` = information acquise, `info` = simple appoint. */ .pastille{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800; letter-spacing:.9px;padding:5px 12px;border-radius:20px;white-space:nowrap;line-height:1.1} .pastille--action{background:#b05c2a;color:#fff;box-shadow:0 0 0 3px rgba(176,92,42,.18)} .pastille--maj{background:var(--or);color:var(--marine);box-shadow:0 0 0 3px rgba(217,180,81,.22)} .pastille--ok{background:var(--vert);color:#fff} /* Date de retour souhaitée : elle porte l'engagement pris auprès du client. */ .pastille--echeance{background:var(--bordeaux);color:#fff;font-weight:800;box-shadow:0 0 0 3px rgba(124,29,25,.18)} /* Compte administrateur individuel (Comptes CGP). */ /* Manager d'une équipe (Comptes) : ni pastille « À valider » ni relance de formation. */ .pastille--manager{background:var(--or);color:var(--marine);vertical-align:2px;margin-left:6px} .pastille--admin{background:var(--marine);color:var(--or);vertical-align:2px;margin-left:6px} .pastille--info{background:var(--fond2);color:var(--texte2);border:1px solid var(--bordure);font-weight:700;letter-spacing:.3px} /* Sélecteur de période du graphique de VL (1M → tout l'historique). Volontairement discret : c'est un réglage de lecture, pas une action. L'onglet actif prend le marine du portail plutôt qu'un aplat coloré, pour ne pas concurrencer la courbe. */ .btn-periode{padding:5px 11px;border:1px solid var(--bordure);border-radius:7px;background:#fff; color:var(--texte2);font-size:10.5px;font-weight:700;letter-spacing:.6px;cursor:pointer; transition:background .12s,border-color .12s,color .12s} .btn-periode:hover{border-color:var(--or);color:var(--or-fonce)} .btn-periode.active{background:var(--marine);border-color:var(--marine);color:#fff} /* Le réticule suit le curseur : pas de sélection de texte parasite pendant le survol. */ .graph-vl{cursor:crosshair;user-select:none} .lien-fonds{cursor:pointer} .lien-fonds:hover{color:var(--or-fonce);text-decoration:underline} /* Une colonne de plus resserre le tableau : on empêche toute césure des valeurs chiffrées, sinon « 9,17 » et « % » se retrouvent sur deux lignes. */ td.num{text-align:right;white-space:nowrap} /* Grille des produits archivés : tient dans la page, sans défilement horizontal. `table-layout:fixed` impose les largeurs du au lieu de les déduire du contenu — c'est ce qui garantit des colonnes alignées quel que soit le texte. */ /* min-width = somme des largeurs minimales des intitulés (mesurées) : en dessous, aucune répartition ne peut éviter de couper les titres en plein mot, on laisse donc le conteneur défiler plutôt que de rendre les en-têtes illisibles. */ .tbl-fixe{width:100%;table-layout:fixed;border-collapse:collapse;min-width:960px} .tbl-fixe th{padding:10px 5px;font-size:8px;letter-spacing:.1px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;vertical-align:bottom} /* `break-word` et non `anywhere` : un mot trop long est d'abord renvoyé seul à la ligne suivante, et coupé en dernier recours seulement. Sur des colonnes étroites en texte libre (type de strike, sous-jacent), `anywhere` coupait « constatations » en plein milieu alors que le mot tenait sur sa propre ligne. */ .tbl-fixe td{padding:10px 7px;font-size:11px;line-height:1.35;vertical-align:top;overflow-wrap:break-word} /* Sous ~1150 px, 13 colonnes ne tiennent plus lisiblement : on redonne au tableau sa largeur naturelle et le conteneur reprend son défilement. */ .badge{font-size:8.5px;font-weight:700;letter-spacing:1.5px;padding:4px 10px;border-radius:20px;color:#fff} th{text-align:left;padding:14px 18px;color:var(--gris);font-size:9px;letter-spacing:1.5px;white-space:nowrap;border-bottom:1px solid var(--sep)} td{padding:13px 18px;border-bottom:1px solid var(--sep2);font-size:12px} tr.hov:hover{background:var(--fond2)} .modal-bg{position:fixed;inset:0;background:rgba(27,31,66,0.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;overflow:auto} .modal{background:#fff;border-radius:16px;padding:28px 32px;width:100%;max-width:560px;max-height:90vh;overflow:auto;animation:fadeUp .25s ease} /* Fiche d'une demande d'allocation : pleine largeur, trois colonnes qui défilent séparément — la revue, les échanges et la synthèse restent visibles ensemble, sans faire défiler toute la fenêtre. */ .modal--pleine{max-width:none;max-height:92vh;overflow:hidden;display:flex;flex-direction:column} .fiche-dof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1;min-height:0} .fiche-dof > section{min-width:0;overflow:auto;padding-right:6px} .fiche-dof .col-titre{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--marine);margin-bottom:12px} @media (max-width:1100px){ .fiche-dof > section + section .col-titre{margin-top:26px} } @media (max-width:1100px){ .modal--pleine{overflow:auto} .fiche-dof{grid-template-columns:1fr;gap:0} .fiche-dof > section{overflow:visible;padding-right:0} } .modal-fermer{display:none} @media (max-width:820px){ .fermer-entete{display:none !important} } /* la croix épinglée la remplace */ /* Téléphone : la fenêtre occupe tout l'écran et défile d'un bloc ; la croix reste épinglée en haut à droite. La fiche d'une demande repasse en une colonne (règle 1100 px ci-dessus) et défile, elle aussi, en entier. */ @media (max-width:820px){ .modal-bg{padding:0;align-items:stretch} .modal, .modal--pleine{max-width:none !important;width:100%;max-height:none;min-height:100%; height:100%;border-radius:0;padding:22px 16px 40px;overflow:auto; padding-top:max(22px, env(safe-area-inset-top))} .modal--pleine{display:block} .modal-fermer{display:flex;align-items:center;justify-content:center;position:sticky;top:0; float:right;z-index:3;width:40px;height:40px;margin:-8px -4px 6px 10px; border:1px solid var(--bordure);border-radius:50%;background:#fff;color:var(--marine); font-size:15px;cursor:pointer;box-shadow:0 2px 8px rgba(36,41,84,.08)} } .toast{position:fixed;bottom:24px;right:24px;background:var(--marine);color:#fff;padding:14px 22px;border-radius:12px;font-size:12.5px;z-index:99;box-shadow:0 10px 30px rgba(36,41,84,0.3);animation:fadeUp .25s ease} .toast.err{background:var(--bordeaux)} @media (max-width:820px){ .toast{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom))} } video{display:block;width:100%;border-radius:10px;background:#000} .nav-btn{text-align:left;padding:12px 16px;border:none;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;letter-spacing:.2px;background:transparent;color:var(--gris)} .nav-btn:hover{background:rgba(255,255,255,0.07);color:#fff} .nav-btn.active{background:var(--or);color:var(--marine)} /* « DOF » est un onglet de groupe : même bouton que les autres, qu'on déplie ou replie. Les entrées qu'il contient gardent leur taille — c'est un regroupement, pas un niveau de moins. Le chevron indique l'état. */ .nav-groupe{display:flex;flex-direction:column;gap:3px;margin:2px 0 4px 8px;padding-left:12px; border-left:1px solid rgba(255,255,255,0.14)} .nav-chevron{margin-left:auto;font-size:10px;opacity:.75} .sous-nav{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 0;padding-left:12px; border-left:1px solid rgba(255,255,255,0.14);margin-left:8px} .nav-btn.sous{padding:8px 12px;font-size:11.5px;font-weight:500} .nav-btn.sous.active{background:rgba(217,180,81,0.18);color:var(--or)} .pill{padding:10px 18px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--bordure);background:#fff;color:var(--marine)} .pill:hover{border-color:var(--or)} .pill.active{border-color:var(--marine);background:var(--marine);color:var(--or)} .doc-row{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--sep2);transition:background .12s,box-shadow .12s} .doc-row:hover{background:var(--fond2)} /* Glisser-déposer d'un PDF sur une ligne de documentation */ .doc-row.dragover{background:#faf3df;box-shadow:inset 0 0 0 2px var(--or)} .doc-row.dragover *{pointer-events:none} /* évite le clignotement dû aux enfants */ .doc-row .drop-hint{display:none;font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--or-fonce);white-space:nowrap} .doc-row.dragover .drop-hint{display:block} .doc-row .drop-actions{display:flex;align-items:center;gap:10px;flex:none} .doc-row.dragover .drop-actions{display:none} /* Zone de dépôt d'une vidéo (produit ou module Academy) */ .video-drop{position:relative;border-radius:10px;transition:box-shadow .12s} .video-drop.dragover{box-shadow:0 0 0 2px var(--or)} .video-drop.dragover *{pointer-events:none} .video-drop .video-drop-hint{display:none;position:absolute;inset:0;z-index:2;border-radius:10px; background:rgba(36,41,84,0.82);color:var(--or);align-items:center;justify-content:center; font-size:11.5px;font-weight:700;letter-spacing:1px;text-align:center;padding:10px} .video-drop.dragover .video-drop-hint{display:flex} .quiz-opt{text-align:left;padding:11px 15px;border-radius:9px;font-size:12.5px;cursor:pointer;border:1px solid var(--bordure);background:#fdfdfb;color:var(--marine)} .quiz-opt:hover{border-color:var(--or)} .quiz-opt.sel{border-color:var(--or);background:#faf3df;font-weight:600} .bar{height:5px;border-radius:3px;background:var(--sep);overflow:hidden} .bar>div{height:5px;background:var(--or)} .field.full{grid-column:1/-1} .field .flabel{display:block;font-size:11px;font-weight:600;color:var(--texte2);margin-bottom:6px} .field .req{color:var(--bordeaux);margin-left:2px} .field .fhint{font-weight:400;color:var(--gris)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{position:relative} .chip input{position:absolute;opacity:0;pointer-events:none} .chip span{display:inline-block;padding:9px 16px;border:1px solid var(--bordure);border-radius:20px;font-size:12.5px;cursor:pointer;background:#fff;color:var(--marine);transition:all .12s;user-select:none} .chip:hover span{border-color:var(--or)} .chip input:checked+span{background:var(--marine);border-color:var(--marine);color:var(--or)} .chip input:focus-visible+span{box-shadow:0 0 0 3px rgba(36,41,84,0.2)} .dof-money{position:relative} .dof-money input{padding-right:32px!important} .dof-money em{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--texte2);font-size:13px;pointer-events:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bordeaux);background:#fffafa} .field.invalid .chip span{border-color:#e2b4ad} .field-err{display:none;color:var(--bordeaux);font-size:11px;margin-top:5px} .field.invalid .field-err{display:block} .hidden{display:none!important} .dof-cond-tag{margin-left:auto;font-size:10.5px;color:var(--or-fonce);border:1px solid #e4d4ad;background:#faf6ec;padding:3px 9px;border-radius:99px} .niveau-pill{font-size:10px;font-weight:700;letter-spacing:1px;padding:6px 14px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;flex:none} .niveau-pill.premium{background:rgba(255,255,255,0.14);color:#9cc8f5} .niveau-pill.tailor{background:rgba(255,255,255,0.14);color:#cabbf5} /* ── Blocs réutilisés par plusieurs écrans ───────────────────────────────── En-tête de bloc : un titre à gauche, des actions à droite ; sur téléphone, les actions passent sous le titre au lieu de sortir de l'écran. */ .entete-bloc{display:flex;justify-content:space-between;align-items:center;gap:16px} .actions-bloc{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end} /* Grilles de formulaire (2 colonnes) et page à colonne latérale (fiche produit). */ .grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} /* minmax(0,…) : voir .field ci-dessus */ .grille-cote{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start} /* Module de la DOF Academy : vignette à gauche, texte à droite. */ .module-grille{display:grid;grid-template-columns:200px minmax(0,1fr)} .module-grille--video{grid-template-columns:minmax(0,1fr)} .module-corps{padding:18px 26px;min-width:0} /* Progression des CGP (Academy, vue Gestion Privée). */ .ligne-progression{display:grid;grid-template-columns:1.4fr 130px 1fr 120px 100px;gap:16px;align-items:center; padding:14px 26px;border-bottom:1px solid var(--sep2);cursor:pointer} @media (max-width:900px){ .grille-cote{grid-template-columns:minmax(0,1fr)} } @media (max-width:820px){ .entete-bloc{flex-wrap:wrap;align-items:flex-start} .actions-bloc{justify-content:flex-start;flex:1 1 100%} .titre-bloc{font-size:25px !important;line-height:1.15} .module-grille{grid-template-columns:minmax(0,1fr)} .module-grille > img, .module-grille > div:first-child:not(.module-corps){min-height:150px !important;max-height:190px} .module-corps{padding:16px} /* Progression : nom et statut sur la première ligne, le reste dessous. */ .ligne-progression{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 16px} .ligne-progression > :nth-child(1){grid-column:1} .ligne-progression > :nth-child(5){grid-column:2;grid-row:1;padding:5px 10px !important} .ligne-progression > :nth-child(3){grid-column:1 / -1} } @media (max-width:620px){ .grille-2{grid-template-columns:minmax(0,1fr)} } /* ── Fiche produit : highlights ─────────────────────────────────────────── */ .hl-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))} .hl-case{padding:20px 24px 22px;border-right:1px solid var(--sep);border-bottom:1px solid var(--sep);min-width:0} .bande-fiche{padding:18px 28px} .titre-fiche-produit{font-size:38px;font-weight:600;line-height:1.1} /* Téléphone : deux colonnes serrées plutôt qu'une seule (onze cases l'une sous l'autre faisaient défiler deux écrans pleins) ; valeurs ramenées à une taille qui tient. */ @media (max-width:820px){ .hl-grille{grid-template-columns:repeat(2,minmax(0,1fr))} .hl-case{padding:14px 14px 16px} .hl-case .hl-v{font-size:16px !important} .hl-case .hl-k{font-size:8.5px !important;margin-bottom:6px !important} .bande-fiche{padding:14px 16px} .titre-fiche-produit{font-size:28px} } /* ── Frise des souscriptions : SVG sur grand écran, liste sur téléphone ─── */ .frise{padding:20px 26px 12px;overflow-x:auto} .frise-mobile{display:none} .frise-ligne{padding:10px 0;border-bottom:1px solid var(--sep2);cursor:pointer} .frise-ligne:last-of-type{border-bottom:none} .frise-piste{position:relative;height:8px;border-radius:4px;background:var(--sep);margin-top:7px} .frise-piste span{position:absolute;top:0;bottom:0;border-radius:4px} .frise-piste i{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--bordeaux)} @media (max-width:820px){ .frise{padding:18px 16px 14px;overflow:visible} .frise-bureau{display:none !important} .frise-mobile{display:block} } /* Ligne d'ajout « champ · champ · bouton » (fenêtres) : le bouton passe dessous sur téléphone. */ .grille-ajout{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end} @media (max-width:620px){ .grille-ajout{grid-template-columns:minmax(0,1fr)} } /* ── Compteurs (Suivi des demandes, Mes demandes) ───────────────────────── Téléphone : grille de deux, cartes de même largeur — elles s'empilaient une par ligne, chacune à sa largeur de texte, et poussaient la liste trois écrans plus bas. */ .rangee-compteurs{display:flex;flex-wrap:wrap} @media (max-width:820px){ .rangee-compteurs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px !important} .rangee-compteurs > .card{min-width:0 !important;padding:13px 14px !important} .rangee-compteurs > .card > div:first-child{font-size:22px !important} .rangee-compteurs > .card:last-child:nth-child(odd){grid-column:1 / -1} } /* ── Demande d'allocation ───────────────────────────────────────────────── */ .bandeau-dof{padding:20px 28px} .carte-confirmation{padding:44px 40px} @media (max-width:820px){ .bandeau-dof{padding:16px 18px} .carte-confirmation{padding:30px 20px} } /* ── Marges internes sur téléphone ───────────────────────────────────────── Les écrans posent leurs marges en style inline, calibrées pour le bureau (26 à 34 px de chaque côté). Sur 320-390 px, deux fois 30 px mangeaient un cinquième de la largeur utile. Liste générée à partir des valeurs réellement présentes dans js/ : les boutons (même valeurs parfois) n'y figurent pas, seuls les blocs sont visés. */ @media (max-width:820px){ #app div[style*="padding:12px 24px"], #app div[style*="padding:12px 26px"], #app div[style*="padding:13px 26px"], #app div[style*="padding:14px 24px"], #app div[style*="padding:14px 28px"], #app div[style*="padding:16px 24px"], #app div[style*="padding:16px 26px"], #app div[style*="padding:16px 28px"], #app div[style*="padding:18px 24px"], #app div[style*="padding:18px 24px 10px"], #app div[style*="padding:18px 26px"], #app div[style*="padding:20px 24px"], #app div[style*="padding:20px 26px"], #app div[style*="padding:20px 28px"], #app div[style*="padding:22px 26px"], #app div[style*="padding:22px 26px 16px"], #app div[style*="padding:22px 30px"], #app div[style*="padding:24px 28px"], #app div[style*="padding:26px 28px"], #app div[style*="padding:26px 30px"], #app div[style*="padding:28px 32px"], #app div[style*="padding:30px 24px 24px"], #app div[style*="padding:30px 28px"], #app div[style*="padding:30px 34px"], #app div[style*="padding:34px 26px 24px"], #app div[style*="padding:36px 28px"]{padding-left:16px !important;padding-right:16px !important} #app div[style*="margin:0 26px"]{margin-left:16px !important;margin-right:16px !important} } /* Éditeur d'allocation : catégorie et fonds sur une ligne pleine chacun, poids et suppression dessous — quatre colonnes ne tiennent pas sous 620 px. */ @media (max-width:620px){ .pf-line{grid-template-columns:minmax(0,1fr) 90px 40px !important} .pf-line > select[name="category"], .pf-line > select[name="fundId"], .pf-line > input[name="label"]{grid-column:1 / -1 !important;min-width:0} .pf-line{padding-bottom:10px;border-bottom:1px dashed var(--sep)} }