@font-face{font-family:"Fraunces";src:url("/fonts/17cf433661d1a8e3.woff2") format("woff2");font-display:swap;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-weight:400;font-style:normal;} @font-face{font-family:"Fraunces";src:url("/fonts/7622edd1fc8f52c6.woff2") format("woff2");font-display:swap;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-weight:500;font-style:normal;} @font-face{font-family:"Fraunces";src:url("/fonts/22d5b0872539c73c.woff2") format("woff2");font-display:swap;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-weight:600;font-style:normal;} @font-face{font-family:"Fraunces";src:url("/fonts/f7f338cff1cf623d.woff2") format("woff2");font-display:swap;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-weight:400;font-style:italic;} @font-face{font-family:"Fraunces";src:url("/fonts/7b82f07f6e29da15.woff2") format("woff2");font-display:swap;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-weight:500;font-style:italic;} @font-face{font-family:"Fraunces";src:url("/fonts/89db26d2c8edb0b9.woff2") format("woff2");font-display:swap;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-weight:600;font-style:italic;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:400;font-style:normal;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:500;font-style:normal;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:600;font-style:normal;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:400;font-style:italic;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:500;font-style:italic;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Fraunces fallback";src:local("Times New Roman");font-display:swap;font-weight:600;font-style:italic;size-adjust:115.4462%;ascent-override:84.7148%;descent-override:22.0882%;line-gap-override:0%;} @font-face{font-family:"Inter";src:url("/fonts/07431a16dd76433e.woff2") format("woff2");font-display:swap;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-weight:400;font-style:normal;} @font-face{font-family:"Inter";src:url("/fonts/fe8426e418b1784b.woff2") format("woff2");font-display:swap;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-weight:500;font-style:normal;} @font-face{font-family:"Inter";src:url("/fonts/c5c4490645b295f5.woff2") format("woff2");font-display:swap;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-weight:600;font-style:normal;} @font-face{font-family:"Inter fallback";src:local("Arial");font-display:swap;font-weight:400;font-style:normal;size-adjust:107.1194%;ascent-override:90.4365%;descent-override:22.518%;line-gap-override:0%;} @font-face{font-family:"Inter fallback";src:local("Arial");font-display:swap;font-weight:500;font-style:normal;size-adjust:107.1194%;ascent-override:90.4365%;descent-override:22.518%;line-gap-override:0%;} @font-face{font-family:"Inter fallback";src:local("Arial");font-display:swap;font-weight:600;font-style:normal;size-adjust:107.1194%;ascent-override:90.4365%;descent-override:22.518%;line-gap-override:0%;} :root { color-scheme: dark; --vert-nuit: #0d2216; --vert: #173f25; --vert-2: #1f5a33; --or: #c9a94a; --or-clair: #e3c978; --or-sombre: #7f6417; --creme: #f6f3ea; --creme-2: #efeadb; --sable: #dad2b8; --encre: #191712; --encre-2: #4b4738; --creme-doux: rgba(246, 243, 234, 0.78); --filet: rgba(246, 243, 234, 0.16); --voile-nuit: rgba(9, 24, 15, 0.9); --f-display: 'Fraunces', 'Fraunces fallback', Georgia, serif; --f-text: 'Inter', 'Inter fallback', system-ui, sans-serif; --t-display: clamp(2.6rem, 1.2rem + 5.6vw, 5.25rem); --t-h1: clamp(2.3rem, 1.2rem + 4.2vw, 4.25rem); --t-h2: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); --t-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --t-body: 1.0625rem; --t-small: 0.9rem; --t-eye: 0.8125rem; --lh-tight: 1.04; --lh-text: 1.62; --gouttiere: clamp(20px, 4vw, 64px); --section: clamp(80px, 6vw + 40px, 140px); --section-s: clamp(56px, 4vw + 24px, 96px); --contenu: 1200px; --lecture: 62ch; --r-btn: 2px; --r-media: 14px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duree: 520ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--vert-nuit); color: var(--texte); font-family: var(--f-text); font-size: var(--t-body); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--or); color: var(--encre); } body, .sur-nuit, .sur-vert { --texte: var(--creme); --texte-doux: var(--creme-doux); --accent: var(--or-clair); --filet-courant: var(--filet); --ligne-btn: var(--or-clair); --ligne-btn-fond: rgba(227, 201, 120, 0.12); --halo-point: rgba(227, 201, 120, 0.18); color: var(--texte); } .sur-papier, .sur-papier-2 { --texte: var(--encre); --texte-doux: var(--encre-2); --accent: var(--or-sombre); --filet-courant: var(--sable); --ligne-btn: var(--vert); --ligne-btn-fond: rgba(23, 63, 37, 0.08); --halo-point: rgba(154, 123, 31, 0.14); color: var(--texte); } .sur-papier { background: var(--creme); } .sur-papier-2 { background: var(--creme-2); } .sur-vert { background: var(--vert); } .sur-nuit { background: var(--vert-nuit); } .evitement { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--or); color: var(--encre); padding: 10px 16px; font-weight: 600; } .evitement:focus { left: 8px; } .serif { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.015em; } .serif em, .italique-or { font-style: italic; font-weight: 400; color: var(--accent); } .t-display { font-size: var(--t-display); line-height: var(--lh-tight); text-wrap: balance; } .t-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); text-wrap: balance; } .t-h2 { font-size: var(--t-h2); line-height: 1.06; text-wrap: balance; } .t-h3 { font-size: var(--t-h3); line-height: 1.2; text-wrap: balance; } .t-lead { font-size: var(--t-lead); line-height: 1.55; text-wrap: pretty; } .t-small { font-size: var(--t-small); } .doux { color: var(--texte-doux); } p { text-wrap: pretty; } .eye { display: inline-flex; align-items: center; gap: 12px; font-size: var(--t-eye); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .eye::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px var(--halo-point); flex: none; } .eye.sans-point::before { display: none; } .contenu { width: min(100% - 2 * var(--gouttiere), var(--contenu)); margin-inline: auto; } .section { padding-block: var(--section); position: relative; } .section-s { padding-block: var(--section-s); position: relative; } .entete-section { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); } .lecture { max-width: var(--lecture); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: var(--r-btn); font-weight: 600; font-size: 0.975rem; letter-spacing: 0.01em; line-height: 1.2; transition: transform 200ms var(--ease-out), background-color 200ms, color 200ms, border-color 200ms; text-align: center; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn .fleche { font-weight: 600; transition: transform 200ms var(--ease-out); } .btn:hover .fleche { transform: translateX(3px); } .btn-or { background: var(--or); color: var(--encre); } .btn-or:hover { background: var(--or-clair); } .btn-ligne { border: 1.5px solid var(--ligne-btn); color: var(--ligne-btn); } .btn-ligne:hover { background: var(--ligne-btn-fond); } .btn-vert { background: var(--vert); color: var(--creme); } .btn-vert:hover { background: var(--vert-2); } .btn-large { min-height: 58px; padding-inline: 30px; font-size: 1.05rem; } .btn-video { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; color: var(--texte); } .btn-video .rond { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ligne-btn); display: inline-flex; align-items: center; justify-content: center; transition: background-color 200ms, border-color 200ms; } .btn-video:hover .rond { background: var(--ligne-btn-fond); } .btn-video .rond::after { content: ''; width: 0; height: 0; border-left: 12px solid var(--ligne-btn); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .filet-haut { border-top: 1px solid var(--filet-courant); } .cadre-media { border-radius: var(--r-media); overflow: hidden; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duree) var(--ease-out), transform var(--duree) var(--ease-out); transition-delay: var(--delai, 0ms); } .reveal.visible { opacity: 1; transform: none; } .no-js .reveal, .reveal.sans-mouvement { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn, .btn .fleche { transition: none; } } .visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .badge-config { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent); padding: 3px 8px; border-radius: 2px; } header.entete { position: sticky; top: 0; z-index: 50; background: rgba(13, 34, 22, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); color: var(--creme); } header.entete .barre { display: flex; align-items: center; gap: 32px; min-height: 76px; } header.entete .logo { display: block; width: 118px; flex: none; } header.entete .logo svg { width: 100%; height: auto; display: block; } header.entete .nav { margin-left: auto; } header.entete .nav ul { display: flex; align-items: center; gap: 30px; } header.entete .nav a { font-size: 0.95rem; font-weight: 500; color: var(--creme-doux); transition: color 160ms; padding: 6px 0; position: relative; } header.entete .nav a:hover, header.entete .nav a[aria-current='page'] { color: var(--creme); } header.entete .nav a[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--or-clair); } header.entete .eleve a { display: inline-flex; align-items: center; gap: 8px; color: var(--creme); padding-left: 30px; border-left: 1px solid var(--filet); } header.entete .eleve i { width: 14px; height: 14px; border: 1.6px solid currentColor; border-radius: 50% 50% 3px 3px; } header.entete .cta { flex: none; min-height: 46px; padding: 11px 20px; font-size: 0.925rem; } header.entete .cta-mobile { display: none; } header.entete .burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-right: -8px; } header.entete .burger i { display: block; width: 22px; height: 1.6px; background: var(--creme); transition: transform 200ms var(--ease-out), opacity 200ms; } @media (max-width: 900px) { header.entete .barre { min-height: 64px; gap: 16px; } header.entete .logo { width: 100px; } header.entete .cta { display: none; } header.entete .burger { display: flex; margin-left: auto; } header.entete .nav { position: fixed; inset: 64px 0 auto 0; margin: 0; background: var(--vert-nuit); border-bottom: 1px solid var(--filet); padding: 8px var(--gouttiere) 28px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms; } header.entete[data-ouvert] .nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; } header.entete .nav ul { flex-direction: column; align-items: stretch; gap: 0; } header.entete .nav li a { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--filet); font-size: 1.1rem; color: var(--creme); } header.entete .eleve i { flex: none; } header.entete .nav a[aria-current='page']::after { display: none; } header.entete .eleve a { border-left: 0; padding-left: 0; } header.entete .cta-mobile { display: inline-flex; margin-top: 20px; width: 100%; } header.entete[data-ouvert] .burger i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } header.entete[data-ouvert] .burger i:nth-child(2) { opacity: 0; } header.entete[data-ouvert] .burger i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } } .pied { border-top: 1px solid var(--filet); padding-block: 56px 28px; } .pied .grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--filet); } .pied .logo { display: block; width: 150px; margin-bottom: 14px; } .pied .logo svg { width: 100%; height: auto; } .pied nav ul { display: grid; gap: 10px; } .pied nav a, .pied .insta { color: var(--creme-doux); transition: color 160ms; } .pied nav a:hover, .pied .insta:hover { color: var(--creme); } .pied .suivre .eye { margin-bottom: 12px; color: var(--creme-doux); } .pied .insta { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; } .pied .bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; } .pied .legal { display: flex; flex-wrap: wrap; gap: 20px; } .pied .legal a { color: var(--creme-doux); } .pied .legal a:hover { color: var(--creme); } @media (max-width: 760px) { .pied .grille { grid-template-columns: 1fr; gap: 28px; } } header.entete .nav a.btn-or, header.entete .nav a.btn-or:hover { color: var(--encre); } header.entete .nav a.btn-or::after { display: none; } .sec-hero { position: relative; min-height: min(92vh, 900px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--vert-nuit); isolation: isolate; } .sec-hero .photo { position: absolute; inset: 0; z-index: -1; } .sec-hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; } .sec-hero .photo img.haute { display: none; } .sec-hero .voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,24,15,.96) 0%, rgba(9,24,15,.9) 28%, rgba(9,24,15,.5) 52%, rgba(9,24,15,.08) 72%), linear-gradient(0deg, rgba(9,24,15,.95) 0%, rgba(9,24,15,0) 34%); } .sec-hero .corps { padding-block: clamp(64px, 9vw, 120px) 40px; display: grid; gap: 26px; max-width: 760px; margin-inline: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); align-self: center; } .sec-hero .corps .t-lead { max-width: 560px; } .sec-hero .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 6px; } .sec-hero .credit { position: absolute; right: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); bottom: 136px; text-align: right; font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1.6; color: var(--creme-doux); } .sec-hero .credit b { display: block; font-style: italic; font-weight: 500; font-size: 1.4rem; letter-spacing: 0; color: var(--creme); } .sec-hero .chiffres { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--filet); background: rgba(9,24,15,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sec-hero .chiffres li { display: flex; align-items: baseline; gap: 14px; padding: 26px 32px 30px; border-right: 1px solid var(--filet); } .sec-hero .chiffres li:first-child { padding-left: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); } .sec-hero .chiffres li:last-child { border-right: 0; } .sec-hero .chiffres b { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1; color: var(--or-clair); } .sec-hero .chiffres span { font-size: var(--t-small); line-height: 1.35; color: var(--creme-doux); max-width: 150px; } @media (max-width: 1100px) { .sec-hero .credit { display: none; } } @media (max-width: 900px) { .sec-hero { min-height: 0; grid-template-rows: auto auto; } .sec-hero .photo { position: relative; aspect-ratio: 4 / 5; max-height: 70vh; } .sec-hero .photo img.large { display: none; } .sec-hero .photo img.haute { display: block; object-position: 50% 18%; } .sec-hero .voile { background: linear-gradient(180deg, rgba(9,24,15,.5) 0%, rgba(9,24,15,0) 24%, rgba(9,24,15,0) 50%, var(--vert-nuit) 100%); } .sec-hero .corps { margin-top: -22vh; padding-block: 0 36px; gap: 18px; position: relative; } .sec-hero .actions { flex-direction: column; align-items: stretch; gap: 16px; } .sec-hero .actions .btn { width: 100%; } .sec-hero .actions .btn-video { justify-content: center; } .sec-hero .chiffres { grid-template-columns: 1fr 1fr; -webkit-backdrop-filter: none; backdrop-filter: none; } .sec-hero .chiffres li { padding: 18px var(--gouttiere); border-bottom: 1px solid var(--filet); } .sec-hero .chiffres li:nth-child(even) { border-right: 0; } .sec-hero .chiffres li:first-child { padding-left: var(--gouttiere); } } .sec-parcours .grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .sec-parcours .texte { display: grid; gap: 18px; } .sec-parcours .texte .btn { width: fit-content; } .sec-parcours .carte { display: flex; flex-wrap: wrap; gap: 22px 28px; } .sec-parcours .phase { display: grid; gap: 10px; } .sec-parcours .nom { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); white-space: nowrap; } .sec-parcours .trous { display: flex; gap: 6px; } .sec-parcours .trous a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--filet); font-family: var(--f-display); font-weight: 500; font-size: 1rem; color: var(--creme); transition: background-color 160ms, border-color 160ms, color 160ms; } .sec-parcours .trous a:hover { background: var(--or); border-color: var(--or); color: var(--encre); } @media (max-width: 900px) { .sec-parcours .grille { grid-template-columns: 1fr; } .sec-parcours .trous a { width: 36px; height: 36px; font-size: 0.9rem; } } .sec-video .grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .sec-video .texte { display: grid; gap: 20px; } .sec-video .texte .btn-video { width: fit-content; color: var(--encre); } .sec-video .cadre { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--vert-nuit); display: block; width: 100%; box-shadow: 0 30px 60px rgba(25, 23, 18, 0.18); } .sec-video .cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; transition: transform 700ms var(--ease-out); } .sec-video .cadre img.haute { display: none; } .sec-video .cadre:hover img { transform: scale(1.03); } .sec-video .voile { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,24,15,.7) 0%, rgba(9,24,15,.1) 50%); } .sec-video .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sec-video .play i { width: 84px; height: 84px; border-radius: 50%; background: rgba(246,243,234,.14); border: 1.5px solid rgba(246,243,234,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: transform 200ms var(--ease-out), background-color 200ms; } .sec-video .play i::after { content: ''; border-left: 22px solid var(--creme); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; } .sec-video .cadre:hover .play i { transform: scale(1.06); background: rgba(201,169,74,.9); border-color: var(--or); } .sec-video .ruban { position: absolute; left: 20px; bottom: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); background: rgba(13,34,22,.7); padding: 8px 12px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .sec-video .cadre img, .sec-video .play i { transition: none; } } @media (max-width: 900px) { .sec-video .grille { grid-template-columns: 1fr; } .sec-video .cadre { aspect-ratio: 4 / 5; } .sec-video .cadre img.large { display: none; } .sec-video .cadre img.haute { display: block; object-position: 50% 20%; } } .sec-probleme .grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .sec-probleme .texte { display: grid; gap: 24px; } .sec-probleme .points { display: grid; } .sec-probleme .points li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--sable); font-size: 1.1rem; line-height: 1.55; } .sec-probleme .points li:last-child { border-bottom: 1px solid var(--sable); } .sec-probleme .tiret { height: 2px; background: var(--or-sombre); margin-top: 0.75em; } .sec-probleme .citation { background: var(--vert-nuit); color: var(--creme); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-media); display: grid; gap: 22px; position: sticky; top: 100px; } .sec-probleme .citation blockquote { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.3; } .sec-probleme .citation figcaption { font-size: var(--t-small); } .sec-probleme .citation figcaption::before { content: ''; display: inline-block; width: 28px; height: 1.5px; background: var(--or-clair); vertical-align: middle; margin-right: 12px; } @media (max-width: 900px) { .sec-probleme .grille { grid-template-columns: 1fr; } .sec-probleme .citation { position: static; } } .sec-piliers .liste { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sable); border-left: 1px solid var(--sable); } .sec-piliers .liste li { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--sable); border-bottom: 1px solid var(--sable); align-items: start; } .sec-piliers .numero { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1; color: var(--or-sombre); font-weight: 400; } .sec-piliers .liste h3 { margin-bottom: 10px; } @media (max-width: 760px) { .sec-piliers .liste { grid-template-columns: 1fr; } } .sec-fondateur .grille { display: grid; grid-template-columns: 440px 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } .sec-fondateur .portrait { border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 5; } .sec-fondateur .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .sec-fondateur .texte { display: grid; gap: 26px; } .sec-fondateur blockquote { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.25; text-wrap: pretty; } .sec-fondateur .signature { display: grid; gap: 4px; color: var(--creme-doux); font-size: var(--t-small); } .sec-fondateur .signature b { font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--creme); margin-bottom: 6px; } .sec-fondateur .texte .btn { width: fit-content; } @media (max-width: 900px) { .sec-fondateur .grille { grid-template-columns: 1fr; } .sec-fondateur .portrait { max-width: 420px; } } .instagram.sec-instagram { overflow: hidden; background: radial-gradient(1200px 700px at 85% 30%, #17402a 0%, var(--vert-nuit) 62%); } .instagram .tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; } .instagram .texte { display: grid; gap: 20px; max-width: 560px; } .instagram .compte { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--creme); width: fit-content; } .instagram .ig-logo { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--or-clair); position: relative; flex: none; } .instagram .ig-logo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--or-clair); } .instagram .ig-logo::after { content: ''; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--or-clair); } .instagram .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .instagram .auto { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); color: var(--creme-doux); } .instagram .auto i { width: 8px; height: 8px; border-radius: 50%; background: #7bc48e; box-shadow: 0 0 0 4px rgba(123, 196, 142, 0.18); } .instagram .commandes { display: flex; gap: 10px; flex: none; } .instagram .commandes button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--filet); color: var(--creme); font-size: 1.1rem; transition: background-color 160ms, border-color 160ms; } @media (hover: hover) { .instagram .commandes button:hover { background: rgba(246, 243, 234, 0.1); border-color: var(--creme-doux); } } .instagram .piste { width: 100%; } .instagram .rail { display: flex; gap: 18px; padding-inline: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; padding-bottom: 8px; } .instagram .rail::-webkit-scrollbar { display: none; } .instagram .carte { flex: none; width: clamp(200px, 22vw, 270px); scroll-snap-align: start; position: relative; } .instagram .carte .media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-media); overflow: hidden; background: var(--vert); } .instagram .carte.photo .media { aspect-ratio: 4 / 5; } .instagram .carte img, .instagram .carte video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); } .instagram .carte:hover img, .instagram .carte:hover video { transform: scale(1.03); } .instagram .carte .media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 55%, rgba(6,18,11,.86) 100%); } .instagram .squelette .media { animation: ig-souffle 1.4s ease-in-out infinite; } @keyframes ig-souffle { 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .instagram .squelette .media { animation: none; } .instagram .carte img, .instagram .carte video { transition: none; } } .instagram .carte .type { position: absolute; top: 14px; right: 14px; z-index: 2; width: 24px; height: 24px; color: #fff; } .instagram .carte .lecture { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; } .instagram .carte .lecture i { width: 56px; height: 56px; border-radius: 50%; background: rgba(13, 34, 22, 0.55); border: 1.5px solid rgba(246,243,234,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: transform 200ms var(--ease-out), background-color 200ms; } .instagram .carte .lecture i::after { content: ''; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; } .instagram .carte .lecture:hover i { transform: scale(1.06); background: rgba(13, 34, 22, 0.75); } .instagram .carte .en-lecture .lecture { opacity: 0; } .instagram .carte .en-lecture .lecture:hover, .instagram .carte .en-lecture .lecture:focus-visible { opacity: 1; } .instagram .carte .en-lecture .lecture i::after { border: 0; width: 14px; height: 16px; margin: 0; border-left: 5px solid #fff; border-right: 5px solid #fff; } .instagram .carte .legende { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 6px; pointer-events: none; } .instagram .carte .legende span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); } .instagram .carte .legende b { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; line-height: 1.15; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .instagram .carte .lien { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 4; pointer-events: auto; } .instagram .carte .lien span { position: absolute; left: 16px; bottom: 0; transform: translateY(100%); font-size: 0.8rem; color: var(--or-clair); } .instagram .carte .lien:hover span, .instagram .carte .lien:focus-visible span { transform: translateY(4px); } .instagram .carte .lien { overflow: visible; } @media (max-width: 760px) { .instagram .tete { flex-direction: column; align-items: stretch; margin-bottom: 28px; } .instagram .commandes { display: none; } .instagram .carte { width: 72vw; } } .sec-prevente.prevente { background: radial-gradient(900px 500px at 10% 0%, var(--vert-2) 0%, var(--vert) 60%); } .sec-prevente .boite { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .sec-prevente .texte { display: grid; gap: 18px; } .sec-prevente .action { display: grid; gap: 12px; justify-items: start; } @media (max-width: 900px) { .sec-prevente .boite { grid-template-columns: 1fr; } .sec-prevente .action { justify-items: stretch; } .sec-prevente .action .btn { width: 100%; } } .sec-video-dialog { border: 0; padding: 0; background: transparent; width: min(92vw, 1000px); max-width: none; } .sec-video-dialog::backdrop { background: rgba(5, 14, 9, 0.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sec-video-dialog .cadre { position: relative; } .sec-video-dialog .fermer { position: absolute; top: -48px; right: -6px; width: 40px; height: 40px; border-radius: 50%; color: var(--creme); font-size: 1.6rem; line-height: 1; border: 1.5px solid var(--filet); transition: background-color 160ms; } .sec-video-dialog .fermer:hover { background: rgba(246,243,234,.12); } .sec-video-dialog .lecteur { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-media); overflow: hidden; } .sec-video-dialog .lecteur iframe { width: 100%; height: 100%; border: 0; display: block; } .sec-video-dialog .attente { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--vert-nuit); } .sec-video-dialog .attente img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; } .sec-video-dialog .voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,24,15,.92) 0%, rgba(9,24,15,.7) 45%, rgba(9,24,15,.15) 100%); } .sec-video-dialog .message { position: absolute; left: clamp(20px, 5%, 48px); right: clamp(20px, 5%, 48px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; max-width: 420px; color: var(--creme); } .sec-video-dialog .message .btn { width: fit-content; } @media (max-width: 640px) { .sec-video-dialog .message { gap: 8px; } .sec-video-dialog .message .t-h3 { font-size: 1.2rem; } .sec-video-dialog .message .doux { display: none; } } .sec-intro_programme.section { padding-bottom: var(--section-s); } .sec-intro_programme .grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: end; } .sec-intro_programme .texte { display: grid; gap: 22px; } .sec-intro_programme .texte .t-lead { max-width: 54ch; } .sec-intro_programme .phases ol { border-top: 1px solid var(--filet); } .sec-intro_programme .phases li { border-bottom: 1px solid var(--filet); } .sec-intro_programme .phases a { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 18px; padding: 18px 2px; } .sec-intro_programme .plage { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); white-space: nowrap; } .sec-intro_programme .nom { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.25; transition: color 200ms; } .sec-intro_programme .fleche { color: var(--or-clair); font-weight: 600; transition: transform 200ms var(--ease-out); } .sec-intro_programme .phases a:hover .nom { color: var(--or-clair); } .sec-intro_programme .phases a:hover .fleche { transform: translateX(4px); } @media (max-width: 900px) { .sec-intro_programme .grille { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 480px) { .sec-intro_programme .phases a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'plage fleche' 'nom fleche'; row-gap: 4px; } .sec-intro_programme .plage { grid-area: plage; } .sec-intro_programme .nom { grid-area: nom; } .sec-intro_programme .fleche { grid-area: fleche; align-self: center; } } @media (prefers-reduced-motion: reduce) { .sec-intro_programme .nom, .sec-intro_programme .fleche { transition: none; } .sec-intro_programme .phases a:hover .fleche { transform: none; } } .sec-structure_trou .entete-section { margin-bottom: clamp(36px, 4.5vw, 56px); } .sec-structure_trou .temps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); } .sec-structure_trou .temps li { position: relative; display: grid; align-content: start; gap: 12px; padding-top: 28px; border-top: 1px solid var(--sable); } .sec-structure_trou .temps li::before { content: ''; position: absolute; top: -2px; left: 0; width: 44px; height: 3px; background: var(--or-sombre); } .sec-structure_trou .numero { font-size: clamp(3rem, 2.2rem + 2.8vw, 4.75rem); line-height: 1; font-weight: 400; color: var(--or-sombre); font-variant-numeric: lining-nums; margin-bottom: 8px; } @media (max-width: 1000px) { .sec-structure_trou .temps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } } @media (max-width: 560px) { .sec-structure_trou .temps { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .sec-structure_trou .temps li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding-block: 24px; align-items: start; } .sec-structure_trou .temps li:last-child { padding-bottom: 0; } .sec-structure_trou .numero { grid-row: span 2; font-size: 3rem; margin-bottom: 0; } } .sec-trous .cartes { display: grid; gap: clamp(56px, 7vw, 104px); } .sec-trous .phase { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); padding-top: clamp(26px, 3vw, 40px); border-top: 2px solid var(--vert); scroll-margin-top: 92px; } .sec-trous .tete { position: sticky; top: 108px; align-self: start; display: grid; gap: 14px; } .sec-trous .tete h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); } .sec-trous .accroche { margin-top: 6px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.7rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--or-sombre); text-wrap: balance; } .sec-trous .lignes { display: grid; } .sec-trous .trou { --taille-numero: clamp(3rem, 2rem + 4.6vw, 6rem); display: grid; grid-template-columns: calc(var(--taille-numero) * 1.3) minmax(0, 1fr); column-gap: clamp(12px, 2vw, 28px); align-items: baseline; padding-block: clamp(22px, 2.8vw, 34px); scroll-margin-top: 116px; } .sec-trous .trou:first-child { padding-top: 0; } .sec-trous .trou:last-child { padding-bottom: 0; } .sec-trous .trou + .trou { border-top: 1px solid var(--sable); } .sec-trous .numero { font-size: var(--taille-numero); line-height: 0.8; font-weight: 400; color: var(--or-sombre); font-variant-numeric: lining-nums tabular-nums; transition: color 200ms; } .sec-trous .corps { display: grid; gap: 8px; min-width: 0; } .sec-trous .trou:target .numero { color: var(--vert); } @media (max-width: 900px) { .sec-trous .phase { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } .sec-trous .tete { position: static; } } @media (prefers-reduced-motion: reduce) { .sec-trous .numero { transition: none; } } .sec-differencie .entete-section { max-width: none; margin-bottom: clamp(32px, 4vw, 52px); } .sec-differencie .phrase { display: block; } .sec-differencie .colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, var(--lecture))); gap: clamp(24px, 5vw, 80px); justify-content: start; padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--filet); } .sec-differencie .colonne { display: grid; align-content: start; gap: 22px; } .sec-differencie .colonne p { font-size: 1.125rem; line-height: 1.65; color: var(--creme-doux); } .sec-differencie .autonomie { margin-top: clamp(48px, 6vw, 88px); padding: clamp(28px, 4.5vw, 64px); border: 1px solid var(--vert-2); border-radius: var(--r-media); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: start; } .sec-differencie .autonomie h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; } .sec-differencie .textes { display: grid; gap: 20px; max-width: var(--lecture); } .sec-differencie .textes p { font-size: 1.0625rem; line-height: 1.65; color: var(--creme-doux); } .sec-differencie .textes p:last-child { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); line-height: 1.35; color: var(--creme); } @media (max-width: 900px) { .sec-differencie .colonnes { grid-template-columns: minmax(0, var(--lecture)); } .sec-differencie .autonomie { grid-template-columns: minmax(0, 1fr); } } .sec-offres { scroll-margin-top: 72px; } .sec-offres .grille { display: grid; gap: 20px; } .sec-offres .carte { --marge: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; padding: var(--marge); border: 1px solid var(--sable); border-radius: var(--r-media); } .sec-offres .carte.principale { padding: calc(var(--marge) - 1px); border: 2px solid var(--vert); } .sec-offres .etiquette { margin-bottom: 16px; } .sec-offres .nom { margin-bottom: 8px; } .sec-offres .accroche { margin-bottom: 22px; } .sec-offres .prix { font-size: clamp(2.5rem, 2rem + 1.8vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; padding-bottom: 24px; border-bottom: 1px solid var(--sable); } .sec-offres .inclus { flex: 1 0 auto; display: grid; align-content: start; gap: 12px; padding-block: 24px 28px; } .sec-offres .inclus li { position: relative; padding-left: 32px; font-size: 0.975rem; line-height: 1.5; } .sec-offres .inclus li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 1.5px solid var(--or-sombre); border-radius: 2px; } .sec-offres .inclus li::after { content: ''; position: absolute; left: 6.5px; top: 4.5px; width: 5px; height: 9px; border: solid var(--or-sombre); border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 760px) { .sec-offres .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .sec-offres .carte.principale { grid-column: 1 / -1; margin-bottom: 24px; } } @media (min-width: 760px) and (max-width: 1080px) { .sec-offres .carte.principale .inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } .sec-offres .carte.principale > .btn { justify-self: start; align-self: flex-start; min-width: 300px; } } @media (min-width: 1081px) { .sec-offres .grille { grid-template-columns: 1.3fr 1fr 1fr; } .sec-offres .carte.principale { grid-column: auto; margin-bottom: 0; } } @supports (grid-template-rows: subgrid) { @media (min-width: 760px) { .sec-offres .carte { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } .sec-offres .etiquette { grid-row: 1; } .sec-offres .nom { grid-row: 2; } .sec-offres .accroche { grid-row: 3; } .sec-offres .prix { grid-row: 4; } .sec-offres .inclus { grid-row: 5; } .sec-offres .carte > .btn { grid-row: 6; } } } .sec-intro_apropos .grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(460px, 40%)); grid-template-areas: 'titre portrait' 'roles portrait'; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6vw, 96px); row-gap: clamp(28px, 3vw, 44px); align-items: start; } .sec-intro_apropos .titre { grid-area: titre; display: grid; gap: 20px; } .sec-intro_apropos .portrait { grid-area: portrait; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 5; } .sec-intro_apropos .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .sec-intro_apropos .roles { grid-area: roles; border-bottom: 1px solid var(--filet); } .sec-intro_apropos .roles li { display: flex; align-items: flex-start; gap: 16px; padding-block: 13px; border-top: 1px solid var(--filet); font-size: 1.02rem; line-height: 1.45; } .sec-intro_apropos .roles li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--or); } @media (max-width: 900px) { .sec-intro_apropos .grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'titre' 'portrait' 'roles'; grid-template-rows: none; } .sec-intro_apropos .portrait { max-width: 520px; } } .sec-palmares .grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sable); border-left: 1px solid var(--sable); } .sec-palmares .case { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--sable); border-bottom: 1px solid var(--sable); } .sec-palmares .haut { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; } .sec-palmares .haut.colle { gap: 0; } .sec-palmares .avant { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-2); } .sec-palmares .nombre { font-size: clamp(3.4rem, 2.5rem + 3.4vw, 5.2rem); line-height: 0.95; font-weight: 400; letter-spacing: -0.02em; color: var(--or-sombre); } .sec-palmares .nombre sup { font-size: 0.4em; line-height: 0; vertical-align: super; margin-left: 0.05em; letter-spacing: 0; } .sec-palmares .tiret { display: block; width: 32px; height: 2px; background: var(--or-sombre); } @media (max-width: 900px) { .sec-palmares .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sec-palmares .grille { grid-template-columns: minmax(0, 1fr); } .sec-palmares .case { min-height: 0; gap: 20px; } } .sec-citation figure { display: grid; gap: 32px; max-width: 1000px; } .sec-citation blockquote { font-size: clamp(1.75rem, 1.05rem + 2.7vw, 3.1rem); line-height: 1.2; text-wrap: balance; } .sec-citation .signature { display: flex; align-items: center; gap: 16px; } .sec-citation .trait { flex: none; width: 32px; height: 1.5px; background: var(--or-clair); } .sec-citation .signature b { font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--creme); } .sec-frise .grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .sec-frise .entete { display: grid; gap: 18px; position: sticky; top: 100px; z-index: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; color: inherit; } .sec-frise .etapes { max-width: 720px; min-width: 0; } .sec-frise .etape { --puce-y: 4px; position: relative; display: grid; gap: 8px; padding: 0 0 clamp(36px, 5vw, 56px) 52px; } .sec-frise .etape.titre-seul { --puce-y: 9px; } .sec-frise .etape:last-child { padding-bottom: 0; } .sec-frise .etape::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--sable); } .sec-frise .etape:first-child::before { top: calc(var(--puce-y) + 7px); } .sec-frise .etape:last-child::before { bottom: auto; height: calc(var(--puce-y) + 7px); } .sec-frise .puce { position: absolute; left: 0; top: var(--puce-y); width: 14px; height: 14px; border-radius: 50%; background: var(--or-sombre); box-shadow: 0 0 0 5px var(--creme-2); } @media (max-width: 900px) { .sec-frise .grille { grid-template-columns: minmax(0, 1fr); } .sec-frise .entete { position: static; } .sec-frise .etape { padding-left: 40px; } } .sec-bandeau_cta .boite { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .sec-bandeau_cta .texte { display: grid; gap: 18px; } .sec-bandeau_cta .actions { display: grid; gap: 14px; } @media (max-width: 900px) { .sec-bandeau_cta .boite { grid-template-columns: 1fr; } } .sec-intro_contact .entete-section { margin-bottom: 0; } .sec-intro_contact.section { padding-bottom: clamp(40px, 5vw, 64px); } .sec-intro_contact + .sec-formulaire_contact.section { padding-top: 0; } .sec-formulaire_contact { --champ-fond: #fff; --champ-halo: rgba(23, 63, 37, 0.14); --champ-erreur: #b42318; --retour-ok-fond: #e3f2e8; --retour-ok-texte: #14532d; --retour-erreur-fond: #fde8e6; --retour-erreur-texte: #8a1c14; } .sec-formulaire_contact .grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .sec-formulaire_contact .ecrire { min-width: 0; scroll-margin-top: 110px; } .sec-formulaire_contact .formulaire { display: grid; gap: 22px; } .sec-formulaire_contact .formulaire .pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sec-formulaire_contact .formulaire .ligne { display: grid; gap: 8px; } .sec-formulaire_contact .formulaire label { font-weight: 600; font-size: 0.95rem; } .sec-formulaire_contact .formulaire input, .sec-formulaire_contact .formulaire select, .sec-formulaire_contact .formulaire textarea { font: inherit; color: var(--encre); background: var(--champ-fond); border: 1.5px solid var(--sable); border-radius: var(--r-btn); padding: 14px 16px; width: 100%; transition: border-color 160ms, box-shadow 160ms; } .sec-formulaire_contact .formulaire input:focus, .sec-formulaire_contact .formulaire select:focus, .sec-formulaire_contact .formulaire textarea:focus { outline: 0; border-color: var(--vert); box-shadow: 0 0 0 3px var(--champ-halo); } .sec-formulaire_contact .formulaire input[aria-invalid='true'], .sec-formulaire_contact .formulaire textarea[aria-invalid='true'] { border-color: var(--champ-erreur); } .sec-formulaire_contact .formulaire textarea { resize: vertical; min-height: 150px; } .sec-formulaire_contact .formulaire .pied-form { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .sec-formulaire_contact .formulaire .retour { padding: 14px 16px; border-radius: var(--r-btn); font-weight: 500; } .sec-formulaire_contact .formulaire .retour.ok { background: var(--retour-ok-fond); color: var(--retour-ok-texte); } .sec-formulaire_contact .formulaire .retour.erreur { background: var(--retour-erreur-fond); color: var(--retour-erreur-texte); } .sec-formulaire_contact .coordonnees { position: sticky; top: 100px; align-self: start; min-width: 0; } .sec-formulaire_contact .coordonnees h2 { padding-bottom: 16px; border-bottom: 2px solid var(--vert); } .sec-formulaire_contact .coordonnees .liste { margin: 0; } .sec-formulaire_contact .coordonnees .ligne { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--sable); } .sec-formulaire_contact .coordonnees dt, .sec-formulaire_contact .coordonnees .etiquette { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-2); } .sec-formulaire_contact .coordonnees dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .sec-formulaire_contact .coordonnees .note { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--encre-2); } .sec-formulaire_contact .coordonnees .mail { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.3; color: var(--vert); text-decoration: underline; text-decoration-color: var(--or-sombre); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color 160ms; } .sec-formulaire_contact .coordonnees .mail:hover { color: var(--vert-2); } .sec-formulaire_contact .coordonnees .avec-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .sec-formulaire_contact .coordonnees .insta { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; transition: color 160ms; } .sec-formulaire_contact .coordonnees .insta:hover { color: var(--vert-2); text-decoration: underline; text-underline-offset: 4px; } .sec-formulaire_contact .coordonnees .eleve { display: grid; justify-items: start; gap: 14px; margin-top: 28px; } @media (max-width: 900px) { .sec-formulaire_contact .grille { grid-template-columns: minmax(0, 1fr); } .sec-formulaire_contact .coordonnees { position: static; } .sec-formulaire_contact .coordonnees .eleve { justify-items: stretch; } } .sec-faq .grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .sec-faq .entete { display: grid; gap: 18px; position: sticky; top: 100px; z-index: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; color: inherit; } .sec-faq .questions { display: grid; border-bottom: 1px solid var(--sable); min-width: 0; } .sec-faq .question { border-top: 1px solid var(--sable); scroll-margin-top: 100px; } .sec-faq .question summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; cursor: pointer; list-style: none; } .sec-faq .question summary::-webkit-details-marker { display: none; } .sec-faq .question summary h3 { flex: 1; min-width: 0; transition: color 160ms; } .sec-faq .question summary:hover h3 { color: var(--vert); } .sec-faq .mot { white-space: nowrap; } .sec-faq .chevron { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--sable); border-radius: 50%; transition: background-color 200ms, border-color 200ms; } .sec-faq .chevron::before { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--or-sombre); border-bottom: 2px solid var(--or-sombre); transform: translateY(-2px) rotate(45deg); transition: transform 280ms var(--ease-out); } .sec-faq .question summary:hover .chevron { border-color: var(--or-sombre); } .sec-faq .question[open] .chevron { background: var(--creme); border-color: var(--or-sombre); } .sec-faq .question[open] .chevron::before { transform: translateY(2px) rotate(-135deg); } .sec-faq .reponse { display: grid; gap: 14px; max-width: var(--lecture); padding: 0 64px 30px 0; } .sec-faq .question[open] .reponse { animation: faq-ouverture 320ms var(--ease-out); } @keyframes faq-ouverture { from { opacity: 0; transform: translateY(-6px); } } @media (max-width: 900px) { .sec-faq .grille { grid-template-columns: minmax(0, 1fr); } .sec-faq .entete { position: static; } .sec-faq .question summary { padding-block: 22px; gap: 16px; } .sec-faq .reponse { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .sec-faq .chevron, .sec-faq .chevron::before { transition: none; } .sec-faq .question[open] .reponse { animation: none; } } .sec-texte_libre .prose { max-width: 760px; display: grid; gap: 20px; } .sec-texte_libre .corps { display: grid; gap: 18px; } .sec-texte_libre .corps h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h3); margin-top: 18px; } .sec-texte_libre .corps h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); margin-top: 10px; } .sec-texte_libre .corps p, .sec-texte_libre .corps li { color: var(--texte-doux); } .sec-texte_libre .corps strong { color: var(--texte); } .sec-texte_libre .corps a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; } .sec-texte_libre.sur-nuit .corps a, .sec-texte_libre.sur-vert .corps a { color: var(--or-clair); } .sec-texte_libre .corps ul, .sec-texte_libre .corps ol { display: grid; gap: 10px; padding-left: 20px; } .sec-texte_libre .corps ul { list-style: disc; } .sec-texte_libre .corps ol { list-style: decimal; } .sec-texte_libre .corps .a-completer { background: var(--creme-2); border-left: 3px solid var(--or-sombre); padding: 12px 16px; font-size: var(--t-small); } .sec-texte_libre.sur-nuit .corps .a-completer, .sec-texte_libre.sur-vert .corps .a-completer { background: var(--vert); border-left-color: var(--or-clair); } .sec-texte_libre.sur-nuit .prose, .sec-texte_libre.sur-vert .prose { max-width: var(--lecture); } .sec-texte_libre:has(+ .sec-boutons) { padding-bottom: 20px; } .sec-image_pleine figure { margin: 0; } .sec-image_pleine img { width: 100%; height: auto; } .sec-image_pleine figcaption { padding-block: 14px 18px; font-size: var(--t-small); } .sec-boutons .actions { display: flex; flex-wrap: wrap; gap: 16px; } .sec-texte_libre + .sec-boutons { padding-top: 0; padding-bottom: var(--section); } .sec-texte_libre + .sec-boutons .contenu { max-width: 760px; } .sec-texte_libre.sur-nuit + .sec-boutons .contenu, .sec-texte_libre.sur-vert + .sec-boutons .contenu { max-width: var(--lecture); } .sec-parcours .grille { grid-template-columns: minmax(250px, 0.78fr) minmax(0, 2fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; } .sec-parcours .texte { align-self: center; } @media (max-width: 1100px) { .sec-parcours .grille { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); } .sec-parcours .texte { max-width: 62ch; } } .carte-parcours { --cp-z1: #19472a; --cp-z2: #153a23; --cp-z3: #1f5a33; --cp-z4: #112d1c; --cp-z5: #446b38; --cp-fairway: #5f886a; --cp-coupe: rgba(246, 243, 234, 0.15); --cp-green: #a0b9a3; --cp-collier: #6f9a78; --cp-sable: var(--sable); --cp-eau: #1a4d57; --cp-eau-bord: #3a8394; --cp-houppier: #1b4f31; --cp-lumiere: #3f8a57; --cp-halo: rgba(9, 24, 15, 0.55); position: relative; margin: 0; color: var(--creme); aspect-ratio: 1000 / 720; width: 100%; max-width: 1040px; margin-inline: auto; isolation: isolate; } @supports (color: color-mix(in srgb, red, blue)) { .carte-parcours { --cp-z1: color-mix(in srgb, var(--vert-2) 70%, var(--vert-nuit)); --cp-z2: color-mix(in srgb, var(--vert) 90%, var(--vert-nuit)); --cp-z3: var(--vert-2); --cp-z4: color-mix(in srgb, var(--vert-nuit) 62%, var(--vert)); --cp-z5: color-mix(in srgb, var(--vert-2) 78%, var(--or)); --cp-fairway: color-mix(in srgb, var(--vert-2) 70%, var(--creme)); --cp-green: color-mix(in srgb, var(--vert-2) 44%, var(--creme)); --cp-collier: color-mix(in srgb, var(--vert-2) 62%, var(--creme)); --cp-houppier: color-mix(in srgb, var(--vert-2) 82%, var(--vert-nuit)); --cp-lumiere: color-mix(in srgb, var(--vert-2) 62%, var(--creme)); } } .cp-z-fondations { --cp-bg: var(--cp-z1); } .cp-z-systemes { --cp-bg: var(--cp-z2); } .cp-z-routines { --cp-bg: var(--cp-z3); } .cp-z-stress { --cp-bg: var(--cp-z4); } .cp-z-bilan { --cp-bg: var(--cp-z5); } .cp-fond { position: absolute; inset: 0; z-index: 0; border-radius: var(--r-media); overflow: hidden; background: var(--cp-z2); box-shadow: 0 0 0 1px var(--filet), 0 36px 70px -36px rgba(0, 0, 0, 0.7); } .cp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; } .cp-etroit { display: none; } .cp-z { stroke-width: 1; } .cp-z1 { fill: var(--cp-z1); stroke: var(--cp-z1); } .cp-z2 { fill: var(--cp-z2); stroke: var(--cp-z2); } .cp-z3 { fill: var(--cp-z3); stroke: var(--cp-z3); } .cp-z4 { fill: var(--cp-z4); stroke: var(--cp-z4); } .cp-z5 { fill: var(--cp-z5); stroke: var(--cp-z5); } .cp-zbord { fill: none; stroke: var(--creme); stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 3 5; } .cp-niveau { fill: none; stroke: var(--creme); stroke-opacity: 0.06; stroke-width: 1; } .cp-eau { fill: var(--cp-eau); stroke: var(--cp-eau-bord); stroke-width: 1; stroke-opacity: 0.7; } .cp-onde { fill: none; stroke: #bfe0e6; stroke-opacity: 0.32; stroke-width: 1; stroke-linecap: round; } .cp-hole { transition: opacity 220ms var(--ease-out); } .cp-fw { fill: var(--cp-fairway); stroke: var(--cp-coupe); stroke-width: 13; stroke-linejoin: round; paint-order: stroke; transition: stroke 220ms; } .cp-large .cp-rayures { fill: url(#cp-l-ray); } .cp-etroit .cp-rayures { fill: url(#cp-m-ray); } .cp-rayures { opacity: 0.07; } .cp-gr { fill: var(--cp-green); stroke: var(--cp-collier); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; transition: fill 220ms; } .cp-gr-court { stroke-width: 16; } .cp-cup { fill: var(--vert-nuit); } .cp-tee { fill: #cfc7a8; } .cp-bk { fill: var(--cp-sable); stroke: color-mix(in srgb, var(--sable) 68%, var(--vert-nuit)); stroke-width: 1; } .cp-arb-o { fill: #06130c; opacity: 0.45; } .cp-arb { fill: var(--cp-houppier); } .cp-arb-h { fill: var(--cp-lumiere); opacity: 0.6; } .cp-pont { fill: #cfc7a8; } .cp-depart { fill: none; stroke: var(--or-clair); stroke-width: 1.5; stroke-opacity: 0.85; } .cp-route-o { fill: none; stroke: var(--cp-halo); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .cp-route { fill: none; stroke: var(--or-clair); stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6.6; } .cp-etroit .cp-route-o { stroke-width: 4.5; } .cp-etroit .cp-route { stroke-width: 2; stroke-dasharray: 0.1 5.2; } .cp-cadre { fill: none; stroke: var(--creme); stroke-opacity: 0.22; stroke-width: 1; } .cp-graduation { fill: none; stroke: var(--creme); stroke-opacity: 0.3; stroke-width: 1; } .cp-masque { stroke-dasharray: 1; stroke-dashoffset: 1; } .carte-parcours.visible .cp-masque { stroke-dashoffset: 0; transition: stroke-dashoffset 3s cubic-bezier(0.45, 0.05, 0.25, 1) 0.4s; } .no-js .cp-masque { stroke-dashoffset: 0; } .carte-parcours[data-actif] .cp-hole { opacity: 0.58; } .carte-parcours[data-actif] .cp-hole.actif { opacity: 1; } .cp-hole.actif .cp-fw { stroke: color-mix(in srgb, var(--or-clair) 42%, transparent); } .cp-hole.actif .cp-gr { fill: color-mix(in srgb, var(--cp-green) 78%, var(--creme)); } .cp-fond::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 50% 48%, transparent 55%, rgba(5, 14, 9, 0.38) 100%); } .cp-phases { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; } .cp-phase { margin: 0; padding: 0; list-style: none; } .cp-trous { margin: 0; padding: 0; list-style: none; } .cp-zone { position: absolute; display: grid; gap: 3px; margin: 0; max-width: 26%; pointer-events: none; } .cp-zone::before { content: ''; width: 20px; height: 2px; background: var(--or); margin-bottom: 5px; } .cp-zone-nom { font-family: var(--f-display); font-weight: 500; font-size: clamp(0.92rem, 0.62rem + 0.7vw, 1.12rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--creme); text-wrap: balance; } .cp-zone-plage { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme); opacity: 0.92; } .cp-z-fondations .cp-zone { left: 5.5%; top: 2.6%; } .cp-z-systemes .cp-zone { left: 36.4%; top: 2.6%; } .cp-z-routines .cp-zone { left: 76.4%; bottom: 2.4%; } .cp-z-stress .cp-zone { left: 16.6%; bottom: 2.4%; } .cp-z-bilan .cp-zone { left: 3.6%; bottom: 2.4%; max-width: 12%; } .cp-trou { position: absolute; left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); width: 0; height: 0; z-index: 1; } .cp-trou:hover, .cp-trou:focus-within { z-index: 5; } .cp-lien { position: absolute; left: -14px; top: -34px; width: 44px; height: 44px; display: block; color: var(--creme); text-decoration: none; border-radius: 8px; } .cp-lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; } .cp-drapeau { position: absolute; left: 14px; top: 34px; width: 0; height: 0; transform-origin: 0 0; } .cp-drapeau::before { content: ''; position: absolute; left: -0.75px; bottom: 0; width: 1.5px; height: 27px; background: var(--creme); border-radius: 1px; } .cp-drapeau::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 0 transparent; transition: box-shadow 200ms var(--ease-out); pointer-events: none; } .cp-num { position: absolute; left: 0.75px; bottom: 10px; display: block; width: 29px; height: 18px; padding-right: 5px; background: var(--or); color: var(--encre); font-family: var(--f-display); font-weight: 700; font-size: 0.78rem; line-height: 18px; letter-spacing: 0.01em; text-align: center; font-variant-numeric: lining-nums; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); transition: background-color 160ms, transform 200ms var(--ease-out); transform-origin: 0 100%; } .cp-lien:hover .cp-num, .cp-lien:focus-visible .cp-num { background: var(--or-clair); transform: scale(1.14); } .cp-lien:hover .cp-drapeau::after, .cp-lien:focus-visible .cp-drapeau::after { box-shadow: 0 0 0 7px var(--halo-point, rgba(227, 201, 120, 0.18)), 0 0 0 1.5px var(--or-clair) inset; } .cp-drapeau { opacity: 0; transform: translateY(6px) scale(0.85); } .carte-parcours.visible .cp-drapeau { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: var(--d, 0.5s); } .no-js .cp-drapeau { opacity: 1; transform: none; } .cp-bulle { --bx: -50%; --ax: 50%; position: absolute; left: 14px; bottom: calc(100% + 14px); z-index: 6; width: max-content; max-width: min(268px, 72vw); padding: 13px 16px 14px; background: rgba(9, 24, 15, 0.97); border: 1px solid rgba(227, 201, 120, 0.5); border-radius: 10px; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.7); text-align: left; color: var(--creme); visibility: hidden; opacity: 0; transform: translate(var(--bx), 6px); transition: opacity 170ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 170ms; } .cp-bulle::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } .cp-bulle::after { content: ''; position: absolute; top: 100%; left: var(--ax); width: 10px; height: 10px; background: rgba(9, 24, 15, 0.97); border: solid rgba(227, 201, 120, 0.5); border-width: 0 1px 1px 0; transform: translate(-50%, -5px) rotate(45deg); } .cp-bulle > span { display: block; } .cp-b-num { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-clair); } .cp-b-titre { margin-top: 5px; font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; } .cp-b-aller { margin-top: 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--or-clair); } .cp-b-texte { margin-top: 6px; font-size: 0.84rem; line-height: 1.45; color: var(--creme-doux); text-wrap: pretty; } @media (hover: hover) { .cp-lien:hover .cp-bulle { visibility: visible; opacity: 1; transform: translate(var(--bx), 0); transition-delay: 0s; } } .cp-lien:focus-visible .cp-bulle { visibility: visible; opacity: 1; transform: translate(var(--bx), 0); transition-delay: 0s; } .carte-parcours.sans-bulle .cp-bulle { visibility: hidden !important; opacity: 0 !important; } @media (max-width: 640px) { .carte-parcours { aspect-ratio: auto; max-width: 520px; } .cp-fond { right: auto; bottom: auto; width: 120px; height: 1440px; z-index: 1; border-radius: 0; overflow: visible; background: none; box-shadow: none; pointer-events: none; } .cp-fond::after { display: none; } .cp-large { display: none; } .cp-etroit { display: block; width: 120px; height: 1440px; } .cp-phases { position: static; z-index: auto; } .cp-phase { position: static; margin-bottom: 10px; background: var(--cp-bg, var(--cp-z2)); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--filet); } .cp-phase:last-child { margin-bottom: 0; } .cp-zone { position: static; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 64px; max-width: none; padding: 0 14px 0 132px; } .cp-zone::before { display: none; } .cp-zone-nom { font-size: 1.0625rem; } .cp-z-fondations .cp-zone, .cp-z-systemes .cp-zone, .cp-z-routines .cp-zone, .cp-z-stress .cp-zone, .cp-z-bilan .cp-zone { left: auto; top: auto; bottom: auto; max-width: none; } .cp-trou { position: relative; left: auto; top: auto; width: auto; height: 60px; z-index: 2; } .cp-trou:hover, .cp-trou:focus-within { z-index: 2; } .cp-lien { position: relative; left: auto; top: auto; width: auto; height: 60px; display: flex; align-items: center; padding: 0 14px 0 132px; border-radius: 10px; -webkit-tap-highlight-color: rgba(227, 201, 120, 0.18); } .cp-lien::before { content: ''; position: absolute; left: 132px; right: 14px; top: 0; height: 1px; background: var(--filet); } .cp-trou:first-child .cp-lien::before { display: none; } .cp-lien::after { content: '→'; content: '→' / ''; flex: none; margin-left: auto; padding-left: 10px; font-size: 1.05rem; line-height: 1; color: var(--or-clair); opacity: 0.8; } .cp-lien:active { background: rgba(227, 201, 120, 0.1); } .cp-lien:focus-visible { outline-offset: -3px; } .cp-drapeau { left: var(--gx); top: 36px; } .cp-phases .cp-trou .cp-bulle { position: static; left: auto; right: auto; bottom: auto; width: auto; max-width: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none; transition: none; } .cp-bulle::before, .cp-bulle::after, .cp-bulle .cp-b-num, .cp-bulle .cp-b-texte, .cp-bulle .cp-b-aller { display: none; } .cp-bulle .cp-b-titre { margin: 0; font-size: 1rem; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .cp-lien:active .cp-b-titre { color: var(--or-clair); } } @media (max-width: 380px) { .cp-zone { padding-left: 126px; padding-right: 10px; } .cp-zone-nom { font-size: 1rem; } .cp-lien { padding-left: 126px; padding-right: 8px; } .cp-lien::before { left: 126px; right: 8px; } .cp-lien::after { display: none; } .cp-bulle .cp-b-titre { font-size: 0.94rem; line-height: 1.17; } } @media (max-width: 340px) { .cp-bulle .cp-b-titre { font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .cp-masque, .carte-parcours.visible .cp-masque { stroke-dashoffset: 0; transition: none; } .cp-drapeau, .carte-parcours.visible .cp-drapeau { opacity: 1; transform: none; transition: none; } .cp-hole, .cp-fw, .cp-gr, .cp-num, .cp-bulle, .cp-drapeau::after { transition: none; } .cp-lien:hover .cp-bulle, .cp-lien:focus-visible .cp-bulle { transition: none; } } .h-01{--dx:11.29;--dy:39.05;--d:0.59s} .h-02{--dx:18.96;--dy:18.58;--d:0.81s} .h-03{--dx:31.8;--dy:39.55;--d:0.95s} .h-04{--dx:38.51;--dy:18.55;--d:1.05s} .h-05{--dx:51.28;--dy:39.02;--d:1.15s} .h-06{--dx:58.36;--dy:17.85;--d:1.2s} .h-07{--dx:72.7;--dy:38.58;--d:1.27s} .h-08{--dx:79.02;--dy:17.9;--d:1.34s} .h-09{--dx:90.38;--dy:39.06;--d:1.41s} .h-10{--dx:89.62;--dy:82.31;--d:1.48s} .h-11{--dx:82.46;--dy:62.25;--d:1.55s} .h-12{--dx:67.29;--dy:81.94;--d:1.64s} .h-13{--dx:61.07;--dy:61.55;--d:1.72s} .h-14{--dx:49.32;--dy:81.34;--d:1.84s} .h-15{--dx:42.39;--dy:61.42;--d:1.98s} .h-16{--dx:28.72;--dy:81.75;--d:2.17s} .h-17{--dx:21.99;--dy:62.13;--d:2.42s} .h-18{--dx:9.76;--dy:82.3;--d:3.28s} .h-01 .cp-bulle,.h-02 .cp-bulle,.h-17 .cp-bulle,.h-18 .cp-bulle{left:-10px;--bx:0;--ax:24px} .h-08 .cp-bulle,.h-09 .cp-bulle,.h-10 .cp-bulle,.h-11 .cp-bulle{left:auto;right:-10px;--bx:0;--ax:calc(100% - 40px)} @media (max-width:640px){.h-01{--gx:40px;--d:0.66s}.h-02{--gx:83px;--d:0.81s}.h-03{--gx:39px;--d:0.92s}.h-04{--gx:88px;--d:1.07s}.h-05{--gx:33px;--d:1.14s}.h-06{--gx:90px;--d:1.21s}.h-07{--gx:35px;--d:1.27s}.h-08{--gx:85px;--d:1.32s}.h-09{--gx:41px;--d:1.38s}.h-10{--gx:83px;--d:1.48s}.h-11{--gx:37px;--d:1.54s}.h-12{--gx:89px;--d:1.66s}.h-13{--gx:33px;--d:1.75s}.h-14{--gx:90px;--d:1.86s}.h-15{--gx:37px;--d:1.98s}.h-16{--gx:84px;--d:2.12s}.h-17{--gx:41px;--d:2.31s}.h-18{--gx:85px;--d:3.28s}} .contact, .sec-faq { --chevauche: clamp(72px, 8vw, 120px); --r-surface: 14px; --ombre-teinte: 9, 24, 15; } .contact .ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; display: block; } .sec-intro_contact.contact-hero { padding-block: clamp(36px, 4.5vw, 72px) calc(var(--chevauche) + clamp(36px, 4.5vw, 64px)); } .contact-hero__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(40px, 7vw, 112px); align-items: center; } .contact-hero__texte { display: grid; gap: 22px; align-content: center; max-width: 640px; } .contact-hero__grille:not(:has(.contact-hero__photo)) { grid-template-columns: minmax(0, 1fr); } .contact-hero__texte .t-lead { max-width: 32em; } .contact-hero__texte h1 { font-size: clamp(2.5rem, 1.1rem + 5.2vw, 4.9rem); line-height: 1.04; } .contact-hero__garanties { display: grid; gap: 14px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--filet); max-width: 30em; } .contact-hero__garanties li { display: flex; align-items: center; gap: 12px; color: var(--creme-doux); font-size: 1rem; line-height: 1.4; } .contact-hero__garanties .ic { width: 22px; height: 22px; color: var(--or-clair); } .contact-hero__photo { position: relative; margin: 0; justify-self: end; width: min(100%, 440px); isolation: isolate; } .contact-hero__photo::before { content: ''; position: absolute; z-index: -1; inset: 22px -22px -22px 22px; border: 1px solid rgba(227, 201, 120, 0.5); border-radius: var(--r-surface); } .contact-hero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%; border-radius: var(--r-surface); background: var(--vert); box-shadow: 0 40px 70px -40px rgba(var(--ombre-teinte), 0.9); } .contact-hero__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 56px 22px 20px; border-radius: 0 0 var(--r-surface) var(--r-surface); background: linear-gradient(to top, rgba(9, 24, 15, 0.88), rgba(9, 24, 15, 0)); color: var(--creme); } .contact-hero__photo figcaption b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.2; } .contact-hero__photo figcaption span { font-size: 0.9rem; color: var(--creme-doux); } .sec-formulaire_contact.contact-form { --champ-fond: #fcfbf7; --champ-bord: #8c866f; --champ-bord-survol: #4b4738; --champ-placeholder: #6b6755; --champ-erreur: #b42318; --retour-ok-fond: #e3f2e8; --retour-ok-texte: #14532d; --retour-erreur-fond: #fde8e6; --retour-erreur-texte: #8a1c14; margin-top: calc(-1 * var(--chevauche)); position: relative; z-index: 2; padding-block: 0 var(--section); background: linear-gradient(to bottom, transparent var(--chevauche), var(--creme) var(--chevauche)); } .sec-formulaire_contact.contact-form .grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .sec-formulaire_contact.contact-form .carte { background: #fff; border: 1px solid var(--sable); border-radius: var(--r-surface); padding: clamp(26px, 3.6vw, 52px); box-shadow: 0 44px 64px -48px rgba(var(--ombre-teinte), 0.5), 0 10px 24px -18px rgba(var(--ombre-teinte), 0.24); } .sec-formulaire_contact.contact-form .carte-tete h2 { font-size: clamp(1.85rem, 1.25rem + 1.8vw, 2.6rem); line-height: 1.08; text-wrap: balance; } .sec-formulaire_contact.contact-form .carte-tete p { margin-top: 12px; max-width: 34em; font-size: 1.025rem; } .sec-formulaire_contact.contact-form .formulaire { gap: 24px; margin-top: clamp(24px, 3vw, 36px); } .sec-formulaire_contact.contact-form .formulaire .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .sec-formulaire_contact.contact-form .formulaire .ligne { gap: 9px; align-content: start; } .sec-formulaire_contact.contact-form .formulaire label { font-size: 0.925rem; font-weight: 600; letter-spacing: 0.005em; color: var(--encre); } .sec-formulaire_contact.contact-form .formulaire .req { color: var(--or-sombre); font-weight: 700; margin-left: 2px; } .sec-formulaire_contact.contact-form .formulaire input, .sec-formulaire_contact.contact-form .formulaire select, .sec-formulaire_contact.contact-form .formulaire textarea { min-height: 54px; padding: 14px 16px; font-size: 1.02rem; color: var(--encre); background-color: var(--champ-fond); border: 1.5px solid var(--champ-bord); border-radius: 8px; transition: border-color 180ms, box-shadow 180ms, background-color 180ms; } .sec-formulaire_contact.contact-form .formulaire input::placeholder, .sec-formulaire_contact.contact-form .formulaire textarea::placeholder { color: var(--champ-placeholder); opacity: 1; } .sec-formulaire_contact.contact-form .formulaire input:hover, .sec-formulaire_contact.contact-form .formulaire select:hover, .sec-formulaire_contact.contact-form .formulaire textarea:hover { border-color: var(--champ-bord-survol); } .sec-formulaire_contact.contact-form .formulaire input:focus, .sec-formulaire_contact.contact-form .formulaire select:focus, .sec-formulaire_contact.contact-form .formulaire textarea:focus { outline: 0; background-color: #fff; border-color: var(--vert); box-shadow: 0 0 0 4px rgba(201, 169, 74, 0.42); } .sec-formulaire_contact.contact-form .formulaire textarea { min-height: 170px; line-height: 1.55; resize: vertical; } .sec-formulaire_contact.contact-form .formulaire select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23173f25'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; } .sec-formulaire_contact.contact-form .formulaire input[aria-invalid='true'], .sec-formulaire_contact.contact-form .formulaire textarea[aria-invalid='true'] { border-color: var(--champ-erreur); background-color: #fff8f7; } .sec-formulaire_contact.contact-form .formulaire input[aria-invalid='true']:focus, .sec-formulaire_contact.contact-form .formulaire textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.22); } .sec-formulaire_contact.contact-form .formulaire .msg { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; font-weight: 500; line-height: 1.4; color: var(--champ-erreur); } .sec-formulaire_contact.contact-form .formulaire .msg[hidden] { display: none; } .sec-formulaire_contact.contact-form .formulaire .msg::before, .sec-formulaire_contact.contact-form .formulaire .retour::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor; -webkit-mask: var(--pic-alerte) center / contain no-repeat; mask: var(--pic-alerte) center / contain no-repeat; } .sec-formulaire_contact.contact-form .formulaire { --pic-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E"); --pic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E"); } .sec-formulaire_contact.contact-form .formulaire .pied-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 28px; margin-top: 4px; padding-top: 28px; border-top: 1px solid var(--sable); } .sec-formulaire_contact.contact-form .formulaire .pied-form .btn { min-width: 240px; } .sec-formulaire_contact.contact-form .formulaire .pied-form .btn.envoi { opacity: 0.8; cursor: progress; transform: none; } .sec-formulaire_contact.contact-form .formulaire .note { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; } .sec-formulaire_contact.contact-form .formulaire .note .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--or-sombre); } .sec-formulaire_contact.contact-form .formulaire .note .requis { white-space: nowrap; } .sec-formulaire_contact.contact-form .formulaire .retour { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 8px; font-weight: 500; line-height: 1.45; } .sec-formulaire_contact.contact-form .formulaire .retour[hidden] { display: none; } .sec-formulaire_contact.contact-form .formulaire .retour.ok::before { -webkit-mask-image: var(--pic-ok); mask-image: var(--pic-ok); } .sec-formulaire_contact.contact-form .coordonnees { margin-top: var(--chevauche); padding-top: 30px; top: 100px; } .sec-formulaire_contact.contact-form .coordonnees h2 { padding: 0; border: 0; font-size: var(--t-h3); line-height: 1.2; text-wrap: balance; } .sec-formulaire_contact.contact-form .canaux { display: grid; gap: 12px; margin-top: 22px; } .sec-formulaire_contact.contact-form .canal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--sable); border-radius: var(--r-surface); transition: border-color 200ms, transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); } .sec-formulaire_contact.contact-form .canal:hover { border-color: var(--or-sombre); transform: translateY(-2px); box-shadow: 0 22px 34px -26px rgba(var(--ombre-teinte), 0.55); } .sec-formulaire_contact.contact-form .canal:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; } .sec-formulaire_contact.contact-form .canal-pic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--creme-2); color: var(--vert); } .sec-formulaire_contact.contact-form .canal-pic .ic { width: 26px; height: 26px; } .sec-formulaire_contact.contact-form .canal-pic .ig-glyph { width: 32px; height: 32px; } .sec-formulaire_contact.contact-form .canal-corps { display: grid; gap: 2px; min-width: 0; } .sec-formulaire_contact.contact-form .canal-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-2); } .sec-formulaire_contact.contact-form .canal-valeur { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem); line-height: 1.25; color: var(--vert); overflow-wrap: anywhere; } .sec-formulaire_contact.contact-form .canal-texte { font-size: 0.9rem; line-height: 1.4; color: var(--encre-2); } .sec-formulaire_contact.contact-form .canal-fleche { width: 20px; height: 20px; color: var(--or-sombre); transition: transform 240ms var(--ease-out); } .sec-formulaire_contact.contact-form .canal:hover .canal-fleche { transform: translate(2px, -2px); } .sec-formulaire_contact.contact-form .presence { margin: 14px 0 0; padding: 24px 26px; display: grid; gap: 22px; background: var(--vert); border-radius: var(--r-surface); } .sec-formulaire_contact.contact-form .presence-ligne { position: relative; padding-left: 40px; } .sec-formulaire_contact.contact-form .presence-ligne .ic { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; color: var(--or-clair); } .sec-formulaire_contact.contact-form .coordonnees .presence dt { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--creme-doux); } .sec-formulaire_contact.contact-form .coordonnees .presence dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--creme); } .sec-formulaire_contact.contact-form .coordonnees .presence dd .note { display: block; margin-top: 4px; font-family: var(--f-text); font-weight: 400; font-size: 0.925rem; color: var(--creme-doux); } .sec-formulaire_contact.contact-form .coordonnees .eleve { margin-top: 20px; } .sec-faq .grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 7vw, 112px); } .sec-faq .entete { gap: 20px; align-content: start; } .sec-faq .entete > p:not(.eye) { max-width: 26em; } .sec-faq .entete .btn { justify-self: start; margin-top: 6px; } .sec-faq .questions { gap: 12px; border-bottom: 0; } .sec-faq .question { border: 1px solid var(--sable); border-radius: var(--r-surface); background: transparent; transition: background-color 260ms, border-color 260ms, box-shadow 320ms var(--ease-out); } .sec-faq .question:hover { border-color: rgba(127, 100, 23, 0.55); } .sec-faq .question[open] { background: #fff; border-color: rgba(127, 100, 23, 0.45); box-shadow: 0 26px 40px -32px rgba(var(--ombre-teinte), 0.42); } .sec-faq .question summary { padding: 22px 24px; gap: 20px; border-radius: var(--r-surface); } .sec-faq .question summary:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; } .sec-faq .question summary h3 { font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem); line-height: 1.25; } .sec-faq .question summary:hover h3 { color: var(--vert); } .sec-faq .chevron { position: relative; width: 40px; height: 40px; border: 1.5px solid var(--sable); border-radius: 50%; color: var(--or-sombre); transition: background-color 240ms, border-color 240ms, color 240ms; } .sec-faq .chevron::before, .sec-faq .chevron::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border: 0; border-radius: 2px; background: currentColor; transform: none; transition: transform 300ms var(--ease-out), opacity 200ms; } .sec-faq .chevron::after { transform: rotate(90deg); } .sec-faq .question summary:hover .chevron { border-color: var(--or-sombre); } .sec-faq .question[open] .chevron { background: var(--vert); border-color: var(--vert); color: var(--or-clair); } .sec-faq .question[open] .chevron::before { transform: none; } .sec-faq .question[open] .chevron::after { transform: rotate(0deg); opacity: 0; } .sec-faq .reponse { padding: 0 72px 28px 24px; max-width: none; } .sec-faq .reponse p { max-width: var(--lecture); } @supports (interpolate-size: allow-keywords) and selector(::details-content) { .sec-faq .question { interpolate-size: allow-keywords; } .sec-faq .question::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete; } .sec-faq .question[open]::details-content { block-size: auto; } } @media (max-width: 900px) { .contact { --chevauche: 44px; } .contact-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 36px; } .contact-hero__texte { max-width: none; } .contact-hero__photo { justify-self: stretch; width: 100%; } .contact-hero__photo::before { inset: 14px -12px -14px 12px; } .contact-hero__photo figcaption { padding: 48px 16px 16px; } .contact-hero__photo figcaption b { font-size: 1.15rem; } .contact-hero__photo figcaption span { font-size: 0.85rem; } .sec-formulaire_contact.contact-form .grille { grid-template-columns: minmax(0, 1fr); gap: 44px; } .sec-formulaire_contact.contact-form .coordonnees { margin-top: 0; padding-top: 0; position: static; } .sec-faq .grille { grid-template-columns: minmax(0, 1fr); } .sec-faq .reponse { padding-right: 24px; } } @media (max-width: 640px) { .contact-hero__grille { grid-template-columns: minmax(0, 1fr); } .contact-hero__photo img { aspect-ratio: 16 / 11; object-position: 50% 20%; } .contact-hero__photo figcaption { padding: 48px 18px 16px; } .contact-hero__photo figcaption b { font-size: 1.3rem; } .contact-hero__photo figcaption span { font-size: 0.9rem; } .sec-formulaire_contact.contact-form .formulaire select { padding-left: 12px; padding-right: 34px; letter-spacing: -0.026em; text-overflow: ellipsis; background-position: right 11px center; background-size: 14px; } .sec-formulaire_contact.contact-form .formulaire .duo { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sec-formulaire_contact.contact-form .formulaire .pied-form { grid-template-columns: minmax(0, 1fr); } .sec-formulaire_contact.contact-form .formulaire .pied-form .btn { width: 100%; min-width: 0; } .sec-formulaire_contact.contact-form .carte { padding: 24px 18px 28px; } .sec-formulaire_contact.contact-form .canal { gap: 14px; padding: 14px; } .sec-formulaire_contact.contact-form .canal-pic { width: 48px; height: 48px; } .sec-formulaire_contact.contact-form .presence { padding: 22px 20px; } .sec-faq .question summary { padding: 18px 16px; gap: 14px; } .sec-faq .chevron { width: 36px; height: 36px; } .sec-faq .reponse { padding: 0 16px 22px; } } @media (prefers-reduced-motion: reduce) { .sec-formulaire_contact.contact-form .canal, .sec-formulaire_contact.contact-form .canal-fleche, .sec-formulaire_contact.contact-form .formulaire input, .sec-formulaire_contact.contact-form .formulaire select, .sec-formulaire_contact.contact-form .formulaire textarea, .sec-faq .question, .sec-faq .chevron, .sec-faq .chevron::before, .sec-faq .chevron::after { transition: none; } .sec-formulaire_contact.contact-form .canal:hover, .sec-formulaire_contact.contact-form .canal:hover .canal-fleche { transform: none; } .sec-faq .question::details-content { transition: none; } } .ig-glyph { display: block; flex: none; border-radius: 28%; box-shadow: 0 6px 18px rgba(200, 55, 171, 0.25); } .instagram .compte { gap: 14px; font-size: 1.05rem; letter-spacing: 0.01em; } .instagram .compte:hover span { color: var(--or-clair); } .pied .insta { gap: 12px; } .pied .insta:hover .ig-glyph { transform: translateY(-1px); } .pied .insta .ig-glyph { transition: transform 160ms var(--ease-out, ease); } @media (prefers-reduced-motion: reduce) { .pied .insta .ig-glyph { transition: none; } } .sec-intro_programme.avec-image { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(120px, 14vw, 200px); } .sec-intro_programme .fond { position: absolute; inset: 0; z-index: -1; } .sec-intro_programme .fond picture { display: block; width: 100%; height: 100%; } .sec-intro_programme .fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .sec-intro_programme .fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 34, 22, 0.94) 0%, rgba(13, 34, 22, 0.80) 42%, rgba(13, 34, 22, 0.50) 100%), linear-gradient(180deg, rgba(13, 34, 22, 0.35) 0%, rgba(13, 34, 22, 0) 30%, rgba(13, 34, 22, 0.85) 92%, var(--vert-nuit) 100%); } .sec-intro_programme.avec-image .phases { background: rgba(13, 34, 22, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6px 22px; border-radius: var(--r-media); } @media (max-width: 900px) { .sec-intro_programme .fond::after { background: linear-gradient(180deg, rgba(13, 34, 22, 0.70) 0%, rgba(13, 34, 22, 0.88) 55%, var(--vert-nuit) 100%); } } .sec-trous .tete.avec-image { gap: 22px; } .sec-trous .texte-phase { display: grid; gap: 14px; } .sec-trous .visuel-phase { margin: 0; } .sec-trous .visuel-phase img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media); box-shadow: 0 18px 40px rgba(13, 34, 22, 0.16); } @media (max-width: 900px) { .sec-trous .visuel-phase img { aspect-ratio: 16 / 9; } } .sec-offres .carte.avec-image { overflow: hidden; } .sec-offres .visuel { margin: calc(-1 * var(--marge)) calc(-1 * var(--marge)) 26px; } .sec-offres .carte.principale .visuel { margin: calc(-1 * (var(--marge) - 1px)) calc(-1 * (var(--marge) - 1px)) 26px; } .sec-offres .visuel img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms var(--ease-out); } .sec-offres .carte:hover .visuel img { transform: scale(1.03); } .sec-offres .carte.principale .etiquette { margin-top: 2px; } @supports (grid-template-rows: subgrid) { @media (min-width: 760px) { .sec-offres .grille:has(.visuel) .carte { grid-row: span 7; } .sec-offres .grille:has(.visuel) .visuel { grid-row: 1; } .sec-offres .grille:has(.visuel) .etiquette { grid-row: 2; } .sec-offres .grille:has(.visuel) .nom { grid-row: 3; } .sec-offres .grille:has(.visuel) .accroche { grid-row: 4; } .sec-offres .grille:has(.visuel) .prix { grid-row: 5; } .sec-offres .grille:has(.visuel) .inclus { grid-row: 6; } .sec-offres .grille:has(.visuel) .carte > .btn { grid-row: 7; } } } @media (prefers-reduced-motion: reduce) { .sec-offres .visuel img { transition: none; } .sec-offres .carte:hover .visuel img { transform: none; } } @media (min-width: 760px) { .sec-offres .visuel img { aspect-ratio: auto; height: clamp(210px, 17vw, 250px); } } @media (min-width: 901px) { .sec-intro_programme .fond::after { background: linear-gradient(90deg, rgba(13, 34, 22, 0.94) 0%, rgba(13, 34, 22, 0.78) 40%, rgba(13, 34, 22, 0.38) 100%), linear-gradient(180deg, rgba(13, 34, 22, 0.30) 0%, rgba(13, 34, 22, 0) 30%, rgba(13, 34, 22, 0.80) 92%, var(--vert-nuit) 100%); } } .sec-hero .photo picture { display: block; width: 100%; height: 100%; } @media (max-width: 900px) { .sec-hero .photo img.large { display: block; object-position: 50% 18%; } } .sec-hero .reveal { opacity: 1; transform: none; } @media (min-width: 901px) { .sec-hero h1 { max-width: 14.5ch; } .sec-hero .photo img.large { object-position: 78% 30%; } } @media (max-width: 900px) and (min-width: 561px) { .sec-hero .photo { aspect-ratio: auto; width: 100%; height: min(72vh, 720px); max-height: none; } } .sec-hero .chiffres li:first-child { padding-left: max(var(--gouttiere), calc((100vw - var(--contenu)) / 2)); } .instagram .rail { scroll-padding-inline: max(var(--gouttiere), calc((100vw - var(--contenu)) / 2)); } .instagram .carte.photo .media { aspect-ratio: 9 / 16; } .instagram .carte .media { position: relative; } .instagram .carte .media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 14, 9, 0) 45%, rgba(5, 14, 9, 0.82) 100%); } .sec-video .cadre img { object-position: 30% 22%; } @media (max-width: 900px) and (min-width: 561px) { .sec-video .cadre { aspect-ratio: 16 / 9; } } .sec-video-dialog { overflow: visible; } .sec-video-dialog .cadre { padding-top: 56px; } .sec-video-dialog .fermer { top: 0; right: 0; display: grid; place-items: center; background: rgba(5, 14, 9, 0.6); } header.entete .burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .pied nav a, .pied .legal a { display: inline-flex; align-items: center; min-height: 44px; } .pied .insta { min-height: 44px; } @media (min-width: 901px) { .sec-hero h1 { max-width: 11.5ch; } .sec-hero .corps { max-width: 620px; } } @media (min-width: 901px) and (max-height: 820px) { .sec-hero h1 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.6rem); } .sec-hero .corps { padding-block: 48px 28px; gap: 18px; } .sec-hero .t-lead { font-size: 1.02rem; } } .sec-trous .apercu-parcours { display: grid; gap: 18px; } .sec-trous .apercu-parcours .carte-parcours { width: 100%; max-width: 1100px; margin-inline: auto; } @media (max-width: 640px) { .sec-trous .apercu-parcours { display: none; } } .sec-frise.avec-images .grille { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); } .sec-frise.avec-images .entete { position: static; max-width: 760px; } .sec-frise.avec-images .etapes { max-width: none; position: relative; } .sec-frise.avec-images .etapes::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--sable); } .sec-frise.avec-images .etape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 8vw, 128px); align-items: center; padding: 0 0 clamp(56px, 7vw, 104px); } .sec-frise.avec-images .etape:last-child { padding-bottom: 0; } .sec-frise.avec-images .etape::before { display: none; } .sec-frise.avec-images .puce { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; box-shadow: 0 0 0 7px var(--creme-2); } .sec-frise.avec-images .etape:nth-child(even) .visuel-etape { order: 2; } .sec-frise.avec-images .etape:not(.a-image) .texte-etape { grid-column: 1 / -1; max-width: 62ch; } .sec-frise .visuel-etape { margin: 0; } .sec-frise .visuel-etape img { display: block; width: 100%; aspect-ratio: 13 / 9; object-fit: cover; border-radius: var(--r-media); box-shadow: 0 24px 50px rgba(13, 34, 22, 0.16); } .sec-frise .texte-etape { display: grid; gap: 10px; max-width: 46ch; } .sec-frise.avec-images .texte-etape .t-h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); } @media (max-width: 900px) { .sec-frise.avec-images .etapes::before { left: 7px; margin-left: 0; } .sec-frise.avec-images .etape { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding-left: 44px; } .sec-frise.avec-images .puce { left: 0; top: 4px; transform: none; } .sec-frise.avec-images .etape:nth-child(even) .visuel-etape { order: 0; } } .sec-citation.avec-photo .contenu { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .sec-citation.avec-photo .fond { order: 2; position: relative; border-radius: var(--r-media); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28); } .sec-citation.avec-photo .fond img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; } .sec-citation.avec-photo .fond::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(227, 201, 120, 0.25); border-radius: inherit; } @media (max-width: 900px) { .sec-citation.avec-photo .contenu { grid-template-columns: minmax(0, 1fr); } .sec-citation.avec-photo .fond { order: 0; max-width: 420px; } .sec-citation.avec-photo .fond img { aspect-ratio: 4 / 4.2; } } .sec-palmares .corps-palmares { display: block; } .sec-palmares.avec-image .corps-palmares { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; } .sec-palmares .visuel-palmares { margin: 0; } .sec-palmares .visuel-palmares img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: var(--r-media); box-shadow: 0 24px 50px rgba(13, 34, 22, 0.16); } .sec-palmares.avec-image .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .sec-palmares.avec-image .corps-palmares { grid-template-columns: minmax(0, 1fr); } .sec-palmares .visuel-palmares img { min-height: 0; height: auto; aspect-ratio: 16 / 9; } } @media (max-width: 560px) { .sec-palmares.avec-image .grille { grid-template-columns: minmax(0, 1fr); } } .instagram.sec-instagram { background: radial-gradient(1200px 700px at 85% 30%, #24603a 0%, var(--vert) 62%); } .sec-video + .sec-probleme { padding-top: clamp(40px, 4vw, 64px); } .sec-fondateur blockquote { font-size: clamp(1.45rem, 1.1rem + 1vw, 2.05rem); max-width: 30ch; } .pied .bas { align-items: baseline; } .contact-hero__photo { margin-right: 22px; } @media (max-width: 900px) { .contact-hero__photo { margin-right: 12px; } } .sec-trous .trou { --taille-numero: clamp(3rem, 2rem + 2.6vw, 4.5rem); } a.btn-video { text-decoration: none; } .cta-collant { display: none; } @media (max-width: 768px) { .cta-collant { display: block; position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 34, 22, 0.96); border-top: 1px solid var(--filet); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform 0.3s ease; } .cta-collant:not(.visible) { visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; } .cta-collant.visible { transform: none; visibility: visible; transition: transform 0.3s ease; } .cta-collant .btn { width: 100%; justify-content: center; min-height: 48px; } body.avec-cta-collant .pied { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .cta-collant { transition: none; } } .sec-intro_programme .offre-rapide { margin-top: clamp(22px, 3vw, 32px); } .sec-intro_programme .ligne-offre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; color: var(--creme-doux); font-size: 0.95rem; letter-spacing: 0.02em; } .sec-intro_programme .ligne-offre strong { font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; color: var(--or-clair); letter-spacing: -0.01em; } .sec-intro_programme .offre-rapide .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .sec-intro_programme .lien-offres { gap: 6px; color: var(--creme); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--filet); min-height: 44px; display: inline-flex; align-items: center; } .sec-intro_programme .lien-offres:hover { text-decoration-color: var(--or-clair); } .sec-intro_programme .ligne-offre .details { white-space: nowrap; } .sec-intro_programme .btn-or, .sec-intro_programme .btn-or .fleche { color: var(--encre); } @media (max-width: 380px) { .cp-lien { padding-right: 6px; } .cp-lien::after { display: block; padding-left: 6px; font-size: 0.95rem; } } .cp-zone-plage, .sec-intro_programme .plage { font-size: 0.75rem; } .sec-formulaire_contact.contact-form .canal-nom, .sec-formulaire_contact.contact-form .coordonnees .presence dt { font-size: 0.75rem; } @media (max-width: 768px) { header.entete .logo { min-height: 44px; display: flex; align-items: center; } .sec-instagram .compte { min-height: 44px; display: inline-flex; align-items: center; } } .sec-probleme blockquote, .sec-citation blockquote, .sec-fondateur blockquote, .t-h2, .t-h1 { text-wrap: balance; } @media (max-width: 480px) { .sec-hero .eye { letter-spacing: 0.1em; } } .sec-hero .credit { bottom: 160px; } .insecable { white-space: nowrap; } @media (max-width: 768px) { .pied .logo { min-height: 44px; display: flex; align-items: center; } } .sec-podcast { background: radial-gradient(1100px 620px at 88% 20%, #24603a 0%, var(--vert) 64%); } .sec-podcast .grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 88px); align-items: center; } .sec-podcast .t-lead { max-width: 52ch; margin-top: clamp(16px, 2vw, 22px); } .sec-podcast .ecoute { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; } .sec-podcast .ecoute .btn { min-height: 44px; } .sec-podcast .carte-podcast { position: relative; padding: clamp(26px, 3.4vw, 40px); border: 1px solid var(--filet); border-top: 2px solid var(--or); border-radius: var(--r-surface, 14px); background: rgba(9, 24, 15, 0.42); } .sec-podcast .micro { width: 44px; height: 44px; color: var(--or-clair); margin-bottom: 18px; } .sec-podcast .chiffres-podcast { margin: 0; display: grid; gap: 18px; } .sec-podcast .chiffres-podcast div { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--filet); } .sec-podcast .chiffres-podcast div:first-child { padding-top: 0; border-top: 0; } .sec-podcast .chiffres-podcast dt { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); line-height: 1; color: var(--or-clair); font-weight: 500; } .sec-podcast .chiffres-podcast dd { margin: 0; color: var(--creme-doux); font-size: 0.98rem; } .sec-podcast .source { margin: 18px 0 0; color: var(--creme-doux); opacity: 0.8; font-size: 0.8rem; } @media (max-width: 900px) { .sec-podcast .grille { grid-template-columns: minmax(0, 1fr); } } .sec-palmares .album-palmares { margin-top: clamp(48px, 6vw, 80px); } .sec-palmares .album-palmares .eye { margin-bottom: 20px; } .sec-palmares .tirages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); } .sec-palmares .tirage figure { margin: 0; padding: 10px 10px 16px; background: #fff; border: 1px solid var(--sable); box-shadow: 0 18px 40px rgba(13, 34, 22, 0.12); transition: transform 0.35s ease, box-shadow 0.35s ease; } .sec-palmares .tirage:nth-child(3n+1) figure { transform: rotate(-1.2deg); } .sec-palmares .tirage:nth-child(3n+2) figure { transform: rotate(0.8deg); } .sec-palmares .tirage:nth-child(3n) figure { transform: rotate(-0.6deg); } .sec-palmares .tirage figure:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 24px 50px rgba(13, 34, 22, 0.18); } .sec-palmares .tirage img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.82) contrast(1.03); } .sec-palmares .tirage figcaption { display: grid; gap: 2px; padding: 12px 4px 0; } .sec-palmares .tirage .annee { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--or-sombre); } .sec-palmares .tirage .nom { font-size: 1.12rem; line-height: 1.25; color: var(--encre); } .sec-palmares .tirage .detail { font-size: 0.9rem; color: var(--encre-2); } @media (max-width: 760px) { .sec-palmares .tirages { grid-template-columns: minmax(0, 1fr); max-width: 420px; } .sec-palmares .tirage figure { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .sec-palmares .tirage figure { transition: none; } } @media (max-width: 900px) { .sec-palmares .visuel-palmares img { aspect-ratio: 4 / 3; object-position: 50% 22%; } } .sec-offres .prix .precision { display: block; margin-top: 8px; font-family: var(--f-text); font-size: 0.9rem; line-height: 1.45; letter-spacing: 0; color: var(--or-sombre); font-weight: 500; } .sec-intro_programme .precision-offre { margin: -6px 0 18px; color: var(--or-clair); font-size: 0.95rem; } .sec-offres .prix .precision { white-space: normal; } .sec-offres .prix .prefixe { display: block; margin-bottom: 4px; font-family: var(--f-text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-sombre); white-space: normal; } .sec-intro_apropos .histoire { max-width: 40ch; color: var(--creme); } .sec-intro_apropos .roles-bloc { grid-area: roles; display: grid; gap: 14px; } .sec-intro_apropos .roles-bloc .eye { color: var(--or-clair); } .sec-intro_apropos .roles { display: flex; flex-wrap: wrap; gap: 8px 10px; border-bottom: 0; } .sec-intro_apropos .roles li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--filet); border-top: 1px solid var(--filet); border-radius: 999px; font-size: 0.9rem; line-height: 1.35; color: var(--creme-doux); } .sec-intro_apropos .roles li::before { width: 5px; height: 5px; margin-top: 0; } .sec-intro_apropos .roles-bloc .roles { grid-area: auto; } .sec-presse .articles { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; } .sec-presse .article { display: grid; gap: 10px; height: 100%; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--sable); border-radius: 12px; color: var(--encre); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sec-presse .article:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13, 34, 22, 0.1); border-color: var(--or); } .sec-presse .media { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-sombre); } .sec-presse .media .date { letter-spacing: 0.06em; text-transform: none; color: var(--encre-2); font-weight: 500; } .sec-presse .titre-article { font-size: 1.15rem; line-height: 1.3; } .sec-presse .lire { margin-top: auto; font-size: 0.9rem; font-weight: 600; color: var(--vert-2); } .sec-partenaires .logos { list-style: none; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; align-items: center; } .sec-partenaires .logos li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 18px 22px; background: #fff; border: 1px solid var(--sable); border-radius: 12px; } .sec-partenaires .logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 60px; } .sec-partenaires .logos img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.78; transition: filter 0.25s ease, opacity 0.25s ease; } .sec-partenaires .logos li:hover img { filter: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .sec-presse .article, .sec-partenaires .logos img { transition: none; } } .sec-podcast .pochette { display: block; width: 120px; height: 120px; border-radius: 10px; margin-bottom: 22px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); } .sec-partenaires .logos li { min-height: 110px; } .sec-partenaires .logos img { max-height: 70px; filter: none; opacity: 0.92; border-radius: 6px; } .sec-partenaires .logos li:hover img { opacity: 1; } .sec-palmares .corps-case { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; flex: 1 1 auto; } .sec-palmares .grille.avec-vignettes { gap: clamp(14px, 1.6vw, 20px); border: 0; } .sec-palmares .grille.avec-vignettes .case { padding: 0; gap: 0; min-height: 0; justify-content: flex-start; overflow: hidden; background: #fff; border: 1px solid var(--sable); border-radius: 12px; } .sec-palmares .vignette-case { margin: 0; overflow: hidden; background: var(--sable); } .sec-palmares .vignette-case img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; } .sec-palmares .grille.avec-vignettes .case:hover .vignette-case img { transform: scale(1.04); } .sec-palmares .grille.avec-vignettes .corps-case { gap: 14px; padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px); } .sec-palmares .grille.avec-vignettes .nombre { font-size: clamp(2.8rem, 2rem + 2.2vw, 4rem); } .sec-palmares .grille.avec-vignettes .texte { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.25; } @media (min-width: 901px) { .sec-palmares.avec-image .corps-palmares { align-items: start; } .sec-palmares.avec-image .visuel-palmares { position: sticky; top: 96px; } .sec-palmares.avec-image .visuel-palmares img { height: auto; min-height: 0; aspect-ratio: 3 / 4; } } @media (max-width: 560px) { .sec-palmares .grille.avec-vignettes { gap: 12px; } .sec-palmares .grille.avec-vignettes .case { flex-direction: row; align-items: stretch; } .sec-palmares .grille.avec-vignettes .vignette-case { flex: 0 0 38%; } .sec-palmares .grille.avec-vignettes .vignette-case img { height: 100%; min-height: 124px; aspect-ratio: auto; } .sec-palmares .grille.avec-vignettes .corps-case { justify-content: center; gap: 8px; padding: 16px 16px 16px 18px; } .sec-palmares .grille.avec-vignettes .nombre { font-size: 2.5rem; } .sec-palmares .grille.avec-vignettes .texte { font-size: 1.08rem; } } @media (prefers-reduced-motion: reduce) { .sec-palmares .vignette-case img { transition: none; } } .sec-podcast .ecoute { gap: 10px; } .sec-podcast .plateforme { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 14px; border-radius: 999px; background: #fff; color: var(--encre); font-weight: 600; font-size: 0.98rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sec-podcast .plateforme:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26); } .sec-podcast .plateforme:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; } .sec-podcast .logo-plateforme { display: block; width: 24px; height: 24px; flex: 0 0 24px; } @media (max-width: 560px) { .sec-podcast .ecoute { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sec-podcast .plateforme { justify-content: flex-start; width: 100%; font-size: 0.92rem; padding-inline: 12px 10px; } } @media (prefers-reduced-motion: reduce) { .sec-podcast .plateforme { transition: none; } } .sec-presse .haut-article { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; padding-bottom: 12px; border-bottom: 1px solid var(--sable); } .sec-presse .logo-media { display: block; width: auto; height: 34px; max-width: 120px; object-fit: contain; object-position: left center; } .sec-presse .haut-article .date { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--encre-2); white-space: nowrap; } .sec-presse .article { grid-template-rows: auto 1fr auto; } .sec-presse .titre-article { align-self: start; } .logo-whatsapp { display: inline-block; flex: none; vertical-align: middle; } .sec-formulaire_contact.contact-form .canal-wa .canal-pic { background: #e9f9ef; } .sec-prevente .via-whatsapp { display: inline-flex; align-items: center; gap: 8px; } .sec-prevente .via-whatsapp .logo-whatsapp { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } .sec-prevente .btn-whatsapp { gap: 12px; } .sec-prevente .puce-whatsapp { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } .sec-formulaire_contact.contact-form .canal-valeur.courriel { overflow-wrap: normal; word-break: normal; } @media (max-width: 560px) { .contact-hero__photo::before { display: none; } } .btn .puce-whatsapp { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .btn.cta .puce-whatsapp, .btn.cta-mobile .puce-whatsapp { width: 22px; height: 22px; } .btn.cta .puce-whatsapp .logo-whatsapp, .btn.cta-mobile .puce-whatsapp .logo-whatsapp { width: 15px; height: 15px; } .sec-prevente .btn-large .puce-whatsapp { width: 32px; height: 32px; margin-left: 0; } .etapes-whatsapp { display: flex; align-items: center; gap: 8px; margin: 12px 0 22px; font-size: 0.92rem; line-height: 1.4; opacity: 0.92; } @media (max-width: 560px) { .contact-hero__photo img { object-position: 50% 6%; } } @media (max-width: 900px) { .sec-hero .voile { inset: 0 0 -2px 0; background: linear-gradient(180deg, rgba(9,24,15,.5) 0%, rgba(9,24,15,0) 24%, rgba(9,24,15,0) 48%, var(--vert-nuit) 93%, var(--vert-nuit) 100%); } } .sec-faq .faq-cta { margin-top: 24px; } .bandeau-prevente { background: var(--or-clair); color: var(--vert-nuit); position: relative; z-index: 60; } .bandeau-prevente .contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding-block: 9px; color: inherit; text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1.35; text-align: center; } .bandeau-prevente .compte { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--vert-nuit); color: var(--or-clair); font-size: 0.8rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .bandeau-prevente .action { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .bandeau-prevente .puce-whatsapp { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; } .bandeau-prevente .puce-whatsapp .logo-whatsapp { width: 15px; height: 15px; } .bandeau-prevente .contenu:hover .action, .bandeau-prevente .contenu:focus-visible .action { text-decoration-thickness: 2px; } .bandeau-prevente .contenu:focus-visible { outline: 2px solid var(--vert-nuit); outline-offset: -4px; } @media (max-width: 560px) { .bandeau-prevente .contenu { font-size: 0.8rem; gap: 4px 10px; padding-block: 8px; } .bandeau-prevente .action { display: none; } } .sec-hero .corps .eye { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 8px 16px; border-radius: 999px; background: rgba(201, 168, 76, 0.18); border: 1px solid rgba(227, 201, 120, 0.55); color: var(--or-clair); text-transform: none; letter-spacing: 0.01em; font-size: 0.98rem; font-weight: 600; line-height: 1.4; } .sec-prevente .compte-prevente { display: inline-block; margin: 14px 0 0; padding: 4px 14px; border-radius: 999px; background: var(--or-clair); color: var(--vert-nuit); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; } .sec-prevente.prevente-haut { padding-block: clamp(36px, 5vw, 56px); border-top: 1px solid var(--filet); } .sec-intro_programme .nom-offre { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-doux); } .sec-intro_programme .ligne-offre .details { white-space: normal; } .sec-temoignages .entete-defilement { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; } .sec-temoignages .entete-defilement .entete-section { margin-bottom: 0; } .sec-temoignages .fenetre-defilement { --fondu: clamp(18px, 6vw, 110px); margin: clamp(20px, 3vw, 36px) 0 -30px; padding: 16px 0 46px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%); } .sec-temoignages .fenetre-defilement::-webkit-scrollbar { display: none; } .sec-temoignages .avis { list-style: none; margin: 0; display: flex; align-items: stretch; gap: 22px; width: max-content; padding: 0 max(var(--gouttiere), calc((100% - var(--contenu)) / 2)); } .sec-temoignages .un-avis { flex: none; margin: 0; width: clamp(300px, calc(64px + var(--mots, 50) * 6.4px), 470px); scroll-snap-align: start; } .sec-temoignages .un-avis.en-avant { width: clamp(400px, calc(90px + var(--mots, 50) * 8.2px), 620px); } .sec-temoignages .un-avis > figure { height: 100%; } .sec-temoignages figure { --avis-texte: #2b2a24; --avis-nom: var(--vert-nuit); --avis-doux: var(--encre-2); --avis-filet: rgba(201, 169, 74, 0.26); position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(26px, 2.4vw, 32px) clamp(24px, 2.2vw, 30px) clamp(22px, 2vw, 26px); display: flex; flex-direction: column; gap: 14px; background: radial-gradient(130% 60% at 0% 0%, rgba(227, 201, 120, 0.16), transparent 60%), linear-gradient(180deg, #fffefa 0%, #fbf8ef 100%); border: 1px solid rgba(201, 169, 74, 0.38); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(13, 34, 22, 0.05), 0 18px 40px -24px rgba(13, 34, 22, 0.3); transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out), border-color 600ms var(--ease-out); } .sec-temoignages figure::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid rgba(201, 169, 74, 0.2); border-radius: 9px; pointer-events: none; } .sec-temoignages .guillemet { display: block; height: 0.5em; margin: 0 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 4.4rem; line-height: 0.92; color: var(--or); } .sec-temoignages blockquote { margin: 0; flex: 1 1 auto; } .sec-temoignages blockquote p { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.03rem, 0.98rem + 0.2vw, 1.1rem); line-height: 1.6; color: var(--avis-texte); hanging-punctuation: first; } .sec-temoignages figcaption { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--avis-filet); } .sec-temoignages .monogramme { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--vert-nuit); color: var(--or-clair); font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1; box-shadow: 0 0 0 2px #fdfbf5, 0 0 0 3px rgba(201, 169, 74, 0.6); } .sec-temoignages .identite { display: grid; gap: 3px; min-width: 0; } .sec-temoignages .identite b { font-family: var(--f-display); font-weight: 500; font-size: 1.16rem; line-height: 1.15; color: var(--avis-nom); } .sec-temoignages .niveau { position: absolute; top: clamp(20px, 2vw, 24px); right: clamp(20px, 2vw, 24px); display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 60px; padding: 8px 10px 7px; border: 1px solid rgba(127, 100, 23, 0.32); border-radius: 10px; background: rgba(255, 255, 255, 0.75); text-align: center; line-height: 1; } .sec-temoignages .niveau-libelle { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-sombre); } .sec-temoignages .niveau-valeur { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; color: var(--vert-nuit); font-variant-numeric: lining-nums tabular-nums; } .sec-temoignages .niveau-pro { background: var(--vert-nuit); border-color: var(--vert-nuit); } .sec-temoignages .niveau-pro .niveau-libelle { color: var(--or-clair); } .sec-temoignages .niveau-pro .niveau-valeur { font-style: italic; color: var(--creme); } .sec-temoignages .en-avant figure { --avis-texte: rgba(246, 243, 234, 0.93); --avis-nom: var(--creme); --avis-doux: var(--or-clair); --avis-filet: rgba(227, 201, 120, 0.24); background: radial-gradient(120% 70% at 0% 0%, rgba(227, 201, 120, 0.2), transparent 58%), linear-gradient(165deg, var(--vert) 0%, var(--vert-nuit) 70%); border-color: rgba(227, 201, 120, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -24px rgba(9, 24, 15, 0.65); } .sec-temoignages .en-avant figure::before { border-color: rgba(227, 201, 120, 0.2); } .sec-temoignages .en-avant .guillemet { color: var(--or-clair); } @media (min-width: 701px) { .sec-temoignages .en-avant figure { padding: clamp(28px, 2.8vw, 36px) clamp(28px, 3vw, 40px) clamp(22px, 2.2vw, 28px); } .sec-temoignages .en-avant .guillemet { font-size: 5.2rem; } .sec-temoignages .en-avant blockquote p { font-size: clamp(1.18rem, 1rem + 0.35vw, 1.34rem); line-height: 1.5; letter-spacing: -0.005em; } } .sec-temoignages .en-avant .monogramme { background: var(--or); color: var(--vert-nuit); box-shadow: 0 0 0 2px var(--vert-nuit), 0 0 0 3px rgba(227, 201, 120, 0.65); } .sec-temoignages .en-avant .niveau { background: rgba(246, 243, 234, 0.06); border-color: rgba(227, 201, 120, 0.45); } .sec-temoignages .en-avant .niveau-libelle { color: var(--or-clair); } .sec-temoignages .en-avant .niveau-valeur { color: var(--creme); } .sec-temoignages .en-avant .niveau-pro { background: var(--or); border-color: var(--or); } .sec-temoignages .en-avant .niveau-pro .niveau-libelle, .sec-temoignages .en-avant .niveau-pro .niveau-valeur { color: var(--vert-nuit); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .sec-temoignages figure:hover { transform: translateY(-4px); border-color: rgba(201, 169, 74, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(13, 34, 22, 0.05), 0 30px 54px -26px rgba(13, 34, 22, 0.4); } .sec-temoignages .en-avant figure:hover { border-color: rgba(227, 201, 120, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 60px -26px rgba(9, 24, 15, 0.75); } } @media (max-width: 700px) { .sec-temoignages .fenetre-defilement { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%); } .sec-temoignages .avis { gap: 14px; } .sec-temoignages .un-avis, .sec-temoignages .un-avis.en-avant { width: min(84vw, 380px); } .sec-temoignages .avis { align-items: flex-start; } .sec-temoignages .un-avis > figure { height: auto; } .sec-temoignages .guillemet { font-size: 3.8rem; } } .commandes-defilement { display: flex; gap: 10px; flex: none; } .commandes-defilement .cmd-defilement { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; transition: background-color 220ms, border-color 220ms, color 220ms, transform 220ms var(--ease-out); } .commandes-defilement svg { width: 18px; height: 18px; fill: currentColor; } .commandes-defilement .cmd-pause svg { width: 15px; height: 15px; } .commandes-defilement .cmd-defilement:active { transform: scale(0.94); } .commandes-defilement .cmd-defilement:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; } .commandes-defilement .cmd-pause, .commandes-defilement .ico-lecture { display: none; } .defilement-actif .commandes-defilement .cmd-pause { display: inline-grid; } .defilement-arrete .commandes-defilement .ico-pause { display: none; } .defilement-arrete .commandes-defilement .ico-lecture { display: block; } @media (prefers-reduced-motion: reduce) { .defilement-actif .commandes-defilement .cmd-pause { display: none; } } .defilement-actif [data-defilement-fenetre] { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; } .defilement-actif [data-defilement-piste] { will-change: transform; } @media (pointer: fine) { .defilement-actif [data-defilement-fenetre] { cursor: grab; } .defilement-glisse [data-defilement-fenetre] { cursor: grabbing; } } .defilement-glisse [data-defilement-piste] { -webkit-user-select: none; user-select: none; } .defilement-glisse [data-defilement-piste] a { pointer-events: none; } .sec-temoignages .cmd-defilement { border: 1px solid rgba(127, 100, 23, 0.38); background: #fffdf8; color: var(--vert-nuit); box-shadow: 0 8px 18px -12px rgba(13, 34, 22, 0.45); } @media (hover: hover) { .sec-temoignages .cmd-defilement:hover { background: var(--vert-nuit); border-color: var(--vert-nuit); color: var(--or-clair); } } .sec-temoignages:not(.defilement-actif) .commandes-defilement { visibility: hidden; } .instagram.defilement-actif .piste { --fondu: clamp(18px, 6vw, 110px); margin-block: -18px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%); } .instagram.defilement-actif .rail { overflow: visible; scroll-snap-type: none; width: max-content; margin-block: 0; } @media (max-width: 760px) { .instagram.defilement-actif .commandes { display: flex; } } @media (max-width: 700px) { .instagram.defilement-actif .piste { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%); } } .sec-palmares .tirages { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .sec-palmares .tirages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pied .suivre { display: grid; gap: 12px; justify-items: start; align-content: start; } .pied .suivre .eye { margin: 0; } .sec-formulaire_contact.contact-form .canal-valeur.courriel { white-space: nowrap; font-size: clamp(0.95rem, 0.62rem + 1.5vw, 1.28rem); } @media (max-width: 420px) { .sec-formulaire_contact.contact-form .canal { gap: 12px; padding: 14px 12px; } .sec-formulaire_contact.contact-form .canal-pic { width: 44px; height: 44px; } .sec-formulaire_contact.contact-form .canal-fleche { display: none; } } .sec-formulaire_contact .case-nouvelles { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; } .sec-formulaire_contact .case-nouvelles input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vert); } .sec-formulaire_contact .case-nouvelles label { font-size: 0.92rem; font-weight: 400; line-height: 1.45; color: var(--encre-2); } .sec-formulaire_contact.contact-form .formulaire .case-nouvelles input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; border: 0; background: none; box-shadow: none; accent-color: var(--vert); } .sec-formulaire_contact.contact-form .formulaire .case-nouvelles label { font-size: 0.92rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--encre-2); cursor: pointer; } .sec-formulaire_contact.contact-form .formulaire .case-nouvelles input[type="checkbox"] { color-scheme: light; } .sec-prevente .compte-prevente { justify-self: start; width: fit-content; } .sec-video .lecteur-vertical { position: relative; justify-self: center; width: min(100%, 360px); aspect-ratio: 9 / 16; border-radius: var(--r-media); overflow: hidden; background: var(--vert-nuit); box-shadow: 0 30px 60px rgba(25, 23, 18, 0.22); } .sec-video .lecteur-vertical video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--vert-nuit); } .sec-video .lancer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; background: linear-gradient(0deg, rgba(9, 24, 15, 0.5) 0%, rgba(9, 24, 15, 0) 45%); } .sec-video .lancer .duree { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(13, 34, 22, 0.8); color: var(--creme); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; } .sec-video .lancer:hover .play i, .sec-video .lancer:focus-visible .play i { transform: scale(1.06); background: rgba(201, 169, 74, 0.9); border-color: var(--or); } .sec-video .lancer:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; } .sec-video .lecteur-vertical.en-lecture .lancer { display: none; } .btn-video .duree { font-weight: 400; opacity: 0.8; } @media (max-width: 900px) { .sec-video .lecteur-vertical { width: min(100%, 420px); } } .sec-video-dialog:has(.lecteur-vertical) { width: fit-content; margin: auto; } .sec-video-dialog .lecteur-vertical { width: min(92vw, calc(86vh * 9 / 16)); aspect-ratio: 9 / 16; background: #000; border-radius: var(--r-media); overflow: hidden; } .sec-video-dialog .lecteur-vertical video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; } .instagram .rail { padding-top: 18px; padding-bottom: 26px; margin-top: -18px; margin-bottom: -18px; } .instagram .carte-texte { -webkit-tap-highlight-color: transparent; } .instagram .carte-texte .carte-lien { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 9 / 16; padding: 22px 22px 20px; border-radius: var(--r-media); overflow: hidden; color: var(--creme); background: radial-gradient(130% 62% at 100% 0%, rgba(31, 90, 51, 0.85) 0%, rgba(31, 90, 51, 0) 62%), linear-gradient(168deg, var(--vert-2) 0%, var(--vert) 40%, var(--vert-nuit) 100%); box-shadow: inset 0 0 0 1px rgba(227, 201, 120, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.7); transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out); } .instagram .carte-texte .carte-lien::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--or) 0%, var(--or-clair) 42%, rgba(227, 201, 120, 0) 100%); } .instagram .carte-texte .ct-tete { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 28px; } .instagram .carte-texte .ct-ig { display: inline-flex; color: var(--or-clair); } .instagram .carte-texte .ct-ig svg { width: 22px; height: 22px; } .instagram .carte-texte .ct-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border: 1px solid rgba(227, 201, 120, 0.5); border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-clair); } .instagram .carte-texte .ct-badge svg { width: 14px; height: 14px; } .instagram .carte-texte .ct-epingle { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 0.74rem; font-weight: 500; line-height: 1.2; color: var(--creme-doux); } .instagram .carte-texte .ct-epingle svg { width: 13px; height: 13px; color: var(--or-clair); transform: rotate(35deg); } .instagram .carte-texte .ct-filigrane { position: absolute; z-index: 0; top: 70px; right: -30px; width: 176px; height: 176px; color: var(--or-clair); opacity: 0.085; pointer-events: none; transition: transform 700ms var(--ease-out), opacity 360ms; } .instagram .carte-texte .ct-filigrane svg { width: 100%; height: 100%; stroke-width: 0.9; } .instagram .carte-texte { --ct-titre: clamp(1.45rem, 1.2rem + 0.55vw, 1.72rem); } .instagram .carte-texte .ct-corps { position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; margin-top: auto; padding-bottom: 18px; min-height: calc(2px + 24px + 3 * 1.12 * var(--ct-titre) + 3 * 1.5 * 0.9rem + 18px); } .instagram .carte-texte .ct-filet { display: block; width: 40px; height: 2px; background: var(--or); border-radius: 2px; } .instagram .carte-texte .ct-titre { font-family: var(--f-display); font-weight: 500; font-size: var(--ct-titre); line-height: 1.12; letter-spacing: -0.005em; color: #fff; text-wrap: balance; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .instagram .carte-texte .ct-accroche { font-family: var(--f-text); font-size: 0.9rem; line-height: 1.5; color: var(--creme-doux); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .instagram .carte-texte .ct-voir { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--filet); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; color: var(--or-clair); } .instagram .carte-texte .ct-fleche { display: inline-block; font-style: normal; transition: transform 300ms var(--ease-out); } .instagram .carte-texte .carte-lien:hover, .instagram .carte-texte .carte-lien:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(227, 201, 120, 0.5), 0 24px 40px -18px rgba(0, 0, 0, 0.75); } .instagram .carte-texte .carte-lien:hover .ct-fleche, .instagram .carte-texte .carte-lien:focus-visible .ct-fleche { transform: translateX(7px); } .instagram .carte-texte .carte-lien:hover .ct-filigrane, .instagram .carte-texte .carte-lien:focus-visible .ct-filigrane { opacity: 0.16; transform: translateY(-4px) rotate(-4deg); } .instagram .carte-texte .carte-lien:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 4px; } .instagram .carte .epingle { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(9, 24, 15, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 0.72rem; font-weight: 600; line-height: 1.2; color: var(--creme); } .instagram .carte .epingle svg { width: 13px; height: 13px; color: var(--or-clair); transform: rotate(35deg); } @media (prefers-reduced-motion: reduce) { .instagram .carte-texte .carte-lien, .instagram .carte-texte .ct-fleche, .instagram .carte-texte .ct-filigrane { transition: none; } .instagram .carte-texte .carte-lien:hover, .instagram .carte-texte .carte-lien:focus-visible { transform: none; } .instagram .carte-texte .carte-lien:hover .ct-fleche, .instagram .carte-texte .carte-lien:focus-visible .ct-fleche, .instagram .carte-texte .carte-lien:hover .ct-filigrane, .instagram .carte-texte .carte-lien:focus-visible .ct-filigrane { transform: none; } } .instagram .carte.post { width: clamp(240px, 23vw, 300px); } .instagram .carte.post .post-lien { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: #fff; color: #0c1014; text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, box-shadow 0.25s ease; } .instagram .carte.post .post-lien:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.36); } .instagram .carte.post .post-lien:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; } .instagram .carte.post .post-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .instagram .carte.post .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d62976; } .instagram .carte.post .pseudo { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .instagram .carte.post .epingle-ig, .instagram .carte.post .glyphe-ig { width: 20px; height: 20px; flex: none; color: #0c1014; } .instagram .carte.post .epingle-ig svg, .instagram .carte.post .glyphe-ig svg { width: 100%; height: 100%; display: block; } .instagram .carte.post .media { display: block; position: relative; aspect-ratio: 9 / 16; border-radius: 0; background: #efefef; } .instagram .carte.post .media::after { display: none; } .instagram .carte.post.photo .media { aspect-ratio: 4 / 5; } .instagram .carte.post .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .instagram .carte.post:hover .media img { transform: none; } .instagram .carte.post .type { top: 12px; right: 12px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .instagram .carte.post .lecture-ig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; background: rgba(0, 0, 0, 0.12); } .instagram .carte.post .lecture-ig i { width: 58px; height: 58px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; } .instagram .carte.post .lecture-ig i::after { content: ''; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; } .instagram .carte.post .post-lien:hover .lecture-ig, .instagram .carte.post .post-lien:focus-visible .lecture-ig { opacity: 1; } .instagram .carte.post .post-pied { display: grid; gap: 8px; padding: 10px 12px 14px; } .instagram .carte.post .actions-ig { display: flex; justify-content: space-between; align-items: center; } .instagram .carte.post .actions-ig span { display: flex; gap: 14px; } .instagram .carte.post .actions-ig svg { width: 24px; height: 24px; fill: none; stroke: #0c1014; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .instagram .carte.post .legende-ig { font-size: 0.84rem; line-height: 1.4; color: #0c1014; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .instagram .carte.post .legende-ig b { font-weight: 600; } .instagram .carte.post .voir-ig { font-size: 0.8rem; font-weight: 600; color: #0095f6; } @media (hover: none) { .instagram .carte.post .lecture-ig { opacity: 1; background: none; } } @media (max-width: 720px) { .instagram .carte.post { width: 74vw; max-width: 320px; } } @media (prefers-reduced-motion: reduce) { .instagram .carte.post .post-lien, .instagram .carte.post .lecture-ig { transition: none; } } .bandeau-consentement { position: fixed; z-index: 90; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); width: min(420px, calc(100vw - 24px)); padding: 22px 22px 20px; background: var(--vert-nuit, #0d2216); color: var(--creme, #f6f3ea); border: 1px solid var(--filet, rgba(246, 243, 234, 0.16)); border-top: 2px solid var(--or, #c9a94a); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); font-family: var(--f-text, system-ui, sans-serif); font-size: 0.95rem; line-height: 1.5; } .bandeau-consentement[hidden] { display: none; } .bandeau-consentement .titre-consentement { margin: 0 0 6px; font-family: var(--f-display, Georgia, serif); font-size: 1.25rem; color: var(--creme, #f6f3ea); } .bandeau-consentement .texte-consentement { margin: 0 0 16px; color: var(--creme-doux, rgba(246, 243, 234, 0.78)); } .bandeau-consentement a { color: var(--or-clair, #e3c978); text-underline-offset: 3px; } .bandeau-consentement .actions-consentement { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bandeau-consentement .btn-consentement { min-height: 46px; padding: 10px 14px; border-radius: 8px; cursor: pointer; font: 600 0.95rem/1.2 var(--f-text, system-ui, sans-serif); background: transparent; color: var(--creme, #f6f3ea); border: 1.5px solid var(--or-clair, #e3c978); } .bandeau-consentement .btn-consentement:hover { background: rgba(227, 201, 120, 0.12); } .bandeau-consentement .btn-consentement:focus-visible { outline: 2px solid var(--or-clair, #e3c978); outline-offset: 2px; } @media (max-width: 560px) { .bandeau-consentement { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 14px 14px 12px; font-size: 0.875rem; line-height: 1.45; border-radius: 12px; } .bandeau-consentement .titre-consentement { display: none; } .bandeau-consentement .texte-consentement { margin-bottom: 12px; } .bandeau-consentement .btn-consentement { min-height: 44px; padding: 8px 12px; } } .pied .lien-consentement { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .pied .lien-consentement:hover { text-decoration: underline; text-underline-offset: 3px; }