/* CSS critique : injecte inline dans le par le build. Contient strictement ce qui est visible sans defilement (en-tete + hero) afin que le premier rendu n'attende aucune requete reseau. Tout ce qui est ici est aussi present dans main.css. */ :root { /* Reprise de l'enseigne : rouge et jaune du logo (struct/header.png). */ --primaire: #b42323; --primaire-clair: #d4574a; --accent: #e6a239; --sable: #fdf6ec; --encre: #23282a; --gris: #5d6668; --blanc: #fff; --rayon: 6px; --largeur: 68rem; --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--police); font-size: 1rem; line-height: 1.6; color: var(--encre); background: var(--blanc); -webkit-text-size-adjust: 100%; } img { max-width: 100%; height: auto; display: block; } .container { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 1.25rem; } .skip-link { position: absolute; left: -9999px; background: var(--primaire); color: var(--blanc); padding: .75rem 1rem; z-index: 100; } .skip-link:focus { left: 0; top: 0; } .site-header { /* Fond rouge identique au #b42323 du logo : le PNG se fond dans l'en-tete, seul le lettrage « LE RIO » reste visible, comme s'il etait detoure. */ background: var(--primaire); color: var(--blanc); /* Le liseré jaune rappelle les bandes de l'enseigne d'origine. */ border-bottom: 4px solid var(--accent); position: sticky; top: 0; z-index: 50; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; /* wrap : une fois deplie, le menu mobile passe sous le logo au lieu de s'inserer a cote de lui. */ flex-wrap: wrap; gap: 1rem; min-height: 4rem; } .logo { text-decoration: none; color: inherit; display: flex; align-items: center; gap: .625rem; } .logo__img { width: 95px; height: 44px; } .logo__tagline { display: none; /* trop serre a cote du logo sur petit ecran */ font-size: .75rem; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; padding-left: .625rem; border-left: 2px solid rgba(255, 255, 255, .35); } @media (min-width: 30rem) { .logo__tagline { display: block; } } .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 2px solid var(--accent); border-radius: var(--rayon); padding: .5rem .75rem; font: inherit; font-size: .875rem; font-weight: 600; color: var(--blanc); cursor: pointer; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 1.1rem; height: 2px; background: var(--accent); position: relative; } .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; } .nav-toggle__bar::before { top: -6px; } .nav-toggle__bar::after { top: 6px; } .nav { display: none; } .nav.is-open { display: block; width: 100%; } .hero { position: relative; background: var(--sable); } .hero__media img { width: 100%; height: clamp(14rem, 42vw, 26rem); object-fit: cover; } .hero__inner { padding-block: 2rem 2.5rem; } .hero__title { margin: 0 0 .5rem; font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.15; color: var(--primaire); } .hero__subtitle { margin: 0 0 1.5rem; font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--gris); max-width: 42ch; } .btn { display: inline-block; padding: .7rem 1.25rem; border-radius: var(--rayon); text-decoration: none; font-weight: 700; font-size: .95rem; border: 2px solid transparent; } /* L'appel a l'action principal passe en jaune : c'est la couleur la plus saillante de la charte, et le texte encre sur jaune tient largement le contraste AA (6,8:1), ce que du blanc sur jaune n'aurait pas fait. */ .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--encre); } .btn--primary:hover { background: #f0b352; border-color: #f0b352; } .btn--ghost { background: transparent; color: var(--primaire); border-color: var(--primaire); } @media (min-width: 48rem) { .nav-toggle { display: none; } .nav { display: flex; align-items: center; gap: 1.5rem; } .hero__inner { position: absolute; inset-inline: 0; bottom: 0; padding-block: 2rem; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); } .hero__title, .hero__subtitle { color: var(--blanc); } /* Sur le degrade sombre du hero, le bouton secondaire doit virer au blanc : le rouge de la charte y serait illisible. */ .hero .btn--ghost { color: var(--blanc); border-color: var(--blanc); } } /* Styles non critiques : tout ce qui se trouve sous la ligne de flottaison. Le build concatene critical.css + ce fichier pour produire main..css, il n'y a donc aucune duplication a maintenir entre les deux. */ /* ---------- Navigation ---------------------------------------------------- */ .nav__list, .lang-switch { list-style: none; margin: 0; padding: 0; } .nav__list { display: flex; flex-direction: column; gap: .25rem; padding-block: .75rem; } /* La navigation vit desormais sur le fond rouge de l'en-tete : le texte passe en blanc, et le jaune sert de marqueur (survol, page courante). On evite le jaune en couleur de texte a cette taille — il ne donne que 3:1 sur le rouge. */ .nav__link { display: block; padding: .6rem .25rem; text-decoration: none; color: var(--blanc); font-size: .95rem; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .15); } .nav__link:hover, .nav__link:focus-visible { color: var(--accent); } .nav__link.is-current { color: var(--blanc); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); } .lang-switch { display: flex; gap: .5rem; padding-block: .75rem 1rem; } .lang-switch a { display: inline-block; padding: .25rem .5rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--rayon); text-decoration: none; color: var(--blanc); font-size: .75rem; font-weight: 600; letter-spacing: .05em; } .lang-switch a.is-current { background: var(--accent); border-color: var(--accent); color: var(--encre); } @media (min-width: 48rem) { .nav__list { flex-direction: row; gap: 1.25rem; padding-block: 0; flex-wrap: wrap; } .nav__link { border-bottom: 0; padding: .25rem 0; } .lang-switch { padding-block: 0; } } /* ---------- Titre de page ------------------------------------------------- */ .page-head { background: var(--sable); border-bottom: 4px solid var(--accent); padding-block: 2.5rem; margin-bottom: 2rem; } .page-head__title { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.25rem); color: var(--primaire); line-height: 1.2; } .page-head__intro { margin: .75rem 0 0; color: var(--gris); max-width: 60ch; } /* ---------- Sections et texte -------------------------------------------- */ .section { padding-block: 2rem; } .section__title { margin: 0 0 1rem; padding-bottom: .5rem; font-size: clamp(1.25rem, 3.5vw, 1.6rem); color: var(--primaire); line-height: 1.25; /* Soulignement partiel jaune : rappel de l'enseigne sur chaque titre. */ background-image: linear-gradient(var(--accent), var(--accent)); background-size: 2.5rem 4px; background-position: 0 100%; background-repeat: no-repeat; } /* Ancres de destination des redirections 301 : sans ce decalage, le titre vise passe sous l'en-tete collante. */ .section--anchored { scroll-margin-top: 5rem; } .prose { max-width: 68ch; } .prose p { margin: 0 0 1rem; } .prose a { color: var(--primaire); text-underline-offset: .15em; } .prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; } .prose li { margin-bottom: .35rem; } .prose h2, .prose h3 { color: var(--primaire); line-height: 1.25; } /* ---------- Cartes -------------------------------------------------------- */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } } .card { border: 1px solid rgba(0, 0, 0, .1); border-top: 4px solid var(--accent); border-radius: var(--rayon); overflow: hidden; background: var(--blanc); display: flex; flex-direction: column; } .card__media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .card__body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .card__title { margin: 0; font-size: 1.1rem; color: var(--primaire); } .card__text { margin: 0; color: var(--gris); font-size: .95rem; flex: 1; } .card__link { color: var(--primaire); font-weight: 600; font-size: .95rem; text-decoration: none; } .card__link:hover { text-decoration: underline; } .card__link::after { content: " \2192"; } /* ---------- Tableaux de tarifs -------------------------------------------- */ .table-intro { margin: 0 0 1rem; color: var(--gris); max-width: 60ch; } /* Le tableau defile dans son propre conteneur : le corps de page ne doit jamais defiler horizontalement sur mobile. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--rayon); } .table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 28rem; } .table caption { caption-side: top; text-align: left; padding: .75rem 1rem; font-weight: 700; color: var(--encre); background: var(--accent); } .table th, .table td { padding: .6rem 1rem; text-align: left; border-top: 1px solid rgba(0, 0, 0, .08); } .table thead th { background: var(--sable); border-top: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); } .table tbody th { font-weight: 500; } .table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); } /* ---------- Documents (PDF deposes depuis l'admin) ------------------------ */ .doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .doclist__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .85rem 1rem; border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--rayon); text-decoration: none; color: var(--encre); font-weight: 600; } .doclist__link { border-left: 4px solid var(--accent); } .doclist__link:hover { border-color: var(--primaire); border-left-color: var(--accent); color: var(--primaire); } .doclist__meta { font-weight: 400; font-size: .8rem; color: var(--gris); } /* ---------- Galerie ------------------------------------------------------- */ .gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); } /* ---------- Formulaire ---------------------------------------------------- */ .form { max-width: 40rem; } .form__row { margin-bottom: 1rem; } .form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; } .form input[type="text"], .form input[type="email"], .form textarea { width: 100%; padding: .65rem .75rem; border: 1px solid #bbb; border-radius: var(--rayon); font: inherit; font-size: 1rem; /* 16 px minimum : en dessous, iOS zoome au focus */ background: var(--blanc); } .form input:focus-visible, .form textarea:focus-visible { border-color: var(--primaire); } .form textarea { resize: vertical; min-height: 9rem; } /* Piege a robots : retire du flux, du calque d'accessibilite et de la tabulation. Ne jamais utiliser display:none, que certains robots detectent. */ .form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__legal { font-size: .85rem; color: var(--gris); } .form__legal p { margin: 0 0 .75rem; } /* ---------- Pied de page -------------------------------------------------- */ .site-footer { margin-top: 3rem; background: var(--primaire); border-top: 4px solid var(--accent); color: rgba(255, 255, 255, .9); padding-block: 2rem; } .site-footer__inner { display: grid; gap: 1.5rem; } @media (min-width: 40rem) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .site-footer__name { margin: 0 0 .5rem; font-weight: 700; color: var(--blanc); } .site-footer address { font-style: normal; font-size: .95rem; line-height: 1.8; } .site-footer a { color: var(--blanc); } .site-footer__legal { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .75); } /* ---------- Accessibilite ------------------------------------------------- */ :focus-visible { outline: 3px solid var(--primaire-clair); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }