/* Polycrabat Sevamed — éléments communs à toutes les pages : lien d'évitement, menu mobile, pied de page global, garde-fou sans JavaScript, contrastes et cibles tactiles. Cette feuille complète le design existant (V4 Reference 05) : aucune couleur, typographie ni structure de page n'est modifiée ici, seuls les composants communs sont normalisés. */ /* ------------------------------------------------------------------ lien d'évitement */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:14px 20px;background:var(--brand-navy,#061927);color:#fff;font:800 12px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase} .skip-link:focus{left:8px;top:8px;outline:3px solid var(--brand-gold,#d3ad6a);outline-offset:2px} /* ------------------------------------------------------------------ contenu visible sans JavaScript Les blocs animés partent visibles. L'état masqué n'est appliqué que si le script a pu marquer , et un filet de sécurité réaffiche tout si l'observateur échoue. */ .reveal{opacity:1;transform:none} html.js .reveal{opacity:0;transform:translateY(25px);transition:.7s ease} html.js .reveal.visible,html.js.reveal-all .reveal{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}} /* ------------------------------------------------------------------ menu mobile et tablette (≤1100 px) Au-delà de 700 px les 10 rubriques passaient sur deux lignes et l'en-tête collant mesurait 167 px (22 % d'un iPad paysage) : le menu burger prend le relais jusqu'à 1100 px. Case à cocher native : le menu fonctionne sans JavaScript et au clavier (Espace). */ .navtoggle{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none} .burger{display:none;position:relative;z-index:2;flex:none;width:46px;height:46px;margin-left:auto;padding:0;border:1px solid rgba(23,49,62,.16);border-radius:2px;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer} .burger::before,.burger::after,.burger span{content:"";position:absolute;left:13px;width:20px;height:2px;background:var(--brand-navy,#061927);transition:transform .22s ease,opacity .18s ease} .burger::before{top:16px} .burger span{top:22px} .burger::after{top:28px} .navtoggle:focus-visible~.nav .burger{outline:3px solid var(--brand-blue,#0b3047);outline-offset:2px} .navtoggle:checked~.nav .burger::before{transform:translateY(6px) rotate(45deg)} .navtoggle:checked~.nav .burger span{opacity:0} .navtoggle:checked~.nav .burger::after{transform:translateY(-6px) rotate(-45deg)} .mobilenav{display:none} @media(max-width:1100px){ .nav{min-height:84px} .sectionnav{display:none} .burger{display:block} .header-contact a:not(.navcta){display:none} .header-contact{gap:10px;flex:none;margin-left:auto} .navcta{padding:12px 12px;font-size:9px} .brand{min-width:0;flex:none} .burger{margin-left:10px} .navtoggle:checked~.mobilenav{display:block} .mobilenav{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 84px);max-height:calc(100dvh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--brand-paper,#fbfaf7);border-top:1px solid var(--border-soft,#dbe1df);border-bottom:3px solid var(--brand-gold,#d3ad6a);box-shadow:0 18px 40px rgba(6,25,39,.18)} .mobilenav ul{list-style:none;margin:0;padding:6px 0} .mobilenav li+li a{border-top:1px solid var(--border-soft,#dbe1df)} .mobilenav a{display:flex;align-items:center;min-height:54px;padding:14px 22px;border-left:3px solid transparent;font:600 15px/1.3 Inter,-apple-system,"Segoe UI",sans-serif;color:var(--text-primary,#17313e)} .mobilenav a[aria-current]{border-left-color:var(--brand-gold,#d3ad6a);background:var(--brand-ivory,#f4efe7);color:var(--brand-blue,#0b3047);font-weight:800} .mobilenav a:active{background:var(--brand-ivory,#f4efe7)} .mobilenav-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 22px 22px;border-top:1px solid var(--border-soft,#dbe1df);background:#fff} .mobilenav-contact a{min-height:50px;justify-content:center;padding:0 10px;border:1px solid var(--brand-blue,#0b3047);border-left-width:1px;font:800 11px/1.2 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-blue,#0b3047);text-align:center} .mobilenav-contact a.is-primary{grid-column:1/-1;background:var(--brand-navy,#061927);border-color:var(--brand-navy,#061927);color:#fff} } @media(min-width:701px) and (max-width:1100px){.mobilenav{left:auto;width:min(440px,100%)}} @media(prefers-reduced-motion:reduce){.burger::before,.burger::after,.burger span{transition:none}} /* ------------------------------------------------------------------ pied de page global Les règles .footer-grid n'existaient que dans assets/styles.css, feuille qui n'est pas liée par les pages générées : elles sont reprises ici pour que le pied de page soit identique partout. */ .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px} .footer-grid strong{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:400;color:#e7e3db} .footer-grid p{margin:8px 0 0;line-height:1.7} .footer-grid h3{margin:0 0 12px;font:800 10px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#e4c98f} .footer-grid a{display:block;padding:4px 0;color:#a9bec5;min-height:22px} .footer-grid a:hover,.footer-grid a:focus-visible{color:#fff} .footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:26px;padding-top:18px;border-top:1px solid rgba(169,190,197,.22)} .footer-legal a{color:#a9bec5;font-size:11px} .footer-legal a:hover,.footer-legal a:focus-visible{color:#fff;text-decoration:underline} .footer .credits{font-size:10px;margin-top:16px;opacity:.72;line-height:1.7} @media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:700px){ .footer-grid a{display:flex;align-items:center;padding:10px 0;min-height:44px} .footer-legal{gap:0 18px} .footer-legal a{display:flex;align-items:center;min-height:44px} } @media(max-width:620px){.footer-grid{grid-template-columns:1fr;gap:26px}} /* ------------------------------------------------------------------ contrastes et cibles tactiles */ .pc-more,.ck-defs .pc-more{display:inline-flex;align-items:center;min-height:30px} @media(max-width:700px){ .pc-panel .pc-tel,.pc-others a,.ck-linkline a{display:flex;align-items:center;min-height:44px} .pc-related a,.pc-list li{min-height:48px} .pc-more,.ck-defs .pc-more{min-height:44px} .pi-struct-body .tel,.pt-card-actions .pt-sec{display:inline-flex;align-items:center;min-height:44px} /* puces du diaporama : zone tactile élargie sans changer leur taille visible */ .tour-dots{gap:0} /* zones jointives sans chevauchement (Lighthouse « target-size », 28 oct. 2026) : 36 x 43 px chacune, écart visible inchangé (8 px) */ .tour-dot{position:relative;background-clip:content-box;padding:20px 4px;margin:-20px 0} } /* ------------------------------------------------------------------ renvois contextuels entre rubriques Utilisé sur les pages qui ne comportaient aucun lien sortant (2ᵉ avis, Contact, Présentation). */ .xlinks{margin:34px 0 8px;padding:26px 0 0;border-top:1px solid var(--border-soft,#dbe1df)} .xlinks>b{display:block;margin-bottom:14px;font:800 10.5px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-blue,#0b3047)} .xlinks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .xlinks a{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 16px;background:#fff;border:1px solid var(--border-soft,#dbe1df);color:var(--brand-navy,#061927);font-size:14px;font-weight:600;line-height:1.4;transition:background .22s,border-color .22s} .xlinks a:hover,.xlinks a:focus-visible{background:var(--brand-ivory,#f4efe7);border-color:var(--brand-blue,#0b3047)} .xlinks a em{margin-left:auto;font-style:normal;color:var(--brand-blue,#0b3047)} .xlinks a span{color:var(--text-secondary,#5a6e75);font-weight:400;font-size:12.5px;display:block} @media(max-width:700px){.xlinks ul{grid-template-columns:1fr}} /* titre de structure lisible par les lecteurs d’écran uniquement */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ------------------------------------------------------------------ en-tête : e-mail et téléphone L'e-mail était en 12 px gras et le téléphone en 16 px maigre : même taille, même graisse, même couleur pour les deux, et les deux restent cliquables. */ @media(min-width:701px){ .header-contact>a:not(.navcta){ font:700 14px/1.2 Inter,-apple-system,"Segoe UI",sans-serif!important; letter-spacing:.005em;color:var(--text-primary,#17313e);white-space:nowrap; display:inline-flex;align-items:center;min-height:38px; border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .header-contact>a[href^="tel:"]{font-variant-numeric:tabular-nums} .header-contact>a:not(.navcta):hover,.header-contact>a:not(.navcta):focus-visible{ color:var(--brand-blue,#0b3047);border-bottom-color:var(--brand-gold,#d3ad6a)} } /* ------------------------------------------------------------------ équilibre des titres de hero Évite les lignes orphelines d'un ou deux mots (« l'exige » seul) sans toucher aux tailles. */ .pc-hero h1,.pc-sub,.pc-h2,.pc-head h2{text-wrap:balance} .pc-sub{max-width:34ch} @media(max-width:820px){.pc-sub{max-width:none}} /* ================================================================== Identité : barre supérieure, lock-up de marque, direction au pied de page ================================================================== */ /* --- barre supérieure : deux numéros, e-mail officiel, disponibilité */ .top{height:auto;min-height:36px;display:flex;align-items:center;background:var(--brand-navy,#061927);color:#c9d9df} .top>.wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 26px; padding-top:7px;padding-bottom:7px; font:600 12px/1.5 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;text-transform:none} .top a{color:#e7eef1;white-space:nowrap;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .top a:hover,.top a:focus-visible{color:#fff;border-bottom-color:var(--brand-gold,#d3ad6a)} .top .sep{color:#7f98a2;margin:0 7px} .top-tel{font-variant-numeric:tabular-nums} .top-dispo{color:var(--brand-gold-light,#e3c58a);font-weight:700;letter-spacing:.08em;white-space:nowrap} .top-tel,.top-mail,.top-dispo{display:inline-flex;align-items:center;min-height:24px} @media(max-width:1100px){.top>.wrap{justify-content:center;gap:4px 18px}} @media(max-width:700px){ .top{display:flex} /* la barre reste visible sur téléphone */ .top>.wrap{gap:0 14px;font-size:11px;padding-top:5px;padding-bottom:5px} .top .sep{padding:0} .top a{display:inline-flex;align-items:center;min-height:28px} .top-tel,.top-mail,.top-dispo{min-height:28px} } @media(max-width:430px){.top>.wrap{font-size:10.5px;gap:2px 12px}} /* --- lock-up de marque : logo agrandi, nom et signature */ .brand{display:flex;align-items:center;gap:15px;min-width:0;text-decoration:none} /* logo complet : hauteur pilotée, largeur libre, jamais déformé */ .brandmark{width:auto;height:52px;max-width:none;object-fit:contain;object-position:left center;flex:none} .brand-txt{display:flex;flex-direction:column;justify-content:center;min-width:0; padding-left:15px;border-left:1px solid rgba(23,49,62,.16)} .brand-txt strong{font:700 16px/1.15 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.13em; color:var(--brand-navy,#061927);white-space:nowrap} .brand-txt small{margin-top:5px;font:600 10.5px/1.2 Inter,-apple-system,"Segoe UI",sans-serif; letter-spacing:.17em;text-transform:uppercase;color:var(--brand-gold-deep,#7d5f24);white-space:nowrap} .header{height:auto} .nav{min-height:96px;gap:18px} @media(max-width:1180px){.brandmark{height:46px}.brand-txt strong{font-size:14px;letter-spacing:.1em}.brand-txt small{font-size:9.5px}} @media(max-width:900px){.brand-txt{padding-left:12px}.brandmark{height:42px}} @media(max-width:700px){ .nav{min-height:76px;gap:10px} .brand{gap:11px} .brandmark{height:36px} .brand-txt{padding-left:10px} .brand-txt strong{font-size:11.5px;letter-spacing:.07em} .brand-txt small{font-size:8px;letter-spacing:.12em;margin-top:3px} .brand>div{display:block} /* l'ancienne règle de masquage ne s'applique plus */ } /* sous 560 px, le CTA d'en-tête pousserait le menu hors de l'écran : la barre supérieure porte déjà le téléphone et l'e-mail, et le menu mobile reprend tous les contacts. */ @media(max-width:560px){.header-contact{display:none}.burger{margin-left:auto}} @media(max-width:430px){.brand{gap:9px}.brandmark{height:32px}.brand-txt{padding-left:9px}.brand-txt strong{font-size:10.5px}.brand-txt small{font-size:7.5px;letter-spacing:.1em}} /* la signature complète (« … et services médicaux ») ne tient plus à côté du bouton Contactez-nous et du burger en dessous de 780 px : elle est masquée visuellement, le nom de la marque et la barre supérieure restant suffisants à cette largeur. Sans quoi la page défilait horizontalement sur les 87 pages du site. */ @media(max-width:780px){.brand-txt small{position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}} /* --- direction au pied de page */ .foot-direction{display:flex;flex-wrap:wrap;gap:26px 60px;margin-top:30px;padding-top:24px; border-top:1px solid rgba(169,190,197,.22)} .foot-dir-bloc h4{margin:0 0 10px;font:800 10px/1 Inter,-apple-system,sans-serif;letter-spacing:.2em; text-transform:uppercase;color:#e4c98f} .foot-dir-bloc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .foot-dir-bloc li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:12.5px;line-height:1.5} .foot-dir-bloc b{font-weight:600;color:#e7e3db} .foot-dir-bloc a{color:#a9bec5;font-variant-numeric:tabular-nums;white-space:nowrap} .foot-dir-bloc a:hover,.foot-dir-bloc a:focus-visible{color:#fff} @media(max-width:700px){.foot-direction{gap:22px 30px}.foot-dir-bloc li{display:flex;flex-direction:column;gap:2px}.foot-dir-bloc a{min-height:36px;display:flex;align-items:center}} /* --- profils officiels (LinkedIn, Facebook) sous la présentation du pied de page */ .footer-grid .foot-social{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px} .footer-grid .foot-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px; border:1px solid rgba(169,190,197,.35);border-radius:999px;color:#a9bec5;font-size:13px} .footer-grid .foot-social a:hover,.footer-grid .foot-social a:focus-visible{color:#fff;border-color:#e4c98f} .footer-grid .foot-social svg{flex:none} /* --- fil d'Ariane sur un Hero photographique Sur les Hero sombres posés sur une image, le fil d'Ariane s'affichait en blanc au-dessus de la photo. Il reste dans le code (utile au référencement et aux lecteurs d'écran) mais n'est plus visible. Les Hero clairs des autres pages le conservent tel quel. */ .subhero .pc-crumbs{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* --- Mot du Président (page Présentation) Bloc éditorial sobre : filet doré, citation en serif, signature alignée à droite. Aucun portrait : aucune photographie validée du Pr. Abdelmajid SAOURA n'est fournie. */ .mot-president{margin:54px 0;padding:38px 42px 34px;background:var(--brand-ivory,#f4efe7); border-left:3px solid var(--brand-gold,#d3ad6a)} .mot-president .mp-eyebrow{margin:0 0 10px;font:800 10px/1.2 Inter,-apple-system,"Segoe UI",sans-serif; letter-spacing:.22em;text-transform:uppercase;color:var(--brand-gold-deep,#7d5f24)} .mot-president h2{margin:0 0 22px!important;font-family:Georgia,"Times New Roman",serif; font-weight:400;font-size:clamp(25px,3vw,34px);line-height:1.15;letter-spacing:-.02em; color:var(--brand-navy,#061927)} .mot-president .mp-texte{margin:0;padding:0;border:0;quotes:none} .mot-president .mp-texte p{margin:0 0 15px;font-family:Georgia,"Times New Roman",serif; font-size:16.5px;line-height:1.72;color:var(--text-primary,#17313e)} .mot-president .mp-texte p:first-child:before{content:"« "} .mot-president .mp-texte p:last-child{margin-bottom:0} .mot-president .mp-texte p:last-child:after{content:" »"} .mot-president .mp-signature{display:flex;flex-direction:column;gap:2px;margin:26px 0 0; padding-top:20px;border-top:1px solid rgba(23,49,62,.14);text-align:right} .mot-president .mp-signature b{font:700 14px/1.3 Inter,-apple-system,"Segoe UI",sans-serif; letter-spacing:.04em;color:var(--brand-navy,#061927)} .mot-president .mp-signature span{font-size:12.5px;line-height:1.5;color:var(--text-secondary,#5a6e75)} @media(max-width:700px){ .mot-president{margin:40px 0;padding:28px 22px 26px} .mot-president .mp-texte p{font-size:15.5px;line-height:1.68} .mot-president .mp-signature{text-align:left} } /* --- Slideshow des deux structures (accueil) Les deux cartes conservent exactement leur traitement d'origine (photo pleine, dégradé, texte en surimpression) : seul le mode de présentation change. Piste à accrochage horizontal : sans JavaScript elle reste défilable et les onglets sont des ancres. Les dimensions des images sont fixées : aucun décalage à l'affichage. */ .struct-slider{margin-top:38px} .ss-track{list-style:none;display:flex;gap:22px;margin:0;padding:2px;overflow-x:auto; scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .ss-track::-webkit-scrollbar{display:none} .ss-track:focus-visible{outline:3px solid var(--brand-blue,#0b3047);outline-offset:3px} .ss-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0} .ss-slide .structure-card{height:100%;min-height:520px} /* la carte occupe maintenant toute la largeur : le dégradé doit remonter un peu plus haut pour que le texte en surimpression garde son contraste */ .ss-slide .structure-card:after{background:linear-gradient(180deg,rgba(3,20,31,.10) 10%,rgba(3,20,31,.46) 52%,rgba(3,20,31,.93) 100%)} .ss-slide .structure-info{max-width:780px} .ss-ctrl{display:flex;align-items:center;gap:14px;margin-top:20px} .ss-tabs{display:flex;flex-wrap:wrap;gap:8px;flex:1} .ss-tabs a{padding:11px 16px;border:1px solid var(--border-soft,#dbe1df);background:var(--brand-white,#fff); font:700 10.5px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.11em;text-transform:uppercase; color:var(--text-secondary,#5a6e75);transition:.22s ease} .ss-tabs a:hover{border-color:var(--brand-gold,#d3ad6a);color:var(--brand-navy,#061927)} .ss-tabs a[aria-current]{background:var(--brand-navy,#061927);border-color:var(--brand-navy,#061927);color:#fff} .ss-nav{flex:none;width:44px;height:44px;border:1px solid var(--border-soft,#dbe1df); background:var(--brand-white,#fff);color:var(--brand-navy,#061927);font-size:16px;cursor:pointer; transition:.22s ease} .ss-nav:hover{border-color:var(--brand-gold,#d3ad6a);background:var(--brand-ivory,#f4efe7)} @media(max-width:900px){.ss-track{gap:14px}} @media(max-width:560px){.ss-nav{display:none}.ss-tabs a{flex:1;text-align:center;font-size:9.5px;padding:11px 8px;letter-spacing:.06em}} @media(prefers-reduced-motion:reduce){.ss-track{scroll-behavior:auto}} /* --- Accentuation éditoriale (§19) Un à deux mots mis en valeur par bloc, jamais un paragraphe entier, et uniquement avec les couleurs de la charte. Sur fond sombre la même classe bascule vers le doré clair pour conserver le contraste. Aucune couleur écrite dans le HTML. */ .acc{font-style:normal;font-weight:inherit;color:var(--brand-accent,#2d7770)} .acc-or{font-style:normal;font-weight:inherit;color:var(--brand-gold-deep,#7d5f24)} .acc-navy{font-style:normal;font-weight:inherit;color:var(--brand-blue,#0b3047)} .pc-final .acc,.md-band-dark .acc,.pc-band--dark .acc,.darksec .acc,.contact .acc, .pc-final .acc-or,.md-band-dark .acc-or,.pc-band--dark .acc-or,.darksec .acc-or,.contact .acc-or, .pc-final .acc-navy,.md-band-dark .acc-navy,.pc-band--dark .acc-navy,.darksec .acc-navy,.contact .acc-navy, .subhero .acc,.pc-hero--patients .acc,.airsec .acc,.md-band-dark .acc-or, .airsec .acc-or,.airsec .acc-navy{color:var(--brand-gold-light,#e3c58a)} /* --- Bouton « Contactez-nous » de l'en-tête Le texte héritait de la couleur d'encre du menu et se retrouvait en bleu très sombre sur le fond navy du bouton : illisible. Il repasse en blanc, avec le doré au survol. */ .nav .navcta,.header .navcta{color:#fff} .nav .navcta:hover,.nav .navcta:focus-visible,.header .navcta:hover{color:var(--brand-gold-light,#e3c58a)} /* --- Accueil · « Une continuité de soins jusque dans les airs » Une seule photographie, pertinente pour le texte, qui occupe la hauteur de la colonne au lieu de deux vignettes de 210 px perdues dans un espace vide. */ .air-media--une{display:block;margin-top:0;height:100%;min-height:520px} .air-media--une img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center 40%; border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 70px rgba(0,0,0,.28)} .airsec .airgrid{align-items:stretch} @media(max-width:900px){.air-media--une,.air-media--une img{min-height:0;height:auto;aspect-ratio:4/3}} /* --- Accueil · formulaire de contact La grille du formulaire s'étirait à la hauteur de la colonne de gauche : chaque champ atteignait 140 px et le bouton autant. Les rangées reprennent leur hauteur naturelle. */ .contact form{align-content:start;align-items:start;gap:10px} .contact form input,.contact form select{height:50px;min-height:0} .contact form textarea{height:120px;min-height:0;resize:vertical} .contact form button,.contact form .btn{height:52px;min-height:0;align-self:start} /* les coordonnées passent sous le formulaire : les deux colonnes retrouvent un poids égal */ .contact-coord{margin-top:26px} .contact-coord .contactinfo{margin-top:0} .contact-coord .hero-actions{margin-top:18px} /* --- Menu principal : la rubrique en cours est signalée (elle ne l'était pas) */ .sectionnav a[aria-current="page"]{color:var(--brand-navy,#061927); box-shadow:inset 0 -2px 0 var(--brand-gold,#d3ad6a)} /* ------------------------------------------------------------------ lisibilité sur téléphone Boutons, étiquettes et petits textes descendaient à 8-10 px : plancher à 11 px (10,5 px pour les petits onglets et légendes serrés). Le préfixe body l'emporte sur les règles à deux classes des feuilles de style de page. */ @media(max-width:700px){ body a.btn,body button.btn{font-size:11.5px} body .eyebrow,body .hero-kicker,body .caption,body .act-cat,body time,body .top-dispo, body .footer-grid h3,body .foot-direction h4,body .footer .credits,body .top-tel a,body .top-mail a, body .pc-contact small,body .md-place small,body figcaption small,body .ck-profil-liens a, body .md-place-actions a,body .pc-others b,body .health-points span,body .maps-links a, body .ev-figure small,body .structure-info small,body .xlinks b,body .breadcrumbs, body .value small,body .qcard b{font-size:11px} body .metric small,body .pillrow span,body .ss-tabs a{font-size:10.5px} body .hero-meta small{font-size:10px} body figure figcaption small,body figcaption small{font-size:10.5px} body .ticker{font-size:10.5px} body .ticker span{font-size:inherit} } /* téléphone : le menu ouvert s'arrête au-dessus de la barre WhatsApp / Assistant (52 px) */ @media(max-width:700px){ .mobilenav{max-height:calc(100vh - 205px);max-height:calc(100dvh - 205px)} } /* très petits écrans (≤380 px) : le menu burger ne doit jamais sortir de l'écran */ @media(max-width:380px){ .nav{gap:8px} .brand{gap:7px} .brandmark{height:28px} .brand-txt{padding-left:7px} .brand-txt strong{font-size:9.5px;letter-spacing:.04em} } /* ------------------------------------------------------------------ clavier et zones tactiles (audit pré-lancement) - Au-delà de 1100 px le menu burger n'existe pas : sa case à cocher masquée ne doit plus être un arrêt de Tab. - Zones tactiles d'au moins 24 px de haut (WCAG 2.5.8) pour la barre du haut, le pied de page et les points des carrousels : l'aspect visuel ne change pas, seule la surface cliquable grandit. */ @media(min-width:1101px){.navtoggle{display:none}} .top a{display:inline-flex;align-items:center;min-height:24px} .footer-legal a,.foot-dir-bloc a,.footer li>a{display:inline-flex;align-items:center;min-height:24px} .dot,.tour-dot{position:relative} .dot::after,.tour-dot::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px} .pc-panel .pc-tel{min-height:24px;line-height:24px} /* carte-bouton « 2ᵉ avis médical » de l'accueil : titre et texte en (un