/* ============================================================================ TOTODOC — Design system V0 (accueil) Couleurs échantillonnées sur le logo : marine var(--marine), cyan var(--cyan). Police : Nunito (variable), auto-hébergée (RGPD). Accessibilité : WCAG 2.1 AA. ========================================================================== */ /* ---------- Police ---------- */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Variables ---------- */ /* --------------------------------------------------------------------------- LA CASE ENTIÈRE EST LE LIEN (règle générale de Julien, 19/08/2026). Posée dans `site.css` — chargée sur TOUTES les pages — parce que le geste vaut côté praticien comme côté patient. Écrite dans une feuille de console, elle aurait manqué aux documents de l'espace patient, et l'on aurait cherché pourquoi une case ne réagit qu'à moitié. ⚠ LE SURVOL N'EST PAS DE L'ORNEMENT : sans lui, rien ne distingue une case cliquable d'un paragraphe. Le curseur seul ne se voit pas au doigt. --------------------------------------------------------------------------- */ /* ⚠ `cursor: pointer` N'EST PAS COSMÉTIQUE — c'est une CONDITION DE FONCTIONNEMENT SUR iOS (constaté le 19/08/2026 : « en mobile la case du patient n'est pas cliquable, juste le nom »). Safari mobile n'envoie pas d'événement `click` aux éléments qu'il ne tient pas pour cliquables : une écoute posée sur `document` ne reçoit alors RIEN, et seul le lien intérieur répond. Chromium sans tête, lui, envoie le clic — le harnais était donc vert sur un défaut bien réel. La règle vise ici TOUTES les cases d'un coup. Elle n'existait que sur `.jour-tbl` et `.pt-tbl` : la patientèle, oubliée, était précisément celle qui ne répondait pas au doigt. */ .ligne-cliquable, [data-href], [data-modele-ligne] { cursor: pointer; } .ligne-cliquable { border-radius: 8px; } .ligne-cliquable:hover { background: var(--cyan-voile); } /* --------------------------------------------------------------------------- SECOND FACTEUR DE L'ESPACE ADMIN (19/08/2026). Trois écrans rares, vus quelques fois par an : pas de dessin propre, on reprend la carte du tunnel. Seuls le QR, la clé et les codes de secours demandent des règles — parce qu'ils se RECOPIENT, souvent à la main. --------------------------------------------------------------------------- */ .mfa-qr { margin: 18px 0; text-align: center; } .mfa-qr svg { width: 190px; height: 190px; max-width: 100%; } /* ⚠ Chasse fixe et lettres espacées : une clé base32 se recopie caractère par caractère, et un `l` qui ressemble à un `1` coûte une tentative. */ .mfa-cle code, .mfa-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .09em; font-size: 1.02rem; } .mfa-cle { margin: 0 0 18px; word-break: break-all; } .mfa-codes { list-style: none; margin: 16px 0 22px; padding: 14px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; background: var(--fond-doux); border: 1px solid var(--bord); border-radius: 12px; } @media (max-width: 420px) { .mfa-codes { grid-template-columns: 1fr; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.65; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--marine); line-height: 1.15; margin: 0 0 .6em; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 900; letter-spacing: -.015em; } h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.01em; } h3 { font-size: 1.15rem; font-weight: 800; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } img { max-width: 100%; height: auto; } a { color: var(--cyan-fonce); text-underline-offset: 3px; } a:hover { color: var(--marine); } :focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; border-radius: 4px; } .container { max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--marine); color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 0 0 var(--rayon-s) var(--rayon-s); transition: top var(--transition); } .skip-link:focus { top: 0; color: #fff; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 1rem var(--police); padding: 13px 24px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); cursor: pointer; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--marine); color: #fff; } .btn--primary:hover { background: var(--marine-2); color: #fff; } .btn--outline { background: #fff; color: var(--marine); border-color: var(--marine); } .btn--outline:hover { background: var(--marine); color: #fff; } .btn--ghost { background: transparent; color: var(--marine); padding-inline: 14px; } .btn--ghost:hover { background: var(--fond-doux); color: var(--marine); } .btn--inverse { background: #fff; color: var(--marine); } .btn--inverse:hover { background: var(--cyan); color: var(--marine); } /* CORBEILLE — action destructrice, donc DISCRÈTE AU REPOS et franche au survol. Elle ne doit pas rivaliser du regard avec « Ouvrir » : on ouvre cent fois une consultation pour une fois qu'on la supprime. 40 px de côté : sous ce seuil, une cible tactile se rate, et la rater ici n'est pas grave — c'est la toucher par erreur qui l'est, d'où la demande de confirmation. */ .btn--corbeille { background: transparent; color: var(--encre-2); border-color: transparent; width: 40px; height: 40px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .btn--corbeille:hover { background: var(--alerte-fond); color: var(--alerte-texte); border-color: transparent; } .btn--corbeille svg { display: block; } /* ⚠ GRISÉE, PAS MASQUÉE (§10 de la spécification DG). Faire disparaître le bouton n'apprend rien : le praticien cherche pourquoi il ne peut pas supprimer et ne trouve rien à chercher. Grisé, il dit qu'une règle s'applique ; l'infobulle dit laquelle. Le curseur « interdit » achève de le signaler avant même le survol prolongé. */ .btn--corbeille--bloque { opacity: .38; cursor: not-allowed; } .btn--corbeille--bloque:hover { background: transparent; color: var(--encre-2); } /* ---------- En-tête ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand__mark { width: 42px; height: auto; } .brand__word { width: 110px; height: auto; } .brand--footer .brand__mark { width: 36px; } .brand--footer .brand__word { width: 100px; } /* La navigation occupe toute la place entre le logo et le bouton « Espace patient » : les liens se posent à la suite du logo, le bouton reste à l'extrémité droite. Sans ce flex:1, tout se tassait à droite. */ .site-nav { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: space-between; } /* ⚠ LES LIENS SE RÉPARTISSENT ENTRE LE LOGO ET LE BOUTON (Julien, 20/08/2026). Ils étaient groupés à gauche, collés au logo, et tout l'espace restait vide avant « Espace patient ». `space-evenly` sur une liste qui occupe la place disponible les écarte régulièrement, et les marges égales de part et d'autre gardent l'ensemble équilibré entre les deux extrémités. */ .site-nav__links { display: flex; list-style: none; flex: 1; justify-content: space-evenly; gap: 20px; margin-inline: clamp(16px, 3vw, 40px); } .site-nav__links a { color: var(--marine); text-decoration: none; font-weight: 700; font-size: .98rem; padding: 6px 2px; border-bottom: 2px solid transparent; } .site-nav__links a:hover { border-bottom-color: var(--cyan); } .site-nav__actions { display: flex; align-items: center; gap: 10px; } .site-nav__actions .btn { padding: 9px 18px; font-size: .95rem; } .nav-toggle { display: none; } @media (max-width: 920px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--bord); border-radius: var(--rayon-s); background: #fff; cursor: pointer; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; display: block; width: 20px; height: 2.4px; background: var(--marine); border-radius: 2px; position: relative; } .nav-toggle__bar::before { position: absolute; top: -6px; } .nav-toggle__bar::after { position: absolute; top: 6px; } .site-nav { display: none; flex: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border-bottom: 1px solid var(--bord); padding: 14px clamp(18px, 4vw, 32px) 20px; box-shadow: var(--ombre); } .site-nav--open { display: flex; } .site-nav__links { flex-direction: column; gap: 2px; margin-left: 0; } .site-nav__links a { display: block; padding: 11px 4px; font-size: 1.05rem; } .site-nav__actions { flex-direction: column; align-items: stretch; margin-top: 10px; } } /* ---------- Hero ---------- */ /* ⚠ MÊME RYTHME QUE `.section` (Julien, 20/08/2026) : « les paddings doivent tous être équivalents au padding de début et de fin de section ». Le hero avait un bas deux fois plus court que son haut (16–36 px contre 40–84) : la première section semblait collée à lui, et chaque page respirait autrement. Un seul rythme vertical pour tout le site — il se change ICI, et nulle part ailleurs. */ .hero { padding: clamp(48px, 7vw, 84px) 0; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 64px); align-items: center; } .hero__lead { font-size: 1.17rem; color: var(--encre-2); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; } /* ── LES DEUX BOUTONS DU HÉROS (17/08/2026, unifiés le 19/08) ── Repris de docteurgozlan.fr, à la demande de Julien. Ils remplaçaient un couple pastille + bouton foncé : l'état et l'action, séparés, disaient deux fois la même chose. ⚠ UNE SEULE FORME POUR LES DEUX. « Consulter maintenant » et « Prendre rendez-vous » sont deux réponses à la même question — « quand ? ». Tant que l'un était une carte de deux lignes et l'autre une gélule d'une ligne, ils n'avaient ni la même hauteur ni le même poids, et se lisaient comme deux natures d'action. La forme est commune ; seule la couleur les sépare, et c'est elle qui porte le sens : le vert dit « tout de suite ». Le vert #2E9E5B est FONCÉ à dessein : le blanc dessus tient le contraste AA (5,0:1) — obligation légale, pas question de goût. */ .btn-hero { display: inline-flex; align-items: center; gap: 16px; padding: 13px 26px 13px 20px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; transition: background .15s, transform .15s, box-shadow .15s, border-color .15s; } .btn-hero:hover { transform: translateY(-1px); } .btn-hero:focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: 3px; } /* ⚠ LES DEUX LIGNES SONT CENTRÉES L'UNE SUR L'AUTRE (Julien, 19/08/2026). L'état est plus court que l'action — calées à gauche, elles laissaient un bord droit en escalier. Centrées, le bloc a un axe, et les deux boutons se répondent. `align-items` centre les DEUX LIGNES entre elles ; `text-align` centre le texte à l'intérieur de chacune, quand il se replie. Il faut les deux : l'un sans l'autre laisse un des deux niveaux décalé. */ .btn-hero__texte { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; padding-left: 16px; min-width: 0; } .btn-hero__etat { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .btn-hero__action { font-size: 1.06rem; font-weight: 800; letter-spacing: .01em; } /* ⚠ L'icône PORTE SES DIMENSIONS : sans elles, un SVG n'a aucune taille propre dans une boîte flexible et disparaît. Défaut déjà payé sur le crayon des modèles, le 19/08 au matin. */ .btn-hero__icone { width: 22px; height: 22px; flex: 0 0 auto; } .btn-hero__pastille { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); animation: dot-pulse-clair 1.8s ease-out infinite; } @keyframes dot-pulse-clair { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @media (prefers-reduced-motion: reduce) { .btn-hero__pastille { animation: none; box-shadow: 0 0 0 4px rgba(255,255,255,.28); } .btn-hero:hover { transform: none; } } /* ---- « Consulter maintenant » : plein, vert ---- */ .btn-hero--dispo { background: #2E9E5B; color: #fff; box-shadow: 0 6px 18px rgba(46, 158, 91, .28); } .btn-hero--dispo:hover { background: #27884E; box-shadow: 0 8px 22px rgba(46, 158, 91, .34); } .btn-hero--dispo .btn-hero__texte { border-left: 1px solid rgba(255, 255, 255, .32); } .btn-hero--dispo .btn-hero__etat { color: rgba(255, 255, 255, .88); } /* ---- « Prendre rendez-vous » : cerclé, encre ---- */ .btn-hero--rdv { background: #fff; color: var(--marine); border-color: var(--marine); } .btn-hero--rdv:hover { background: var(--fond-doux); } .btn-hero--rdv .btn-hero__texte { border-left: 1px solid var(--bord); } .btn-hero--rdv .btn-hero__etat { color: var(--encre-2); } /* ⚠ SUR TÉLÉPHONE, ILS S'EMPILENT MAIS NE S'ÉTIRENT PLUS (Julien, 19/08/2026 : « pourquoi les boutons sont si larges sur mobile ? »). La pleine largeur était mon choix du matin, et il produisait exactement le défaut qu'il fallait éviter : étiré, le bloc de texte se centrait dans un vide, l'icône restait seule à l'extrême gauche, et le filet ne séparait plus rien de lisible. À sa taille de contenu, le bouton retrouve la géométrie qu'il a sur grand écran — repère, filet, texte — et le centrage demandé le 19/08 redevient vrai à toutes les largeurs. `max-width: 100%` reste : un libellé long doit se replier, jamais déborder. */ @media (max-width: 560px) { /* ⚠ UNE GRILLE D'UNE COLONNE `max-content`, ET NON UNE COLONNE FLEX (Julien, 19/08/2026 : « centre les boutons sur mobile ! »). Empilés en flex et centrés, les deux boutons gardent chacun sa largeur naturelle — 285 px contre 273 — et se décalent de six pixels de chaque côté : un escalier que l'œil voit sans savoir le nommer. La colonne `max-content` prend la largeur du PLUS LARGE, les deux la remplissent, et l'ensemble se centre d'un bloc. Même largeur, même axe, sans figer aucune valeur en dur — si un libellé change, la colonne suit. */ .hero__actions { display: grid; grid-template-columns: max-content; justify-content: center; gap: 12px; } .btn-hero { width: 100%; max-width: 100%; } } .hero__media { text-align: center; } .hero__media img { width: min(310px, 64vw); } .hero__reassurance { list-style: none; display: grid; gap: 10px; } .hero__reassurance li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .98rem; color: var(--marine); } .hero__reassurance svg { width: 22px; height: 22px; flex: none; color: var(--cyan-fonce); } @media (max-width: 820px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; } .hero__media img { width: min(170px, 42vw); } } /* ---------- Sections ---------- */ .section { padding: clamp(48px, 7vw, 84px) 0; } .section--soft { background: var(--fond-doux); } .section--marine { background: linear-gradient(135deg, var(--marine) 0%, var(--marine-2) 100%); } .section--marine h2 { color: #fff; } .section__intro { color: var(--encre-2); font-size: 1.1rem; margin-bottom: 2em; } .section__intro--inverse { color: #C8DCEA; } /* En-tête des espaces professionnels (console, administration). */ .site-header__pro { margin: 0; margin-left: auto; font-weight: 700; color: var(--encre-2); font-size: .95rem; letter-spacing: .02em; } /* Le pied réduit des espaces pro est réglé PLUS BAS, juste après `.site-footer` : à spécificité égale, c'est l'ordre du fichier qui tranche, et la propriété raccourcie `padding` de `.site-footer` écrasait tout réglage placé ici. */ /* Renvoi secondaire en bas d'un formulaire (connexion → inscription). */ .renvoi { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--bord); text-align: center; } .renvoi p { margin: 0 0 12px; color: var(--encre-2); font-size: .95rem; } /* ---------- Étapes ---------- */ .etapes { list-style: none; counter-reset: etapes; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .etape { position: relative; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 30px 24px 22px; box-shadow: var(--ombre); } .etape__numero { position: absolute; top: -19px; left: 22px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--cyan); color: var(--marine); font-weight: 900; font-size: 1.05rem; border-radius: 50%; border: 3px solid #fff; } .etape__icone { position: absolute; top: -19px; right: 22px; width: 38px; height: 38px; padding: 8px; background: #fff; border: 1px solid var(--bord); border-radius: 50%; box-shadow: 0 2px 8px rgba(16, 31, 45, .08); color: var(--marine); } .etape p { margin: 0; color: var(--encre-2); font-size: .99rem; } @media (max-width: 820px) { .etapes { grid-template-columns: 1fr; } } /* ---------- Spécialités ---------- */ .specialites { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Motifs de consultation : 3 colonnes, pour une grille pleine et équilibrée. */ .specialites--motifs { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .specialites--motifs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .specialites--motifs { grid-template-columns: 1fr; } } .specialites li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 15px 18px; font-weight: 700; color: var(--marine); } .specialites svg { width: 26px; height: 26px; flex: none; color: var(--cyan-fonce); } @media (max-width: 920px) { .specialites { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .specialites { grid-template-columns: 1fr; } } /* ---------- Documents ---------- */ .documents__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .documents__liste { list-style: none; display: grid; gap: 12px; } .documents__liste li { position: relative; padding-left: 34px; color: var(--encre-2); } .documents__liste li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 13.6L7 11.8l1.5-1.5 2.3 2.3 4.7-4.7L17 9.4l-6.2 6.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 13.6L7 11.8l1.5-1.5 2.3 2.3 4.7-4.7L17 9.4l-6.2 6.2z'/%3E%3C/svg%3E") center/contain no-repeat; } .documents__liste strong { color: var(--marine); } .documents__visuel { display: grid; place-items: center; } .doc-carte { width: min(300px, 80%); background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 26px 24px; display: grid; gap: 12px; } .doc-carte__entete { height: 14px; width: 46%; border-radius: 7px; background: var(--marine); } .doc-carte__ligne { height: 9px; border-radius: 5px; background: var(--bord); } .doc-carte__ligne--l { width: 85%; } .doc-carte__ligne--c { width: 60%; background: #CBE9F4; } .doc-carte__pied { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--cyan-fonce); font-weight: 700; } .doc-carte__pied svg { width: 34px; height: 34px; } .doc-carte__pied em { font-style: normal; font-size: .9rem; } @media (max-width: 820px) { .documents__grid { grid-template-columns: 1fr; } .documents__visuel { order: -1; } } /* ---------- Cartes sécurité ---------- */ .cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px 22px; box-shadow: var(--ombre); } .carte svg { width: 30px; height: 30px; color: var(--cyan-fonce); margin-bottom: 12px; } .carte h3 { margin-bottom: .35em; } .carte p { margin: 0; color: var(--encre-2); font-size: .96rem; } @media (max-width: 980px) { .cartes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .cartes { grid-template-columns: 1fr; } } /* ---------- Section praticiens ---------- */ .praticiens__grid { display: grid; grid-template-columns: minmax(0, 1fr); } .praticiens__liste { list-style: none; display: grid; gap: 12px; margin: 0 0 30px; } .praticiens__liste li { position: relative; padding-left: 30px; color: #E4EEF6; font-size: 1.02rem; } .praticiens__liste li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); } /* ---------- Page d'attente ---------- */ .page-attente { min-height: 52vh; display: grid; align-items: center; } .page-attente__inner { text-align: center; max-width: 560px; margin-inline: auto; } .page-attente img { margin-bottom: 18px; } .page-attente p { color: var(--encre-2); margin-bottom: 28px; } .erreur-code { margin: 0 0 4px; font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--cyan-fonce); letter-spacing: .02em; } /* ---------- Pied de page ---------- */ .site-footer { border-top: 1px solid var(--bord); padding: 44px 0 34px; background: #fff; } .site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; margin-bottom: 30px; } .site-footer__baseline { color: var(--encre-2); margin-top: 12px; font-size: .97rem; } .site-footer__title { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 12px; font-weight: 800; } .site-footer nav ul { list-style: none; display: grid; gap: 8px; } .site-footer nav a { color: var(--marine); text-decoration: none; font-weight: 600; font-size: .97rem; } .site-footer nav a:hover { text-decoration: underline; } .site-footer__legal { border-top: 1px solid var(--bord); padding-top: 20px; color: var(--encre-2); font-size: .9rem; margin: 0; } @media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; gap: 24px; } } /* Espaces professionnels (console, administration) : le pied se réduit à la seule mention légale. Sans ces deux lignes, le filet de `.site-footer` et celui de `.site-footer__legal` se superposaient à 45 px d'intervalle, avec une bande vide entre les deux que l'encart cookies venait chevaucher. ⚠ Doit rester APRÈS les règles ci-dessus (même spécificité, ordre du fichier). */ /* ⚠ LE REPÈRE A CHANGÉ le 19/08/2026, et c'était le vrai risque du retrait du pied de page : la colonne flexible des espaces professionnels était accrochée à `body:has(.site-footer--pro)`, donc à la PRÉSENCE DU PIED DE PAGE. Le supprimer emportait silencieusement la mise en page de l'agenda — celle-là même qui venait d'être réparée, et dont la panne ne se voit qu'à l'œil. Le repère est désormais `body.espace-pro`, posé par le gabarit d'après la route : il décrit ce que la page EST, pas ce qu'elle contient. Un état ne se déduit pas d'un élément décoratif qui peut disparaître. */ /* ⚠ `100dvh`, PAS `100vh` (19/08/2026). Sur mobile, `100vh` vaut la hauteur de la fenêtre BARRE D'ADRESSE MASQUÉE : elle est donc toujours plus grande que la surface réellement visible, et la page défile de la hauteur de la barre — pour ne rien montrer. Tant que le pied de page occupait ce bas, le défilement révélait quelque chose et passait pour voulu ; le pied retiré, il ne mène plus qu'au vide. La règle était déjà écrite trois lignes plus bas pour l'agenda, et n'avait pas été appliquée ici. */ body.espace-pro { display: flex; flex-direction: column; min-height: 100dvh; } body.espace-pro > main { flex: 1 0 auto; } /* ---------- Pages « plein écran » des espaces professionnels ---------- L'agenda occupe la fenêtre : la page ne défile pas, seul le planning défile. `100dvh` (et non `100vh`) parce que sur mobile la barre d'adresse du navigateur se rétracte : avec `vh`, le bas de la grille passe dessous. `min-height: 0` sur
lève la règle implicite qui empêche un enfant flexible de rétrécir sous la taille de son contenu. */ body:has(.console-agenda) { height: 100dvh; min-height: 0; overflow: hidden; } /* ⚠ `flex-direction: column` INDISPENSABLE : sans lui,
devient une boîte flexible EN LIGNE, la section n'occupe plus que la largeur de son contenu et l'agenda se replie en une colonne étroite au milieu de l'écran. */ body:has(.console-agenda) > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* L'encart cookies flotte au-dessus : il ne doit pas réserver d'espace en bas, sinon la fenêtre est plus haute que l'écran et la barre de défilement revient. ⚠ ÉLARGI À TOUT L'ESPACE PRO le 19/08/2026 : la règle ne visait que l'agenda, si bien que les autres écrans de la console gardaient 132 px de réserve — et 210 px sur téléphone. Un praticien y voyait une barre de défilement qui ne menait à rien. La réserve a un sens sur le SITE PUBLIC, où le bandeau masquerait la fin d'une page qu'on lit jusqu'au bout ; elle n'en a aucun sur un poste de travail. */ body.espace-pro:has(.rgpd:not([hidden])), body.sans-pied:has(.rgpd:not([hidden])) { padding-bottom: 0; } /* ---------- Annuaire (point 4a) ---------- */ .annuaire-en-tete h1 { margin-top: .2em; } .fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .92rem; color: var(--encre-2); margin-bottom: 18px; } .fil-ariane a { color: var(--encre-2); } .fil-ariane [aria-current] { color: var(--marine); font-weight: 700; } .avatar { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--fond-doux); border: 2px solid #BCE4F1; color: var(--marine); font-weight: 900; font-size: 1.15rem; } .praticiens-liste { list-style: none; display: grid; gap: 16px; } .praticien-carte { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px 22px; } .praticien-carte__infos { flex: 1; min-width: 0; } .praticien-carte h2 { font-size: 1.2rem; margin: 0 0 .15em; } .praticien-carte h2 a { color: var(--marine); text-decoration: none; } .praticien-carte h2 a:hover { text-decoration: underline; } .praticien-carte__meta { color: var(--encre-2); font-size: .95rem; margin: 0 0 .3em; } .praticien-carte__tarif { margin: 0; font-size: .98rem; color: var(--encre); } @media (max-width: 640px) { .praticien-carte { flex-wrap: wrap; } .praticien-carte__cta { width: 100%; } } /* ---------- En-tête des documents : aperçu et champs (console + admin) ---------- */ /* Reproduit à l'écran ce qui s'imprimera : le praticien voit son en-tête réel, pas une description de son en-tête. */ .entete-apercu { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 16px 18px 14px; margin-bottom: 14px; position: relative; border-bottom: 3px solid var(--bord); } .entete-apercu__ligne { display: block; font-size: .95rem; color: var(--encre); } .entete-apercu__ligne--nom { font-weight: 900; font-size: 1.15rem; color: var(--marine); margin-bottom: 2px; } .entete-apercu__marque { position: absolute; top: 16px; right: 18px; font-weight: 800; color: var(--cyan); font-size: 1rem; } .entete-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 10px; } .entete-champs > div { background: var(--fond-doux); border-radius: var(--rayon-s); padding: 10px 12px; } .entete-champs dt { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); margin-bottom: 3px; } .entete-champs dd { margin: 0; color: var(--marine); font-weight: 700; } /* ==================== ÉDITEUR DE CV (console → Profil) ==================== Défaut signalé par Julien le 13/08/2026 : « des grandes cases, des petites cases, une absence de cohérence ». Il avait raison, et pour trois raisons cumulées. · Le champ le plus important du bloc — son TITRE — était le plus étroit, coincé à côté des cases à cocher, pendant que les lignes en dessous prenaient toute la largeur. · Les champs de ligne étaient deux fois moins hauts que ceux du reste de la page : ils héritaient d'un `flex-basis` mais d'aucune hauteur commune. · Rien ne disait ce qu'on tapait : chaque colonne ne s'annonçait que par son texte grisé, qui disparaît à la première lettre. LA RÉPONSE EST UNE GRILLE. En-tête de colonnes et lignes partagent le MÊME gabarit, choisi d'après les colonnes actives du bloc : tout s'aligne verticalement, quelle que soit la combinaison. Les colonnes masquées ne sont pas seulement invisibles, elles sortent de la grille (`display: none`), sinon elles laisseraient des vides. */ .cv-editeur { border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 16px 18px; margin: 22px 0 0; /* Éditeur dense : des champs de 54 px y feraient une page interminable. C'est LA variable que lit la règle de hauteur commune — on ne redéfinit donc aucune hauteur à la main. */ --hauteur-champ: 44px; } .cv-editeur legend { font-weight: 800; color: var(--marine); padding: 0 8px; display: table; } .cv-section { border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 16px 18px; margin-bottom: 14px; background: #fff; } /* Le titre du bloc prend TOUTE la largeur : c'est ce qui apparaîtra en tête de rubrique sur la fiche publique. Les cases de colonnes passent en dessous, au rang de réglage. */ .cv-section__tete { margin-bottom: 14px; } .cv-section__tete .champ { margin: 0 0 10px; } /* Le titre du bloc s'aligne sur les LIGNES qu'il coiffe : dans un même bloc, tout part du même bord gauche et s'arrête au même bord droit. C'était le dernier écart de largeur — un champ court au-dessus de champs longs se lit comme une erreur de mise en page. */ .cv-section__tete .champ input { max-width: none; } .cv-colonnes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; } .cv-colonnes legend { font-size: .78rem; font-weight: 700; color: var(--encre-2); padding: 0; margin: 0 4px 0 0; float: left; line-height: 32px; } /* Une case à cocher devient une pastille : on voit d'un coup d'œil quelles colonnes sont actives, sans lire trois libellés minuscules. */ .cv-colonnes label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1.5px solid var(--bord); border-radius: 999px; font-size: .88rem; color: var(--encre); background: #fff; cursor: pointer; transition: all var(--transition); } .cv-colonnes label:has(input:checked) { border-color: var(--cyan-fonce); background: var(--fond-doux); color: var(--marine); font-weight: 700; } .cv-colonnes input { flex: none; width: 16px; height: 16px; accent-color: var(--cyan-fonce); } /* ------------------------- LA GRILLE DES LIGNES -------------------------- Ordre des colonnes : dates, intitulé, précision, lien, corbeille. Chaque combinaison a son gabarit ; l'en-tête utilise EXACTEMENT le même, ce qui garantit l'alignement sans un seul calcul. */ .cv-entetes, .cv-entree { display: grid; gap: 8px; align-items: center; grid-template-columns: minmax(0, 1fr) var(--cv-corbeille, 44px); } .cv-section--dates .cv-entetes, .cv-section--dates .cv-entree { grid-template-columns: 150px minmax(0, 1fr) var(--cv-corbeille, 44px); } .cv-section--detail .cv-entetes, .cv-section--detail .cv-entree, .cv-section--lien .cv-entetes, .cv-section--lien .cv-entree { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) var(--cv-corbeille, 44px); } .cv-section--dates.cv-section--detail .cv-entetes, .cv-section--dates.cv-section--detail .cv-entree, .cv-section--dates.cv-section--lien .cv-entetes, .cv-section--dates.cv-section--lien .cv-entree { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1fr) var(--cv-corbeille, 44px); } .cv-section--detail.cv-section--lien .cv-entetes, .cv-section--detail.cv-section--lien .cv-entree { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) var(--cv-corbeille, 44px); } .cv-section--dates.cv-section--detail.cv-section--lien .cv-entetes, .cv-section--dates.cv-section--detail.cv-section--lien .cv-entree { grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) var(--cv-corbeille, 44px); } /* ⚠ VOICI LA VRAIE CAUSE DES « PETITES CASES ». Les champs d'une ligne ne sont PAS dans un `.champ` : ils n'héritaient donc ni du cadre, ni du remplissage, ni de la hauteur commune du site, et se rendaient à la taille par défaut du navigateur — deux fois plus bas que tous les autres champs de la page. On leur donne ici la même apparence, explicitement. */ .cv-entree input { width: 100%; font: inherit; color: var(--encre); height: var(--hauteur-champ, 44px); padding: 0 12px; line-height: 1.4; border: 1.5px solid var(--bord); border-radius: var(--rayon-s); background: #fff; box-sizing: border-box; transition: border-color var(--transition); } .cv-entree input:focus { outline: 2px solid var(--cyan-fonce); outline-offset: 1px; border-color: var(--cyan-fonce); } .cv-entree input::placeholder { color: var(--encre-2); opacity: .7; } /* ⚠ PLANCHER À 12 px (relevé par le harnais de captures, 15/08/2026). `.74rem` donnait 11,8 px pour « Dates », « Intitulé », « Précision » — les en-têtes qui disent à quoi sert chaque case de l'éditeur de CV. Un en-tête qu'on ne lit pas laisse remplir la mauvaise colonne. Les capitales, en prime, se lisent moins bien que les minuscules à taille égale. */ .cv-entetes { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); margin-bottom: 5px; } .cv-entree { margin-bottom: 8px; } /* ⚠ `display: none` et non `visibility` : une colonne masquée doit SORTIR de la grille, sinon elle y laisse une colonne vide et tout se décale. */ .cv-section:not(.cv-section--dates) [data-nom="periode"], .cv-section:not(.cv-section--detail) [data-nom="detail"], .cv-section:not(.cv-section--lien) [data-nom="lien"] { display: none; } /* ⚠ PLANCHER EXPLICITE À 40 px (relevé par le harnais, 15/08/2026). La hauteur suit `--hauteur-champ` pour rester alignée sur les champs de la ligne — mais cette variable est redéfinie plus bas selon le contexte, et la croix retombait à 38 px sur téléphone. Deux pixels sous le seuil, sur le bouton qui EFFACE une entrée de CV : le rater n'est rien, le toucher par erreur en visant son voisin détruit une ligne qu'on vient d'écrire. Un plancher vaut mieux qu'une valeur héritée qu'on croit connaître. */ .cv-supprimer { width: 44px; height: var(--hauteur-champ, 44px); min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--encre-2); font-size: 1.05rem; } .cv-supprimer:hover { background: var(--alerte-fond); color: var(--alerte-texte); } .cv-supprimer-bloc { color: var(--alerte-texte); } .cv-supprimer-bloc:hover { background: var(--alerte-fond); color: var(--alerte-texte); } .cv-section__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } @media (max-width: 700px) { /* Sur téléphone la grille n'a plus de sens : une colonne de 150 px et trois champs côte à côte deviennent illisibles. Chaque champ prend la ligne, la corbeille se place à droite en dessous, et l'en-tête de colonnes disparaît — le texte grisé de chaque champ suffit. */ .cv-entetes { display: none; } /* ⚠ Le `float` de la légende la laissait sur la même ligne que la première pastille, les deux autres passant en dessous : trois pastilles réparties sur deux lignes autour d'un libellé. Elle prend sa propre ligne. */ .cv-colonnes legend { float: none; width: 100%; line-height: 1.3; margin: 0 0 8px; } /* Un filet à gauche GROUPE les champs d'une même ligne : empilés sans repère, six champs à la suite ne disent plus où finit une entrée et où commence la suivante. */ .cv-entree { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--bord); } .cv-section { padding: 14px; } .cv-supprimer { justify-self: end; height: 38px; width: 38px; } } /* ---------- Fiche praticien : bandeau marine pleine largeur ---------- */ /* Le praticien, sa disponibilité et son tarif tiennent dans un seul bloc en haut de page ; les ACTIONS sont sorties du bandeau (Julien, 13/08/2026) et posées juste en dessous, centrées. Le CV vit plus bas, sur fond clair. ⚠ RESPIRATIONS ACCORDÉES. Le bandeau était payé 18 px en haut et 26 en bas, et le bloc suivant repartait sur la marge d'une section ordinaire : trois valeurs sans rapport, donc un bandeau qui semblait « posé de travers ». Elles découlent maintenant d'une seule variable — la changer déplace tout l'ensemble d'un bloc, et rien ne se décale tout seul. Cette organisation est la RÉFÉRENCE pour les fiches des confrères qui nous rejoindront : aucune mesure en dur, aucun cas particulier par praticien. */ .praticien-bandeau { background: var(--marine); color: #fff; padding: var(--fiche-respiration) 0; } .praticien-bandeau h1 { margin: 0; color: #fff; font-size: clamp(1.55rem, 3.2vw, 2.15rem); } .fil-ariane--inverse, .fil-ariane--inverse a { color: #BCE4F1; } .fil-ariane--inverse a:hover { color: #fff; } /* Le fil d'Ariane fait partie du bandeau : sa marge basse est la respiration INTERNE, la moitié de celle des bords. */ .praticien-bandeau .fil-ariane { margin-bottom: calc(var(--fiche-respiration) / 2); } .praticien-bandeau__grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; } .praticien-bandeau__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #2E5877; background: var(--marine-2); flex: none; } .praticien-bandeau__photo--initiales { display: inline-grid; place-items: center; font-weight: 900; font-size: 2rem; color: #BCE4F1; } .praticien-bandeau__meta { margin: 4px 0 0; color: #BCE4F1; } .praticien-bandeau__dispo { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: #8BE8B4; font-weight: 700; font-size: .97rem; } .praticien-bandeau__tarif { margin: 0; text-align: right; } .praticien-bandeau__tarif span { display: block; font-size: .85rem; color: #BCE4F1; } .praticien-bandeau__tarif b { font-size: 1.6rem; font-weight: 800; } /* LES ACTIONS, sous le bandeau, centrées : à cet endroit de la page, c'est le seul geste proposé — il ne se dispute plus la place avec le nom et le tarif. */ .praticien-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: var(--fiche-respiration) 20px; } /* ⚠ `.btn--large` vaut `width: 100%` sur tout le site : sorti du bandeau, le bouton traversait donc la page d'un bord à l'autre — une barre noire de 1 400 px pour trois mots (constaté par Julien, 13/08/2026). Ici il reprend une largeur de bouton : assez large pour se voir, pas au point de devenir une bannière. */ .praticien-actions .btn { width: auto; min-width: 240px; max-width: 360px; } @media (max-width: 560px) { /* Sur téléphone, la pleine largeur redevient la bonne réponse : la colonne fait déjà la largeur d'un bouton. */ .praticien-actions .btn { width: 100%; max-width: none; min-width: 0; } } @media (max-width: 760px) { .praticien-bandeau__grille { grid-template-columns: auto minmax(0, 1fr); } .praticien-bandeau__photo { width: 72px; height: 72px; } .praticien-bandeau__tarif { grid-column: 1 / -1; text-align: left; } .praticien-actions .btn { flex: 1 1 100%; } } /* ⚠ La section qui suit les actions ne repart PAS de zéro : les actions portent déjà la respiration basse, et l'ajouter deux fois creusait un trou entre le bouton et la présentation du médecin. */ .praticien-actions + .section { padding-top: 0; } /* Pleine largeur (Julien, 11/08) : l'intro dit où le médecin exerce vraiment, elle tient sur une ou deux lignes et ne doit pas être bridée en colonne. */ .praticien-intro { font-size: 1.05rem; margin: 0 0 8px; } /* ---------- CV du praticien (rendu générique, cf. partials/cv-praticien) ---------- */ .cv__bloc { margin-top: 30px; } .cv__titre { font-size: 1.15rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bord); } .cv__chrono, .cv__liste { list-style: none; margin: 0; padding: 0; } .cv__chrono > li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--bord); } .cv__periode { color: var(--cyan-fonce); font-weight: 800; font-size: .92rem; } .cv__corps { display: block; } .cv__intitule { display: block; color: var(--marine); font-weight: 700; } .cv__lien { color: var(--cyan-fonce); text-decoration: underline; } .cv__lien:hover { color: var(--marine); } .cv__detail { display: block; color: var(--encre-2); font-size: .95rem; } /* Section non datée (diplômes) : liste sur deux colonnes, sans années. */ .cv__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; } .cv__liste > li { padding-left: 18px; position: relative; } .cv__liste > li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } @media (max-width: 760px) { .cv__chrono > li { grid-template-columns: 1fr; gap: 2px; } .cv__liste { grid-template-columns: 1fr; } } .fiche__walkin { display: flex; align-items: center; gap: 10px; margin: 0; color: #1B7A43; font-weight: 700; font-size: .97rem; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #2FB56B; flex: 0 0 auto; /* Halo statique = état de repli. Il reste visible si l'animation est coupée (prefers-reduced-motion, ligne 56), le rond ne perd jamais son relief. */ box-shadow: 0 0 0 4px rgba(47, 181, 107, .18); /* Pulsation reprise des autres sites de Julien (tc.css « tcpulse ») : le rond respire, le patient comprend que la disponibilité est relevée en direct. */ animation: dot-pulse 1.6s ease-out infinite; } @keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 181, 107, .55); } 70% { box-shadow: 0 0 0 9px rgba(47, 181, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 181, 107, 0); } } /* ---------- Encart cookies ---------- */ .rgpd { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 720px; margin-inline: auto; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 12px 40px rgba(16, 31, 45, .18); padding: 16px 20px; } .rgpd[hidden] { display: none; } /* Tant que le bandeau est affiché, on libère l'espace correspondant en bas de page : sinon il recouvre les derniers champs des formulaires. */ body:has(.rgpd:not([hidden])) { padding-bottom: 132px; } @media (max-width: 700px) { body:has(.rgpd:not([hidden])) { padding-bottom: 210px; } } .rgpd p { margin: 0; flex: 1 1 320px; font-size: .95rem; } .rgpd .btn { padding: 9px 20px; font-size: .95rem; } /* ---------- Tunnel de réservation (4b→4e) ---------- */ .tunnel__inner { max-width: 780px; } /* ═══ DENSITÉ DU TUNNEL ═══ Les formulaires du parcours patient étaient dessinés aux dimensions des pages de présentation : titres de 30 px, champs de 54 px, cartes de choix de 30 px de rembourrage. Sur un écran d'ordinateur, une étape simple occupait deux hauteurs de fenêtre — le patient défilait pour trouver le bouton, et l'ensemble faisait « site vitrine » plutôt que « formulaire médical ». On resserre, à l'image du module du Dr Gozlan. ⚠ Portée limitée à `.tunnel` : la console et l'espace admin gardent leurs dimensions, qui sont réglées pour un autre usage. */ .tunnel { --hauteur-champ: 44px; padding: 26px 0 44px; } .tunnel .carte-tunnel { padding: clamp(18px, 2.6vw, 30px); } .tunnel .carte-tunnel h1 { font-size: clamp(1.15rem, 2.2vw, 1.42rem); margin-bottom: .5em; } .tunnel .carte-tunnel .aide { font-size: .9rem; } .tunnel .sous-titre { margin-top: 1.3em; margin-bottom: .7em; font-size: 1rem; } .tunnel .champ { margin-bottom: 13px; } .tunnel .champ label { font-size: .88rem; margin-bottom: 4px; } .tunnel .champ input, .tunnel .champ select, .tunnel .champ textarea { padding: 9px 12px; font-size: .95rem; } .tunnel .champ select { padding-right: 38px; background-position: right 12px center; } /* ⚠ LES RÈGLES `.tunnel …` QUI VIVAIENT ICI ONT ÉTÉ RETIRÉES le 13/08/2026. Elles doublaient et contredisaient `public/css/tunnel.css`, qui est chargé APRÈS : deux modèles de « choix » se cumulaient — l'un met la bordure sur la carte (modèle DG), l'autre sur le texte qu'elle contient (ancien modèle pastille) — et le patient voyait un cadre dans un cadre. Tout ce qui concerne le tunnel vit désormais dans tunnel.css, et nulle part ailleurs. */ /* ⚠ `.tunnel-praticien__nom` et `__meta` ONT ÉTÉ RETIRÉS le 19/08/2026 — dernières survivantes du bloc « tunnel maison » supprimé le matin même. Mon nettoyage visait `.tunnel-praticien` avec une limite de mot : les variantes `__nom` et `__meta` y échappaient, et sont restées seules SOUS le commentaire qui dit que rien du tunnel ne vit plus ici. Une expression régulière qui borne trop laisse exactement ce genre de reste. */ .carte-tunnel { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(24px, 4vw, 40px); } .carte-tunnel h1 { font-size: clamp(1.45rem, 3vw, 1.9rem); } .carte-tunnel .aide { color: var(--encre-2); } .sous-titre { margin-top: 1.6em; font-size: 1.1rem; } .champ { margin: 0 0 18px; } .champ label { display: block; font-weight: 700; color: var(--marine); margin-bottom: 6px; } .champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea { width: 100%; font: inherit; color: var(--encre); padding: 12px 14px; border: 1.5px solid var(--bord); border-radius: var(--rayon-s); background: #fff; transition: border-color var(--transition); box-sizing: border-box; } /* LIGNE « CASE À COCHER + LIBELLÉ ». `align-items: flex-start` et non `center` : sur téléphone le libellé passe sur deux ou trois lignes, et une case centrée verticalement se retrouve au milieu du paragraphe au lieu d'être en face de sa première ligne. `flex: none` sur la case : sans cela elle se laisse comprimer par un long libellé et devient un rectangle de deux pixels. */ /* Hauteur IDENTIQUE pour tous les champs d'une même ligne (texte, date, liste). Sans cela le navigateur rend la date 2 px plus haute et la liste 3 px plus basse que les champs texte, ce qui se voit immédiatement côte à côte. */ .champ input:not([type="checkbox"]):not([type="radio"]), .champ select { height: var(--hauteur-champ, 54px); line-height: 1.65; } .champ textarea { min-height: var(--hauteur-champ, 54px); line-height: 1.6; } /* Certains navigateurs (Chrome, Safari) ajoutent leur propre gabarit interne aux champs de date : on le neutralise. */ .champ input[type="date"] { -webkit-appearance: none; appearance: none; } .champ input[type="date"]::-webkit-date-and-time-value { text-align: left; } .champ input[type="date"]::-webkit-datetime-edit { line-height: 1.65; padding: 0; } /* Liste déroulante : flèche maison, rendu identique sur tous les navigateurs (le rendu natif diffère fortement entre Chrome, Safari et Firefox mobile). */ .champ select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322364A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(20, 178, 217, .18); } .champ--code { max-width: 190px; font-size: 1.5rem; letter-spacing: .35em; text-align: center; height: 62px; } /* ---------- Code SMS : six cases sur toute la largeur ---------- */ .code-cases__legende { display: block; font-weight: 700; color: var(--marine); margin-bottom: 8px; } .code-cases__grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 14px); } .code-case { width: 100%; min-width: 0; height: clamp(56px, 12vw, 72px); font: 800 clamp(1.4rem, 5vw, 1.9rem)/1 var(--police); color: var(--marine); text-align: center; background: #fff; border: 1.5px solid var(--bord); border-radius: var(--rayon-s); transition: border-color var(--transition), box-shadow var(--transition); -webkit-appearance: none; appearance: none; } .code-case:focus { outline: none; border-color: var(--cyan-fonce); box-shadow: 0 0 0 3px rgba(14, 124, 153, .18); } /* Le code est complet : les six cases le disent avant même l'envoi. */ .code-cases--complet .code-case { border-color: #2FB56B; } .champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 560px) { .champ-duo { grid-template-columns: 1fr; } } .erreur { color: #A5372B; font-weight: 700; font-size: .92rem; margin: 6px 0 0; } .erreur--bloc { background: var(--alerte-fond); border: 1px solid var(--alerte-bord); border-radius: var(--rayon-s); padding: 10px 14px; margin-bottom: 16px; } /* ---------------------------- PILULES DE FILTRE --------------------------- ⚠ DÉFAUT CORRIGÉ LE 20/08/2026, et il ne se voyait que sur UN écran. Ce composant avait été écrit pour un