/* ========================================================= CM Création — feuille de style Trois univers : · portail (accueil, entreprise, témoignages, contact) · pro body.univers-pro — institutionnel, anguleux · mariage body.univers-mariage — manuscrit, arrondi Les polices sont chargées page par page (voir ). ========================================================= */ :root{ --police-titre: 'Bricolage Grotesque', system-ui, sans-serif; --police-texte: 'Figtree', system-ui, -apple-system, sans-serif; --police-accent: 'Caveat', cursive; --police-mono: 'Space Mono', monospace; --titre-poids: 800; --titre-inter: -.02em; --encre: #16103A; --encre-doux: #55507C; --blanc: #FFFFFF; --brume: #EDF9F4; --trait: #CFEBE2; --soleil: #FFC42E; --framboise: #C75B65; --lagon: #12A18E; --lilas: #6C4DF6; --accent: var(--lagon); --lueur: linear-gradient(100deg,#FFC42E 0%,#12A18E 45%,#0E7C8C 100%); --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-btn: 999px; --cadre-rot: -1.7deg; --cadre-dec: 12px; --pad: clamp(1.25rem, 5vw, 4rem); --max: 1180px; --ombre: 0 18px 50px -24px rgba(22,16,58,.35); } /* ========================================================= UNIVERS PROFESSIONNELS — institutionnel Archivo + Inter · angles droits · bleus sobres ========================================================= */ body.univers-pro{ --police-titre: 'Archivo', system-ui, sans-serif; --police-texte: 'Inter', system-ui, -apple-system, sans-serif; --police-accent: 'Archivo', sans-serif; --titre-poids: 700; --titre-inter: -.025em; --bleu: #0B859D; --azur: #22A9BE; --acier: #5E8794; --marine: #063A4B; --glace: #EAF6F8; --accent: var(--bleu); --encre: #063A4B; --encre-doux: #47737F; --brume: #EAF6F8; --trait: #C6E2E9; --lueur: linear-gradient(100deg,#22A9BE 0%,#0B859D 55%,#063A4B 100%); --r-s: 3px; --r-m: 4px; --r-l: 6px; --r-btn: 4px; --cadre-rot: 0deg; --cadre-dec: 16px; } /* ========================================================= UNIVERS FUTURS MARIÉS — manuscrit et doux Fraunces + Nunito Sans + Caveat · angles ronds · roses pâles ========================================================= */ body.univers-mariage{ --police-titre: 'Fraunces', Georgia, serif; --police-texte: 'Nunito Sans', system-ui, sans-serif; --police-accent: 'Caveat', cursive; --titre-poids: 600; --titre-inter: -.015em; --rose: #C75B65; --rose-2: #E09E8C; --poudre: #F5D8C6; --mauve: #BE8C7A; --peche: #E8A87C; --prune: #41171A; --accent: var(--rose); --encre: #3A1316; --encre-doux: #8A6258; --brume: #FDF1EA; --trait: #F0DACB; --lueur: linear-gradient(100deg,#FDF1EA 0%,#E09E8C 45%,#C75B65 100%); --r-s: 16px; --r-m: 26px; --r-l: 34px; --r-btn: 999px; --cadre-rot: -2.6deg; --cadre-dec: 14px; } /* ========================================================= BASE ========================================================= */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--police-texte); font-size:clamp(1rem,.97rem + .2vw,1.09rem); line-height:1.65; color:var(--encre); background:var(--blanc); -webkit-font-smoothing:antialiased; } body.univers-mariage{line-height:1.72} img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{ font-family:var(--police-titre); font-weight:var(--titre-poids); line-height:1.05; letter-spacing:var(--titre-inter); margin:0 0 .5em; text-wrap:balance; } body.univers-mariage h1, body.univers-mariage h2{line-height:1.14;font-variation-settings:'SOFT' 40,'WONK' 1} h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem)} h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,2.9rem)} h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem)} h4{font-size:1.1rem;font-weight:600} p{margin:0 0 1.1em;max-width:68ch} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .section{padding-block:clamp(3.5rem,8vw,7rem)} .section--brume{background:var(--brume)} .section--encre{background:var(--encre);color:#F3F1FF} .section--encre h2,.section--encre h3{color:#fff} body.univers-pro .section--encre{background:var(--marine)} body.univers-mariage .section--encre{background:var(--prune)} .section--soleil{background:#FFF6DE} .section--rose{background:#FDF2F1} .section--lagon{background:#E3F5EE} .section--lilas{background:#EDF9F4} .section--azur{background:#EAF6F8} .section--filet{border-top:5px solid var(--accent)} body.univers-pro .section--filet{border-top-width:3px} /* --- accents manuscrits --- */ .griffe{ font-family:var(--police-accent);font-weight:700;font-size:1.7rem; color:var(--accent);display:block;margin-bottom:.25rem;line-height:1;letter-spacing:0; } body.univers-pro .griffe{ font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem; } .section--encre .griffe{color:var(--soleil)} body.univers-mariage .section--encre .griffe{color:var(--poudre)} .heros h1 em{ font-style:normal;font-family:var(--police-accent);font-weight:700; font-size:1.26em;line-height:.92;letter-spacing:0;display:inline-block; } body.univers-pro .heros h1 em{ font-family:var(--police-titre);font-size:1em;font-weight:700; background:var(--lueur);-webkit-background-clip:text;background-clip:text;color:transparent; line-height:1.18;padding-top:.1em;display:inline; } .lede{font-size:clamp(1.08rem,1rem + .5vw,1.35rem);color:var(--encre-doux);max-width:60ch} /* --- boutons --- */ .btn{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--police-texte);font-weight:600;font-size:1rem; padding:.85rem 1.5rem;border-radius:var(--r-btn);border:2px solid transparent; text-decoration:none;cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } body.univers-pro .btn{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;padding:.95rem 1.7rem} .btn:hover{transform:translateY(-2px)} body.univers-pro .btn:hover{transform:none} .btn--plein{background:var(--encre);color:#fff} body.univers-pro .btn--plein{background:var(--bleu)} body.univers-pro .btn--plein:hover{background:var(--marine)} body.univers-mariage .btn--plein{background:var(--rose)} .btn--accent{background:var(--accent);color:#fff} .btn--ligne{border-color:currentColor;color:var(--encre)} .btn--ligne:hover{background:var(--encre);color:#fff;border-color:var(--encre)} .btn--clair{background:#fff;color:var(--encre)} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} /* --- cadre décalé --- */ .cadre{position:relative;display:block;border-radius:var(--r-l)} .cadre::before{ content:'';position:absolute;inset:0;border-radius:var(--r-l); background:var(--cadre-couleur,var(--accent)); transform:rotate(var(--cadre-rot)) translate(var(--cadre-dec),var(--cadre-dec)); transition:transform .45s cubic-bezier(.2,.8,.2,1); } .cadre > *{position:relative;border-radius:var(--r-l);overflow:hidden;display:block} .cadre:hover::before,.cadre:focus-within::before{transform:rotate(0) translate(0,0)} body.univers-pro .cadre::before{background:none;border:2px solid var(--cadre-couleur,var(--bleu))} /* --- en-tête --- */ .entete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--trait)} body.univers-pro .entete{border-bottom:2px solid var(--bleu)} .entete__in{display:flex;align-items:center;gap:1rem;min-height:74px} .marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:700} .marque img{width:42px;height:42px;object-fit:contain} .marque span{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:1.12rem;letter-spacing:-.02em} .marque small{display:block;font-family:var(--police-mono);font-size:.6rem;letter-spacing:.12em;color:var(--encre-doux);font-weight:400;text-transform:uppercase} .nav{margin-left:auto;display:flex;align-items:center;gap:.35rem} .nav a{text-decoration:none;font-weight:500;font-size:.97rem;padding:.5rem .8rem;border-radius:var(--r-btn);transition:background .15s,color .15s} .nav a:hover{background:var(--brume)} .nav a[aria-current="page"]{color:var(--accent);font-weight:700} .nav .btn{margin-left:.5rem;padding:.6rem 1.15rem;font-size:.88rem} .burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--encre)} .burger svg{width:28px;height:28px} @media (max-width:940px){ .burger{display:block} .nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:.15rem; background:#fff;padding:1rem var(--pad) 2rem;border-bottom:1px solid var(--trait);box-shadow:var(--ombre);display:none} .nav.ouvert{display:flex} .nav a{padding:.85rem .6rem;font-size:1.05rem} .nav .btn{margin:.6rem 0 0;justify-content:center} } /* --- héros --- */ .heros{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem) clamp(3rem,7vw,5rem)} .heros__lueur{position:absolute;z-index:0;pointer-events:none;width:min(70vw,760px);aspect-ratio:1;border-radius:50%; background:var(--lueur);filter:blur(90px);opacity:.28;top:-22%;right:-12%;animation:derive 22s ease-in-out infinite alternate} body.univers-pro .heros__lueur{border-radius:0;filter:blur(130px);opacity:.13;animation:none;width:min(60vw,640px);height:360px;aspect-ratio:auto;top:-4%;right:-4%} body.univers-mariage .heros__lueur{opacity:.55} @keyframes derive{to{transform:translate(-8%,10%) scale(1.15)}} .heros__in{position:relative;z-index:1} .heros__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media (max-width:860px){.heros__grid{grid-template-columns:1fr}} /* --- grilles --- */ .grille{display:grid;gap:clamp(1.25rem,3vw,2rem)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}} /* --- portes d'entrée --- */ .porte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:1.75rem; border-radius:var(--r-l);text-decoration:none;color:#fff;overflow:hidden;isolation:isolate;transition:transform .3s ease} .porte:hover{transform:translateY(-6px)} .porte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease} .porte:hover img{transform:scale(1.05)} .porte::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,16,58,.15) 20%,var(--voile,rgba(22,16,58,.9)) 100%)} .porte h3{margin-bottom:.35rem;color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)} .porte p{color:rgba(255,255,255,.9);margin:0;max-width:38ch;font-size:.98rem} .porte .fleche{margin-top:1rem;font-weight:700;display:inline-flex;gap:.4rem;align-items:center} .porte:hover .fleche{gap:.75rem;transition:gap .2s} /* portes typées : chacune montre la typo de son univers */ .porte--pro{border-radius:6px} .porte--pro h3{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.03em} .porte--pro p{font-family:'Inter',sans-serif} .porte--pro .fleche{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600} .porte--mariage{border-radius:34px} .porte--mariage h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;font-variation-settings:'SOFT' 40,'WONK' 1} .porte--mariage p{font-family:'Nunito Sans',sans-serif} .porte--mariage .fleche{font-family:'Caveat',cursive;font-size:1.6rem;font-weight:700} .porte--simple{min-height:190px} .porte--simple h3{font-size:1.5rem} /* --- cartes --- */ .carte{background:#fff;border:1px solid var(--trait);border-radius:var(--r-m);padding:1.6rem;height:100%} body.univers-pro .carte{border-top:3px solid var(--accent)} .carte h3{font-size:1.25rem} .carte p:last-child{margin-bottom:0} .carte__puce{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center; background:var(--accent);color:#fff;font-family:var(--police-mono);font-weight:700;margin-bottom:1rem} body.univers-mariage .carte__puce{border-radius:50%;font-family:var(--police-accent);font-size:1.5rem} /* --- pastilles --- */ .pastilles{display:flex;gap:.4rem;margin-bottom:1.2rem} .pastilles i{width:14px;height:14px;border-radius:50%;display:block} /* --- galerie vidéos --- */ .videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem} .video{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;gap:.7rem} .video--vitrine{margin:0;cursor:default} .video__vign{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/9;background:var(--brume)} .video__vign img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .video:hover .video__vign img{transform:scale(1.06)} .video--vitrine .video__vign img{transition:none} .video__play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(22,16,58,0) 40%,rgba(22,16,58,.55))} .video__play svg{width:52px;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))} .video__duree{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--police-mono);font-size:.72rem; background:rgba(22,16,58,.8);color:#fff;padding:.2rem .45rem;border-radius:4px} .video__titre{font-weight:600;font-size:1rem;line-height:1.35} body.univers-mariage .video__titre{font-size:1.06rem} /* --- lecteur --- */ .modale{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(12,8,30,.92);padding:var(--pad)} .modale.ouvert{display:grid} .modale__boite{width:min(1000px,100%);aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:#000} .modale__boite iframe{width:100%;height:100%;border:0} .modale__fermer{position:absolute;top:1.2rem;right:1.2rem;background:#fff;color:#16103A;border:0;width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer} /* --- tarifs --- */ .tarif{background:#fff;border:2px solid var(--trait);border-radius:var(--r-l);padding:1.9rem;display:flex;flex-direction:column;height:100%} .tarif--vedette{border-color:var(--accent);box-shadow:var(--ombre)} body.univers-mariage .tarif--vedette{background:#FEF6F0} .tarif__eti{font-family:var(--police-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; background:var(--accent);color:#fff;padding:.25rem .6rem;border-radius:999px;align-self:flex-start;margin-bottom:.9rem} .tarif__prix{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:2.6rem;line-height:1;margin:.4rem 0} .tarif__prix small{font-size:.9rem;font-weight:400;font-family:var(--police-texte);color:var(--encre-doux);display:block;margin-top:.35rem} .liste{list-style:none;padding:0;margin:1.1rem 0} .liste li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.98rem} .liste li::before{content:'';position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)} body.univers-pro .liste li::before{border-radius:0;width:.6rem;height:.6rem;top:.6em} /* --- presse --- */ .presse{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .presse a{display:flex;gap:1rem;align-items:baseline;text-decoration:none;padding:1rem 1.2rem;border-radius:var(--r-s); background:#fff;border:1px solid var(--trait);transition:border-color .2s,transform .2s} .presse a:hover{border-color:var(--accent);transform:translateX(4px)} .presse time{font-family:var(--police-mono);font-size:.75rem;color:var(--encre-doux);white-space:nowrap} /* --- FAQ --- */ .faq details{border-bottom:1px solid var(--trait);padding:1.15rem 0} .faq summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-family:var(--police-mono);font-size:1.4rem;color:var(--accent)} .faq details[open] summary::after{content:'–'} .faq details p{margin:.9rem 0 0;color:var(--encre-doux)} /* --- formulaire --- */ .form{display:grid;gap:1rem} .champ{display:grid;gap:.4rem} .champ label{font-weight:600;font-size:.92rem} .champ input,.champ select,.champ textarea{font:inherit;font-size:1rem;padding:.8rem 1rem;border:2px solid var(--trait); border-radius:var(--r-s);background:#fff;color:var(--encre);transition:border-color .18s} .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--accent)} .champ textarea{min-height:140px;resize:vertical} .form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media (max-width:600px){.form__duo{grid-template-columns:1fr}} .form__note{font-size:.82rem;color:var(--encre-doux)} /* --- contact direct --- */ .direct{display:grid;gap:1rem} .direct a{display:flex;gap:1rem;align-items:center;text-decoration:none;font-weight:600;padding:1.1rem 1.3rem; border-radius:var(--r-m);background:#fff;border:1px solid var(--trait);transition:border-color .2s,transform .2s} .direct a:hover{border-color:var(--accent);transform:translateY(-2px)} .direct .ic{width:42px;height:42px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--brume);flex:none} .direct span small{display:block;font-weight:400;color:var(--encre-doux);font-size:.82rem} /* --- widgets d'avis --- */ .widget{border:2px dashed var(--trait);border-radius:var(--r-l);padding:1.5rem;background:#fff;min-height:220px} .widget__vide{display:grid;place-items:center;text-align:center;gap:.6rem;min-height:190px;color:var(--encre-doux);font-size:.92rem} .widget__vide b{font-family:var(--police-accent);font-size:1.6rem;color:var(--accent);font-weight:700} .widget__tete{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem} .widget__tete h3{margin:0;font-size:1.2rem} .widget__tete .rond{width:44px;height:44px;border-radius:var(--r-s);flex:none;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.2rem} /* --- bannière d'accueil --- */ .banniere{position:relative;min-height:min(76vh,620px);display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff} .banniere__fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .banniere::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,8,28,.5),rgba(11,8,28,.8))} .banniere h1{color:#fff;margin-bottom:.25em} .banniere .soustitre{font-family:var(--police-titre);font-weight:600;font-size:clamp(1.15rem,.95rem + 1.2vw,1.8rem);margin:0 0 .5em;color:#fff} .banniere .lieu{font-family:var(--police-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0} .banniere .wrap{position:relative;z-index:1;padding-block:clamp(4rem,10vw,6rem)} /* --- divers --- */ .ariane{font-size:.85rem;color:var(--encre-doux);padding-top:1.5rem} .ariane a{text-decoration:none} .ariane a:hover{text-decoration:underline} .centre{text-align:center;margin-inline:auto} .centre p{margin-inline:auto} .evite{position:absolute;left:-9999px} .evite:focus{left:1rem;top:1rem;z-index:200;background:#fff;padding:.75rem 1.25rem;border-radius:999px} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} .pied{background:var(--encre);color:#BFD9D1;padding-block:clamp(3rem,6vw,4.5rem) 2rem} body.univers-pro .pied{background:var(--marine);color:#B3D3DC} body.univers-mariage .pied{background:var(--prune);color:#EFD0BE} .pied a{color:#fff;text-decoration:none} .pied a:hover{text-decoration:underline} .pied__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem} @media (max-width:780px){.pied__grid{grid-template-columns:1fr}} .pied__titre{color:#fff;font-family:var(--police-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:1rem} .pied ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.95rem} .pied__bas{border-top:1px solid rgba(255,255,255,.15);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.85rem} .reseaux{display:flex;gap:.6rem;margin-top:1.2rem} .reseaux a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .2s} .reseaux a:hover{background:var(--accent)} .reseaux svg{width:19px;height:19px;fill:#fff} .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.vu{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* --- variantes de teinte (entreprise, témoignages) --- */ body.teinte-soleil{--accent:#D99400;--brume:#FFF7E4;--trait:#F1E1BC} body.teinte-lilas{--accent:#0E8C7B;--brume:#EDF9F4;--trait:#CBE8DE} /* --- bascules typographiques ponctuelles (page d'accueil) --- */ .en-pro{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.035em;text-transform:uppercase;display:block} .en-mariage{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.01em;font-variation-settings:'SOFT' 60,'WONK' 1;display:block;font-size:.62em;opacity:.95} /* ========================================================= BANDE DE LOGOS DÉFILANTE ========================================================= */ .bandeau{overflow:hidden;padding-block:2.6rem;background:#fff;border-top:1px solid var(--trait)} .bandeau__titre{ font-family:var(--police-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--encre-doux);text-align:center;margin:0 0 1.8rem; } .bandeau__piste{display:flex;gap:4rem;width:max-content;animation:defile 45s linear infinite} .bandeau:hover .bandeau__piste,.bandeau:focus-within .bandeau__piste{animation-play-state:paused} .bandeau__liste{display:flex;align-items:center;gap:4rem;list-style:none;margin:0;padding:0} .bandeau__liste img{ height:auto;width:auto;max-height:58px;max-width:200px;object-fit:contain; filter:grayscale(1);opacity:.55;transition:filter .3s ease,opacity .3s ease; } .bandeau__liste img:hover{filter:none;opacity:1} @keyframes defile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 2rem))}} @media (prefers-reduced-motion:reduce){ .bandeau__piste{animation:none;flex-wrap:wrap;justify-content:center;width:auto} } /* ========================================================= UNIVERS PRO — dossier technique ========================================================= */ body.univers-pro{--r-s:0;--r-m:0;--r-l:0;--r-btn:0} /* trame de plan sur le héros */ body.univers-pro .heros{ background-image: linear-gradient(var(--trait) 1px,transparent 1px), linear-gradient(90deg,var(--trait) 1px,transparent 1px); background-size:68px 68px; background-position:center top; } body.univers-pro .heros::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.9) 78%,#fff 100%); } /* numérotation automatique des sections */ body.univers-pro main{counter-reset:sect} body.univers-pro .section{counter-increment:sect} body.univers-pro .griffe{ border-bottom:2px solid currentColor;padding-bottom:.65rem;margin-bottom:1.5rem; display:flex;align-items:baseline;gap:.9rem; } body.univers-pro .griffe::before{ content:counter(sect,decimal-leading-zero); font-family:var(--police-mono);font-size:1.5rem;letter-spacing:0;line-height:1; color:var(--azur);font-weight:700; } /* fiche technique du héros */ .fiche-tech{ list-style:none;margin:2rem 0 0;padding:1.1rem 0 0;border-top:2px solid var(--trait); display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:820px; } @media (max-width:720px){.fiche-tech{grid-template-columns:repeat(2,1fr)}} .fiche-tech li{font-family:var(--police-mono);font-size:.78rem;line-height:1.5;color:var(--encre)} .fiche-tech b{ display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--acier);font-weight:400;margin-bottom:.3rem; } /* cartes numérotées comme des fiches */ body.univers-pro .grille{counter-reset:fiche} body.univers-pro .carte{position:relative;counter-increment:fiche;padding-top:2.4rem} body.univers-pro .carte::before{ content:'FICHE ' counter(fiche,decimal-leading-zero); position:absolute;top:1rem;left:1.6rem; font-family:var(--police-mono);font-size:.6rem;letter-spacing:.18em;color:var(--acier); } body.univers-pro .carte__puce{border-radius:0;background:none;color:var(--bleu); border:2px solid var(--bleu);font-size:.85rem;width:auto;min-width:44px;padding-inline:.5rem} body.univers-pro .porte,body.univers-pro .video__vign, body.univers-pro .tarif,body.univers-pro .widget{border-radius:0} body.univers-pro .heros h1{text-transform:uppercase;letter-spacing:-.035em;line-height:1.18;padding-top:.12em} body.univers-pro .lede{max-width:56ch} /* sections aux angles très arrondis, qui se chevauchent */ body.univers-mariage .section--brume, body.univers-mariage .section--rose, body.univers-mariage .section--encre{ border-radius:56px 56px 0 0;position:relative; } body.univers-mariage .section + .section--rose, body.univers-mariage .section + .section--brume{margin-top:-40px} /* ruban adhésif sur les cadres photo */ body.univers-mariage .cadre::after{ content:'';position:absolute;top:-15px;left:50%;width:118px;height:32px;z-index:3; transform:translateX(-50%) rotate(-4.5deg);border-radius:2px; background:repeating-linear-gradient(46deg, rgba(232,168,124,.8) 0 7px, rgba(255,255,255,.55) 7px 14px); box-shadow:0 2px 6px rgba(70,19,46,.12); } body.univers-mariage .cadre > *{transform:rotate(1.3deg)} body.univers-mariage .cadre:hover > *{transform:rotate(0)} body.univers-mariage .cadre > *{transition:transform .45s cubic-bezier(.2,.8,.2,1)} /* soulignement tracé à la main */ body.univers-mariage .heros h1 em{position:relative;padding-bottom:.12em} body.univers-mariage .heros h1 em::after{ content:'';position:absolute;left:-.04em;right:-.04em;bottom:0;height:.2em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M5,13 C60,4 118,18 178,9 C228,2 268,13 295,7' stroke='%23E8A87C' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; } /* pastille « le plus choisi » sur le tarif vedette */ body.univers-mariage .tarif{position:relative;overflow:visible} body.univers-mariage .tarif--vedette::after{ content:'le plus choisi'; position:absolute;top:-18px;right:-12px; font-family:'Caveat',cursive;font-weight:700;font-size:1.2rem;line-height:1; background:var(--peche);color:var(--prune);padding:.45rem 1rem;border-radius:999px; transform:rotate(7deg);box-shadow:0 6px 16px -8px rgba(70,19,46,.5); } /* listes cochées à la main */ body.univers-mariage .liste li::before{ content:'✓';background:none;color:var(--rose); font-family:'Caveat',cursive;font-weight:700;font-size:1.4rem; width:auto;height:auto;top:-.15em;border-radius:0;line-height:1; } /* boutons qui gigotent légèrement */ body.univers-mariage .btn:hover{transform:translateY(-2px) rotate(-1.2deg)} /* vignettes vidéo façon photos posées */ body.univers-mariage .video:nth-child(3n+1) .video__vign{transform:rotate(-1.1deg)} body.univers-mariage .video:nth-child(3n+2) .video__vign{transform:rotate(.9deg)} body.univers-mariage .video:nth-child(3n) .video__vign{transform:rotate(-.5deg)} body.univers-mariage .video__vign{transition:transform .35s ease} body.univers-mariage .video:hover .video__vign{transform:rotate(0) scale(1.02)} /* questions/réponses plus bavardes */ body.univers-mariage .faq summary::after{font-family:'Caveat',cursive;font-size:2rem;font-weight:700} body.univers-mariage .faq details{border-bottom-style:dashed} /* ========================================================= EXTRAITS D'AVIS MANUSCRITS ========================================================= */ .mot{margin:2.6rem 0;padding:0;position:relative;max-width:38ch} .mot blockquote{ font-family:'Caveat',cursive;font-weight:700; font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);line-height:1.16; color:var(--accent);margin:0 0 .55rem;max-width:none; } .mot figcaption{ font-family:var(--police-mono);font-size:.66rem;letter-spacing:.15em; text-transform:uppercase;color:var(--encre-doux); } .section--encre .mot blockquote{color:var(--soleil)} .section--encre .mot figcaption{color:rgba(255,255,255,.6)} /* pro : annotation manuscrite agrafée au dossier */ body.univers-pro .mot{ background:var(--glace);border-left:3px solid var(--azur); padding:1.3rem 1.5rem;transform:rotate(-.9deg);max-width:42ch; } body.univers-pro .mot blockquote{color:var(--marine)} body.univers-pro .mot::before{ content:'';position:absolute;top:-9px;left:22px;width:54px;height:18px; background:rgba(14,165,233,.35);transform:rotate(-6deg); } /* mariage : mot glissé de travers, avec un cœur */ body.univers-mariage .mot{transform:rotate(-1.6deg)} body.univers-mariage .mot::after{ content:'♥';position:absolute;right:-.4rem;top:-1.4rem; font-size:1.5rem;color:var(--peche);transform:rotate(14deg); } /* bandeau de notes agrégées */ .note b{ display:block;font-family:var(--police-titre);font-weight:var(--titre-poids); font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);line-height:1;color:var(--accent); } .note b span{font-size:.5em;color:var(--encre-doux);font-weight:400} .note em{font-style:normal;display:block;font-size:.88rem;color:var(--encre-doux);margin-top:.35rem} .etoiles{color:var(--soleil);letter-spacing:.08em;font-size:1rem} /* ========================================================= NOTES MANUSCRITES — extraits de synthèse des avis ========================================================= */ .note{ position:relative;font-family:'Caveat',cursive;font-weight:700; font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);line-height:1.3;letter-spacing:0; color:var(--encre);max-width:34ch; } .note__src{ display:block;font-family:var(--police-mono);font-weight:400; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--encre-doux);margin-top:.9rem; } .note__etoiles{color:var(--soleil);font-size:.9rem;letter-spacing:.18em;display:block;margin-bottom:.5rem} /* variante bandeau centré */ .note--bloc{ margin:0 auto;text-align:center;padding:2.2rem 1.5rem; max-width:38ch; } .note--bloc::before,.note--bloc::after{ content:'';position:absolute;left:50%;transform:translateX(-50%); width:64px;height:4px;border-radius:4px;background:var(--accent);opacity:.35; } .note--bloc::before{top:0} .note--bloc::after{bottom:0} /* variante papier collé (mariage) */ .note--papier{ background:#fff;border-radius:6px;padding:1.7rem 1.6rem 1.4rem; transform:rotate(-1.4deg);box-shadow:0 14px 34px -20px rgba(70,19,46,.55); border:1px solid var(--trait); } .note--papier::before{ content:'';position:absolute;top:-13px;left:32px;width:96px;height:28px; transform:rotate(-6deg);border-radius:2px; background:repeating-linear-gradient(46deg, rgba(232,168,124,.84) 0 7px, rgba(255,255,255,.6) 7px 14px); } /* variante annotation de marge (pro) */ .note--marge{ border-left:3px solid var(--azur);padding-left:1.3rem; color:var(--bleu);transform:rotate(-.6deg); } .note--marge .note__src{color:var(--acier)} /* --- bloc de notation --- */ .notation{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center} .notation__score{text-align:center} .notation__score b{ display:block;font-family:var(--police-titre);font-weight:var(--titre-poids); font-size:4.2rem;line-height:1; } .notation__score .etoiles{color:var(--soleil);font-size:1.15rem;letter-spacing:.2em;display:block;margin:.3rem 0} .notation__score span{font-size:.9rem;color:var(--encre-doux)} .criteres{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;flex:1;min-width:280px} .criteres li{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;font-size:.95rem} .criteres .jauge{grid-column:1/-1;height:6px;border-radius:99px;background:var(--trait);overflow:hidden} .criteres .jauge i{display:block;height:100%;background:var(--accent);border-radius:99px} .criteres b{font-family:var(--police-mono);font-size:.85rem} /* --- badge de notation réutilisable --- */ .badge-avis{ display:inline-flex;align-items:center;gap:.9rem;text-decoration:none; background:#fff;border:1px solid var(--trait);border-radius:var(--r-btn); padding:.7rem 1.3rem .7rem .9rem;transition:border-color .2s,transform .2s; } .badge-avis:hover{border-color:var(--accent);transform:translateY(-2px)} .badge-avis__note{ font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:1.9rem;line-height:1; color:var(--accent); } .badge-avis__etoiles{color:var(--soleil);letter-spacing:.12em;font-size:.85rem;display:block} .badge-avis small{font-size:.8rem;color:var(--encre-doux);display:block;margin-top:.15rem} /* --- avis Google natifs --- */ .avisg--charge{border-style:solid;border-color:var(--trait)} .avisg__tete{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem} .avisg__note{font-family:var(--police-titre);font-weight:var(--titre-poids);font-size:2.4rem;line-height:1;color:var(--accent)} .avisg__etoiles{color:var(--soleil);letter-spacing:.1em;font-size:.95rem;display:block} .avisg__vides{color:var(--trait)} .avisg__tete small{display:block;font-size:.82rem;color:var(--encre-doux)} .avisg__liste{display:grid;gap:1rem;max-height:480px;overflow-y:auto;padding-right:.5rem} .avisg__carte{border-top:1px solid var(--trait);padding-top:1rem} .avisg__carte header{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem} .avisg__carte header img{border-radius:50%;flex:none} .avisg__init{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--brume);color:var(--accent);font-weight:700} .avisg__carte header b{font-size:.95rem;display:block} .avisg__carte header small{font-size:.76rem;color:var(--encre-doux)} .avisg__carte header .avisg__etoiles{margin-left:auto;font-size:.8rem} .avisg__carte p{font-size:.93rem;margin:0;color:var(--encre-doux);max-width:none} .avisg__pied{font-size:.76rem;color:var(--encre-doux);margin:1.2rem 0 0;text-align:right} /* --- emplacement occupé par un widget externe --- */ .widget--live{border:0;padding:0;min-height:0;background:none} /* ========================================================= RENFORT PETITS ÉCRANS ========================================================= */ h1,h2,h3,.tarif__prix{overflow-wrap:break-word;hyphens:auto} .avisg__carte p,.note{overflow-wrap:break-word} @media (max-width:560px){ .bandeau__liste img{max-height:44px;max-width:150px} .criteres{min-width:0} .notation{gap:1.4rem} .notation__score{width:100%} .notation__score b{font-size:3.2rem} .fiche-tech{grid-template-columns:1fr;gap:1rem} .badge-avis{width:100%;justify-content:flex-start} .presse a{flex-direction:column;gap:.25rem} .videos{grid-template-columns:1fr} .bandeau__liste{gap:2.5rem} .bandeau__piste{gap:2.5rem} .bandeau__liste img{height:44px} body.univers-mariage .section--brume, body.univers-mariage .section--rose, body.univers-mariage .section--encre{border-radius:32px 32px 0 0} .cadre::before{--cadre-dec:8px} body.univers-mariage .tarif--vedette::after{right:auto;left:1rem} } /* ========================================================= ACCUEIL — trois univers bien distincts ========================================================= */ .ruban{display:flex;height:9px;width:100%} .ruban i{flex:1;display:block} .portes3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.5rem)} @media (max-width:960px){.portes3{grid-template-columns:1fr;max-width:560px;margin-inline:auto}} .portes3 .porte{min-height:clamp(380px,42vw,460px);padding:1.9rem 1.7rem} .porte__haut{position:absolute;top:0;left:0;right:0;height:7px;background:var(--teinte);z-index:1} .porte__eti{ position:absolute;top:1.6rem;left:1.7rem;z-index:1; font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; background:var(--teinte);color:#fff;padding:.3rem .7rem;font-weight:700; } /* — Professionnels : anguleux, capitales, Archivo — */ .porte--pro{border-radius:0} .porte--pro .porte__eti{font-family:'Inter',sans-serif;border-radius:0;color:#fff} .porte--pro h3{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:1.06} .porte--pro p{font-family:'Inter',sans-serif} .porte--pro .fleche{font-family:'Inter',sans-serif;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600} /* — Futurs mariés : très arrondi, Fraunces + manuscrit — */ .porte--mariage{border-radius:38px} .porte--mariage .porte__eti{font-family:'Caveat',cursive;font-size:1.1rem;letter-spacing:.02em;text-transform:none;border-radius:999px;padding:.15rem .95rem} .porte--mariage h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;font-variation-settings:'SOFT' 60,'WONK' 1;line-height:1.08} .porte--mariage p{font-family:'Nunito Sans',sans-serif} .porte--mariage .fleche{font-family:'Caveat',cursive;font-size:1.7rem;font-weight:700} /* — L'entreprise : intermédiaire, Bricolage — */ .porte--maison{border-radius:20px} .porte--maison .porte__eti{font-family:'Space Mono',monospace;border-radius:4px;color:var(--encre)} .porte--maison h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em} .porte--maison p{font-family:'Figtree',sans-serif} .porte--maison .fleche{font-family:'Caveat',cursive;font-size:1.6rem;font-weight:700} /* --- bandeau contact, mis à part --- */ .contact-bande{background:var(--soleil);color:var(--encre);text-align:center} .contact-bande .wrap{padding-block:clamp(2.5rem,6vw,4rem)} .contact-bande h2{margin-bottom:.3em} .contact-bande p{margin-inline:auto;color:rgba(22,16,58,.78)} .contact-bande .btn--plein{background:var(--encre);color:#fff} .contact-bande .btn--ligne{border-color:var(--encre);color:var(--encre)} .contact-bande .btn--ligne:hover{background:var(--encre);color:#fff} /* --- labels et récompenses Mariages.net --- */ .labels{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:center;justify-content:center} .labels > div{margin:0} .labels img{height:auto;max-width:150px;width:100%} .labels #wp-rated img{max-width:120px} @media (max-width:560px){.labels img{max-width:120px}} /* --- calendrier de disponibilités --- */ .calendrier{ background:#fff;border:1px solid var(--trait);border-radius:var(--r-l); padding:.9rem;overflow:hidden; } .calendrier iframe{width:100%;min-height:620px;border:0;display:block;border-radius:var(--r-m)} @media (max-width:560px){.calendrier iframe{min-height:520px}} .calendrier__legende{font-size:.85rem;color:var(--encre-doux);margin:.9rem .3rem 0} /* Le conteneur impose le format, l'image le remplit en recadrant. Ajuster au cas par cas avec --cadre-ratio et --cadre-pos. */ .cadre > *{aspect-ratio:var(--cadre-ratio,3/2);background:var(--brume)} .cadre > * > img{ width:100%;height:100%; object-fit:cover; object-position:var(--cadre-pos,center); } .avisg__carte header img{object-fit:cover} .bandeau__liste img{object-fit:contain} /* --- capitales accentuées : jamais rognées par la ligne du dessus --- */ h1,h2,h3{padding-top:.04em} h1 em,h2 em{overflow:visible} /* --- univers mariage : fonds réchauffés (variante terracotta) --- */ body.univers-mariage .section--rose{background:#FDF1EA} body.univers-mariage .section--brume{background:#FCF6F1} body.univers-mariage .carte{background:#FFFCFA} body.univers-mariage .cadre > *{background:#F5D8C6} /* --- cartes de catégorie colorées (page témoignages) --- */ .carte--teintee{ background:var(--fond); border:1px solid transparent; border-top:4px solid var(--teinte); border-radius:var(--r-m); } .carte--teintee h3{color:var(--teinte-fonce,var(--teinte));display:flex;align-items:center;gap:.6rem} .carte--teintee h3::before{ content:'';width:11px;height:11px;border-radius:50%;background:var(--teinte);flex:none; } .carte--teintee p{color:var(--encre-doux)} /* --- page pro : en-tête au format commun, seule la couleur change --- */ body.univers-pro .entete{border-bottom:1px solid var(--trait)} /* --- articles de presse repris --- */ .presse-article{border-top:3px solid var(--accent);padding-top:1.5rem;margin-bottom:3.5rem} .presse-article:last-of-type{margin-bottom:0} .presse-article__meta{ font-family:var(--police-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--encre-doux);margin-bottom:.7rem; } .presse-article h3{margin-bottom:1rem} .presse-article blockquote{ margin:1.3rem 0;padding-left:1.3rem;border-left:3px solid var(--trait); color:var(--encre);font-size:1.02rem; } .presse-article blockquote p:last-child{margin-bottom:0} .presse-article__lien{font-size:.9rem} /* ========================================================= EN-TÊTE — identique sur toutes les pages Seules les couleurs changent d'un univers à l'autre. ========================================================= */ .entete, .entete .nav a, .entete .btn{ font-family:'Figtree',system-ui,-apple-system,sans-serif; text-transform:none; letter-spacing:normal; } .entete .marque span{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; } .entete .marque small{font-family:'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase} .entete .nav a{border-radius:999px;font-weight:500;font-size:.97rem;padding:.5rem .8rem} .entete .btn{ border-radius:999px; font-weight:600; font-size:.95rem; padding:.6rem 1.15rem; border-width:2px; } .entete .btn--plein{background:var(--accent);color:#fff} .entete .btn--plein:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--accent)} .entete{border-bottom:1px solid var(--trait)} /* --- crédit photographe --- */ .credit-photo{ font-family:var(--police-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.6);margin:1.8rem 0 0; } /* --- vidéo verticale de présentation --- */ .video-verticale{ max-width:330px;margin-inline:auto;position:relative; border-radius:var(--r-l);overflow:hidden;background:#0B0820; box-shadow:0 24px 60px -30px rgba(22,16,58,.7); } .video-verticale video{width:100%;height:auto;display:block;aspect-ratio:9/16;object-fit:cover} .video-verticale figcaption{ font-family:var(--police-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--encre-doux);text-align:center;margin-top:.9rem; } @media (max-width:700px){.video-verticale{max-width:280px}} /* --- vignette en attente d'un identifiant Vimeo --- */ .video__vign--attente{ background:linear-gradient(135deg,var(--brume),color-mix(in srgb,var(--accent) 14%,var(--brume))); display:grid;place-items:center; } .video__vign--attente::after{ content:'';width:44px;height:44px;border-radius:50%; border:2px solid color-mix(in srgb,var(--accent) 45%,transparent); } /* --- section sable (zone d'intervention, univers mariage) --- */ .section--sable{background:#F6E6D6} body.univers-mariage .section--sable{background:#F6E4D2} /* --- fiches de synthèse carrées (page témoignages) --- */ .grille--carre{grid-template-columns:repeat(4,1fr)} .grille--carre .carte--teintee{ aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-start; padding:1.4rem;overflow:hidden; } .grille--carre .carte--teintee h3{font-size:1.12rem;margin-bottom:.6rem} .grille--carre .carte--teintee p{font-size:.92rem;line-height:1.55;margin:0} @media (max-width:980px){.grille--carre{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){ .grille--carre{grid-template-columns:1fr} .grille--carre .carte--teintee{aspect-ratio:auto;min-height:0} } /* --- section miel --- */ .section--miel{background:#FCEFD2} /* ========================================================= TEINTE ASSOCIATIONS — chaleureuse et proche ========================================================= */ body.teinte-corail{ --accent:#D65A33; --brume:#FFF3EC; --trait:#F6DACA; } .section--corail{background:#FFEDE2} .section--argile{background:#FBE3D5} /* --- quatre portes sur l'accueil --- */ .portes3{grid-template-columns:repeat(4,1fr)} .portes3 .porte{min-height:clamp(340px,34vw,420px);padding:1.6rem 1.4rem} .portes3 .porte h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem)} .portes3 .porte p{font-size:.93rem} @media (max-width:1100px){.portes3{grid-template-columns:repeat(2,1fr);max-width:none}} @media (max-width:640px){.portes3{grid-template-columns:1fr;max-width:520px;margin-inline:auto}} /* — Associations : arrondi intermédiaire, chaleureux — */ .porte--assos{border-radius:24px} .porte--assos .porte__eti{font-family:'Caveat',cursive;font-size:1.05rem;letter-spacing:.02em;text-transform:none;border-radius:999px;padding:.15rem .9rem} .porte--assos h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em} .porte--assos p{font-family:'Figtree',sans-serif} .porte--assos .fleche{font-family:'Caveat',cursive;font-size:1.55rem;font-weight:700} /* --- titre destiné aux seuls lecteurs d'écran --- */ .lu-seul{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* --- surtitre sur fond sombre : chaque univers a sa couleur --- */ body.univers-pro .section--encre .griffe{color:var(--azur)} body.univers-pro .section--encre .lede{color:#9CC3CE} body.teinte-corail .section--encre .griffe{color:var(--peche,#E9B18D)}