/* ═══════════════════════════════════════════════════════════════════════════ LA MARQUE LOC'AIR — LE MINIMUM VITAL ═══════════════════════════════════════════════════════════════════════════ Ce fichier ne met RIEN en page. Il donne les deux polices de la maison, les couleurs de la charte et la goutte du logo. Rien d'autre. Il existe pour les pages qui ont déjà leur propre mise en page — les pages légales, la 404, la prolongation, le retard. Leur faire charger locair.css en entier casserait tout : leurs noms de classe (.logo, .card, .btn, .nav) existent aussi là-bas, avec d'autres règles. Elles chargent donc ce fichier-ci, et ne font qu'y lire les bonnes valeurs. La référence écrite est MARQUE.md. Les valeurs sont exactement celles de locair.css : si l'une bouge, l'autre bouge. ═══════════════════════════════════════════════════════════════════════════ */ /* ── LES POLICES ────────────────────────────────────────────────────────── Bricolage Grotesque est hébergée chez nous et coupée en deux fichiers : la page ne télécharge que le jeu de signes dont elle a besoin, et si Google Fonts tombe, les titres tiennent quand même. DM Sans vient de Google Fonts, appelée par chaque page. */ @font-face{ font-family:'Bricolage'; src:url('/polices/bricolage-latin.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Bricolage'; src:url('/polices/bricolage-latin-ext.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── LES JETONS ─────────────────────────────────────────────────────────── Contrastes mesurés, pour mémoire (norme : 4,5 pour du texte) : --ink sur blanc 16,59 · sur brume 15,46 --ink-2 sur blanc 5,71 --ink-3 alias de --ink-2 (un seul gris secondaire) --vif sur blanc 6,16 --gold sur marine 6,86 · SUR BLANC 2,42 → interdit --gold-txt sur blanc 5,80 · sur brume 5,36 --green sur blanc 5,42 blanc sur marine 16,59 · sur sarcelle 6,16 */ :root{ --ink:#0E1F35; /* le marine : textes, écrans sombres */ --ink-2:#57687C; /* texte secondaire */ --ink-3:var(--ink-2); /* alias : deux gris a 8 points d'ecart, personne ne les distinguait */ --vif:#086E60; /* le sarcelle : LA couleur d'action */ --vif-d:#065A4E; /* le sarcelle au survol */ --vif-clair:#E7F3F0; /* le sarcelle en fond très pâle */ --gold:#C9A227; /* l'accent — SUR FOND SOMBRE UNIQUEMENT */ --gold-txt:#7A6313; /* le même or, assombri pour fond clair */ --paper:#FFFFFF; --mist:#F5F7FA; /* le gris très pâle des fonds alternés */ --line:#E6EBF1; /* filets et bordures */ --green:#0F7A3D; /* réservé aux confirmations */ --alerte:#B8860B; /* réservé aux avertissements */ --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-titre:'Bricolage', var(--font); } /* ── LA GOUTTE ──────────────────────────────────────────────────────────── L'apostrophe de Loc'Air n'est pas une apostrophe : c'est une goutte d'eau. Trois coins ronds, un coin vif, penchée à -25° — la pointe part vers le bas-gauche, exactement le geste d'une apostrophe. C'est la seule signature graphique de la marque. Deux ors, et ce n'est pas une erreur : sur fond clair la goutte prend l'or foncé, sinon elle serait illisible (2,42 contre 5,80). */ .gt{position:relative;color:transparent;margin:0 .06em} .gt::before{ content:"";position:absolute;left:50%;top:.21em; width:.30em;height:.30em;margin-left:-.15em; background:var(--gold-txt); border-radius:50% 50% 50% 0;transform:rotate(-25deg); } .sur-fonce .gt::before{background:var(--gold)} /* ── LE PASSAGE D'UNE PAGE A L'AUTRE ── Meme regle que locair.css, pour que le fondu marche aussi quand on part du site vers les CGV, la confidentialite ou le paiement. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-part .14s var(--mv,cubic-bezier(.32,.72,.28,1)) both} ::view-transition-new(root){animation:vt-vient .24s var(--mv,cubic-bezier(.32,.72,.28,1)) both} @keyframes vt-part {to {opacity:0}} @keyframes vt-vient{from{opacity:0}} a.nav-logo{view-transition-name:logo} ::view-transition-group(logo){animation-duration:.42s;animation-timing-function:var(--mv,cubic-bezier(.32,.72,.28,1))} @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} a.nav-logo{view-transition-name:none} } /* ── LES LIENS QUI PARTENT AILLEURS ── Meme repere que sur le site. Ces pages sont en francais uniquement, donc le texte cache est en francais, pose dans chaque page. */ a[target="_blank"]:not(.btn)::after{ content:"\00A0\2197" / ""; font-size:.82em;line-height:1;opacity:.55;margin-left:.12em; } a[target="_blank"]:hover::after, a[target="_blank"]:focus-visible::after{opacity:.9} /* Texte reserve au lecteur d'ecran : invisible a l'oeil, lu a voix haute. */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ── SUR PAPIER ── Les CGV, les mentions legales et la confidentialite sont les pages qu'on imprime vraiment — pour les garder, les faire relire, les joindre a un dossier. Sur papier elles sortaient avec la barre de navigation, un bouton « retour au site » qui ne mene nulle part, un fond gris qui mange l'encre, et des liens dont on ne voyait pas l'adresse. */ @media print{ @page{margin:16mm} /* Ce qui ne sert a rien sur du papier. */ .nav,.nav-btn,.cook,.cookies,.haut,.menu,.menu-fond,.sr-only, [role="dialog"],[hidden]{display:none !important} /* Encre economisee, texte plus noir : sur papier le gris pale est nettement moins lisible qu'a l'ecran. */ html,body{background:#fff !important;color:#000 !important} body{font-size:10.5pt;line-height:1.5} /* L'adresse d'un lien externe s'imprime : sur papier, un mot souligne ne mene nulle part. Remplace la fleche ↗, qui n'a plus de sens une fois imprimee. */ a[href^="http"]::after, a[target="_blank"]::after{ /* !important : la fleche ↗ est posee par un selecteur plus fort (a[target="_blank"]:not(.btn)) et gagnait sur cette regle. */ content:" (" attr(href) ")" / "" !important; font-size:.85em;opacity:1;word-break:break-all; } a[href^="#"]::after,a[href^="/"]::after,a[href^="mailto"]::after, a[href^="tel"]::after{content:"" !important} a{color:#000 !important;text-decoration:underline} /* Rien ne se coupe la ou ca ferait mal : un titre seul en bas de page, un tableau coupe en deux, une clause a cheval. */ h1,h2,h3{break-after:avoid;page-break-after:avoid} h1,h2,h3,li,tr,figure,table{break-inside:avoid;page-break-inside:avoid} p{orphans:3;widows:3} /* Le tableau des tarifs garde ses traits, sans son aplat sombre. */ thead th{background:#fff !important;color:#000 !important; border-bottom:2px solid #000} table,th,td{border-color:#999 !important} }