/* ===================================================================== Confort d'affichage : rien ne se superpose, rien n'est caché, et l'écran ne montre que ce qui sert au moment présent. Corrections issues d'un audit automatique à 360, 390, 768, 1024, 1280 et 1440 px sur chaque écran et chaque onglet (js/confort.js pour la partie dynamique). ===================================================================== */ /* Aucun défilement horizontal de la page, quelle que soit l'animation. */ html{overflow-x:clip;} /* ---------- Mon CV sur ordinateur : un seul défilement ---------- L'éditeur et l'aperçu défilent chacun dans leur colonne ; ils sont calés sur la hauteur réellement restante sous l'en-tête (mesurée par js/confort.js), au lieu des 109 px de l'ancien en-tête. La page ne défile plus en plus de l'éditeur. */ @media (min-width: 901px){ .editor,.preview-wrap{max-height:calc(100vh - var(--haut-app, 109px));} } /* ---------- Pied de page compact dans l'application ---------- Le grand pied de page est fait pour l'accueil et les pages annexes ; sous l'éditeur, le test ATS et la lettre, il ne garde que sa ligne. */ body:has(#homeSection.hidden) .site-footer .rx-footer-grid, body:has(#homeSection.hidden) .site-footer .rx-footer-shape-1, body:has(#homeSection.hidden) .site-footer .rx-footer-shape-2{display:none;} body:has(#homeSection.hidden) .site-footer.rx-footer::before{display:none;} .rx-footer-mini{display:none;} body:has(#homeSection.hidden) .rx-footer-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:6px 0 0;} .rx-footer-mini a{color:rgba(255,255,255,.85) !important;text-decoration:none;font-size:13px;} .rx-footer-mini a:hover{color:var(--gold) !important;} /* ---------- Tracé du stylo : il ne touche plus les boutons ---------- */ .app-shell > .brandbar{padding-bottom:18px;} @media (max-width: 600px){ .app-shell > .brandbar{padding-bottom:16px;} .trace-stylo{width:22px;height:22px;} } /* Repères : une zone de clic confortable autour du petit point. */ .trace-rep::after{content:'';position:absolute;inset:-10px;} /* ---------- En-tête replié pendant la saisie (téléphone) ---------- En descendant dans le formulaire, le menu des sections se replie ; il revient dès qu'on remonte (js/confort.js). */ @media (max-width: 900px){ .brandbar .app-nav{transition:max-height .3s ease,opacity .2s ease,margin .3s ease,padding .3s ease;max-height:90px;overflow:hidden;} body.entete-replie .brandbar .app-nav{max-height:0;opacity:0;margin-top:-8px;padding-top:0;padding-bottom:0;border-width:0;} } /* ---------- Barre de réglages de l'aperçu (téléphone) ---------- Elle défilait sur une seule ligne et coupait le bouton des couleurs : elle passe à la ligne, tout reste visible. */ @media (max-width: 900px){ .pt-controls{flex-wrap:wrap;overflow-x:visible;row-gap:8px;} } /* ---------- Blocs du formulaire : la croix n'empiète plus ---------- */ .entry > label:first-of-type, .entry > .row2:first-of-type > div:last-child > label:first-of-type{margin-right:36px;} .entry .del{width:30px;height:30px;} /* ---------- Test ATS : jauges ---------- */ .p3-res .ats-layer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px;} .p3-res .ats-layer-label{margin:0 0 12px;} .p3-res .ats-layer-pct{position:static;} .p3-res .ats-layer-track{grid-column:1 / -1;} /* ---------- Tarifs : l'étiquette ne couvre plus le titre ---------- */ .pg-price-tag{top:-14px;right:20px;rotate:6deg;} .pg-price.featured{margin-top:14px;} @media (max-width: 1000px){ .pg-price.featured{margin-top:18px;} } /* ---------- Bannières des pages : le visuel ne couvre plus le titre ---------- */ @media (max-width: 1180px){ .pg-banner .pg-wrap{grid-template-columns:1fr;} .pg-visual{display:none;} } /* ---------- Cibles tactiles (téléphone et tablette) ---------- */ @media (max-width: 900px){ .theme-switch{min-height:32px;} .preset-chip{min-height:36px;padding-top:6px;padding-bottom:6px;} .skill-del,.tag .del,.tag-x{min-width:30px;min-height:30px;} .p3-link{display:inline-block;padding:8px 0;} .rx-car-dots button{position:relative;} .rx-car-dots button::after{content:'';position:absolute;inset:-12px -6px;} .p3-filters input{width:20px;height:20px;} .current-toggle input,.exp-current,.edu-current{width:20px;height:20px;} } /* ---------- Carte d'identité compacte sur téléphone ---------- Sur un petit écran, elle ne garde que l'essentiel : nom, poste, complétude et compteurs. Coordonnées et modèle sont déjà ailleurs (formulaire, barre de réglages). */ @media (max-width: 600px){ .p3-id{padding:14px;box-shadow:5px 5px 0 var(--grad-1);} .p3-id-top{margin:-14px -14px 0;padding:14px;gap:10px;} .p3-id-photo{width:52px;height:52px;font-size:19px;border-width:3px;} .p3-id-name{font-size:17px;} .p3-id-job{font-size:12.5px;} .p3-id-ring{width:44px;height:44px;} .p3-id-contact,.p3-id-model{display:none;} .p3-id-stats{margin-top:10px;padding-top:10px;} .p3-id-stats b{font-size:18px;} } /* ---------- Animations d'entrée latérales ---------- Sur petit écran, les blocs qui entraient par le côté débordaient le temps de l'animation : ils entrent par le bas. */ @media (max-width: 900px){ .rx-anim .rv-left.is-in,.rx-anim .rv-right.is-in{animation-name:rxUp;} } /* ---------- Deuxième passe de l'audit ---------- */ /* Libellés du haut d'un bloc : la croix a sa propre place, que la ligne soit en deux colonnes (ordinateur) ou empilée (téléphone). */ .entry > .row2:first-of-type > div:first-child > label:first-of-type{margin-right:36px;} @media (min-width: 601px){ .entry > .row2:first-of-type > div:first-child > label:first-of-type{margin-right:0;} } @media (max-width: 900px){ /* Menu des sections, réglages de l'aperçu, pastilles : 34 px au moins. */ .brandbar .app-nav button{min-height:36px;} .brandbar .app-nav{align-items:center;} #colorToggle,.tpl-toggle,.mode-toggle button,.lang-toggle button{min-height:34px;} .tag-chip button,.skill-del{min-width:30px;min-height:30px;display:inline-grid;place-items:center;} .pg-info-item a{display:inline-block;padding:6px 0;} .pg .brand{min-height:40px;} } /* Onglets de l'éditeur : chaque onglet prend la largeur de son libellé (au lieu de parts égales), plus aucun libellé tronqué sur téléphone. */ .p2-cv-tabs [role="tab"]{flex:1 1 auto;} @media (max-width: 600px){ .p2-cv-tabs [role="tab"]{padding:8px 3px;font-size:11px;letter-spacing:-.01em;} .p2-tabs [role="tab"]{flex:1 1 auto;} } /* L'éditeur est redimensionnable : les onglets s'adaptent à SA largeur. */ #editor{container-type:inline-size;container-name:editeur;} @container editeur (max-width: 440px){ .p2-cv-tabs [role="tab"]{padding:8px 3px;font-size:11px;letter-spacing:-.01em;} .p2-cv-tabs .p2-tab-ic{width:24px;height:24px;} } /* Ordre des sections : le nom passe à la ligne au lieu d'être tronqué. */ .soi-label{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;} /* Blocs du formulaire : une marge à droite réservée à la croix, plus robuste que d'écarter chaque libellé (vaut à toutes les largeurs et pour tous les champs, libellés comme listes déroulantes). */ #editor .entry{padding-right:46px;} .entry > label:first-of-type, .entry > .row2:first-of-type > div > label:first-of-type{margin-right:0 !important;padding-right:0;} #editor .entry .del{top:10px;right:8px;} /* ---------- Listes déroulantes du formulaire ---------- L'habillage des champs (p2-onglets.css) passe par le raccourci « background », qui effaçait la flèche : une liste déroulante ressemblait à un champ de texte. La flèche revient, avec sa place à droite. */ #editor select,#letterEditor select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E736F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;text-overflow:ellipsis; } /* Langues : le niveau (« Intermédiaire », « Langue natale ») est plus long que le nom de la langue ; il prend la plus large des deux colonnes. */ #langList .row2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}