:root { --accent:#183b75; --green:#a4c66d; --ink:#272b30; --muted:#62666b; --pale:#eef0f2; --line:#e5e7e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:linear-gradient(#dedfe0 0,#f4f4f4 135px,#fff 285px); font:16px/1.7 Arial,"Segoe UI",sans-serif; }
a { color:inherit; }
img { display:block; max-width:100%; }
.container { width:min(1080px,calc(100% - 36px)); margin:auto; }
.skip-link { position:absolute; top:-80px; left:12px; padding:9px 13px; background:#fff; color:var(--accent); z-index:10; }
.skip-link:focus { top:8px; }
.ad-diagnostic { position:fixed; z-index:50; left:12px; bottom:12px; width:min(420px,calc(100vw - 24px)); max-height:70vh; overflow:auto; padding:12px 16px; border:2px solid #183b75; background:#fff; box-shadow:0 10px 30px #0003; color:#172b48; font:13px/1.5 Arial,sans-serif; }
.ad-diagnostic summary { cursor:pointer; font-weight:700; }
.ad-diagnostic p { margin:8px 0 0; }
.site-header { background:transparent; }
.site-header > .ad-container { width:100%; }
.header-inner > .ad-container { width:100%; margin-top:16px; }
.ads-visible .has-ad-rails { display:grid; gap:12px; justify-content:center; }
.ads-visible .has-ad-rails.has-left-rail.has-right-rail { grid-template-columns:minmax(120px,180px) minmax(0,1080px) minmax(120px,180px); }
.ads-visible .has-ad-rails.has-left-rail:not(.has-right-rail) { grid-template-columns:minmax(120px,180px) minmax(0,1080px); }
.ads-visible .has-ad-rails.has-right-rail:not(.has-left-rail) { grid-template-columns:minmax(0,1080px) minmax(120px,180px); }
.main-column { min-width:0; }
.site-content-background .feature-section { background:transparent; }
.ad-rail { min-width:0; padding-top:18px; }
body:not(.ads-visible) .ad-rail { display:none; }
.ad-rail .ad-container { position:sticky; top:12px; padding:10px 0; }
.ad-rail .ad-container .container { width:100%; max-width:none; }
.ad-rail .ad-container + .ad-container { margin-top:15px; }
.header-inner { display:flex; flex-direction:column; align-items:center; padding-top:94px; }
.site-loose-chrome { padding:22px 0 8px; }
.content-section.fd-space-bottom-set + .site-loose-chrome { padding-top:0; }
.site-loose-chrome + .content-section.fd-space-top-set { margin-top:-8px; }
.site-loose-chrome .brand,.site-loose-chrome .nav { margin-left:auto; margin-right:auto; }
.site-loose-chrome .nav { margin-top:0; }
.site-loose-chrome .ad-container { width:100%; }
.brand { display:block; width:min(590px,90vw); text-decoration:none; }
.site-logo-space { width:100%; }
.site-logo-space .brand { margin-inline:auto; }
.site-menu-space { width:100%; }
.site-menu-space .nav { margin-inline:auto; }
.site-menu-space.fd-space-top-set .nav { margin-top:0; }
.brand img { width:100%; height:auto; }
.nav { width:min(740px,100%); min-height:54px; margin-top:33px; display:flex; align-items:center; justify-content:space-around; }
.fd-menu { background:var(--menu-surface,#edeef1); border:var(--menu-surface-border,0 solid transparent); border-radius:var(--menu-surface-radius,0); box-shadow:var(--menu-surface-shadow,none); padding:var(--menu-surface-padding,0); }
.fd-menu-links { display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; width:100%; }
.fd-menu .fd-menu-link { display:flex; align-items:center; justify-content:center; flex:none; width:var(--menu-width,auto); max-width:100%; height:var(--menu-height,54px); min-width:0; padding:4px 13px; border:var(--menu-border,0 solid transparent); border-radius:var(--menu-radius,0); background:var(--menu-item-image,var(--menu-fill,transparent)); box-shadow:var(--menu-shadow,none); color:var(--menu-text,#22272c); text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:.15em; line-height:1.25; font-size:var(--menu-font-size,13px); font-weight:800; overflow-wrap:anywhere; }
.fd-menu .fd-menu-link.fd-menu-relief { background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 48%),linear-gradient(174deg,#d6e8f5,#f1fafe); border:1px solid #dbecf7; border-radius:13px; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.06),0 1px 0 rgba(255,255,255,.45),0 5px 0 rgba(20,40,70,.16),0 10px 18px rgba(20,40,70,.12); }
.fd-menu[data-menu-fill=relief] .fd-menu-link,.fd-menu .fd-menu-link.fd-menu-relief { transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; }
.fd-menu[data-menu-fill=relief] .fd-menu-link:hover,.fd-menu .fd-menu-link.fd-menu-relief:hover { transform:translateY(-1px); filter:brightness(1.03); }
.fd-menu[data-menu-fill=relief] .fd-menu-link:active,.fd-menu .fd-menu-link.fd-menu-relief:active { transform:translateY(3px); box-shadow:inset 0 2px 4px rgba(20,40,70,.12),0 1px 0 rgba(20,40,70,.15); }
.fd-menu .fd-menu-link.fd-menu-has-icon { flex-direction:column; gap:2px; }
.fd-menu-icon { display:block; max-width:min(70%,56px); max-height:min(55%,56px); object-fit:contain; }
.fd-menu .fd-menu-link:hover,.fd-menu .fd-menu-link:focus-visible { color:var(--menu-hover,#91b75a); }
.fd-menu .fd-menu-link[aria-current=page] { color:var(--menu-active,#91b75a); }
.fd-menu .fd-menu-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.hero { text-align:center; padding:20px 0 0; }
.hero h1 { font-size:clamp(2rem,3vw,2.8rem); line-height:1.2; font-weight:750; margin:0; color:#1d2227; }
.hero p { color:#6b7075; max-width:710px; margin:14px auto 0; }
.hero-line { display:block; width:70px; height:2px; background:#b9d590; margin:24px auto 0; }
.page-accueil .hero { padding-top:21px; }
.page-accueil .hero h1 { font-size:1.45rem; text-transform:uppercase; letter-spacing:.16em; }
.page-accueil .hero-line { margin-top:11px; }
.content-section { padding:56px 0 70px; }
.privacy-content { max-width:800px; }
.privacy-content p { white-space:normal; line-height:1.8; }
.page-accueil .hero + .content-section { padding-top:41px; }
.section-heading { text-align:center; margin:0 auto 32px; max-width:750px; }
.section-heading .eyebrow { font-size:.7rem; letter-spacing:.2em; font-weight:700; color:#8fb458; text-transform:uppercase; }
.section-heading h2 { font-size:2rem; line-height:1.25; margin:0 0 10px; }
.section-heading p { margin:0; color:var(--muted); }
.item-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.page-informatique .item-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:21px; }
.page-photos .item-grid,.page-tutoriels .item-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; }
.item-card { text-align:center; min-width:0; }
.item-image { height:61px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.item-image img { max-width:60px; max-height:55px; object-fit:contain; }
.item-content h3 { font-size:.99rem; line-height:1.45; letter-spacing:.15em; text-transform:uppercase; font-weight:800; margin:0; color:#282d31; }
.item-content h3 a { text-decoration:none; }
.item-content h3 a:hover { color:#729c43; }
.item-content p { margin:24px 0 0; color:#606468; line-height:1.8; }
.item-grid > .block-text,.item-grid > .block-image,.item-grid > .block-av { grid-column:span 2; }
.item-grid > .block-menu { grid-column:1/-1; }
.block-text { text-align:left; padding:20px 24px; background:#f5f6f6; }
.block-text .item-content h3 { letter-spacing:.06em; }
.block-text .item-content p { margin-top:10px; }
.block-image { margin:0; display:grid; justify-items:center; gap:8px; }
.block-image img { width:auto; max-height:360px; object-fit:contain; }
.block-image figcaption { width:100%; color:var(--muted); font-size:.9rem; }
.block-menu { width:min(740px,100%); margin-inline:auto; padding:var(--menu-surface-padding,0); text-align:left; }
.block-menu > strong { display:block; padding:12px 13px 0; margin-bottom:8px; color:#303742; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }
.fd-image-frame { display:flex; align-items:center; justify-content:center; width:100%; }
.fd-image-frame a { max-width:100%; }
.fd-imageAlignX-left :is(.item-image,.fd-image-frame) { justify-content:flex-start; }
.fd-imageAlignX-center :is(.item-image,.fd-image-frame) { justify-content:center; }
.fd-imageAlignX-right :is(.item-image,.fd-image-frame) { justify-content:flex-end; }
.fd-imageAlignY-top :is(.item-image,.fd-image-frame) { align-items:flex-start; }
.fd-imageAlignY-middle :is(.item-image,.fd-image-frame) { align-items:center; }
.fd-imageAlignY-bottom :is(.item-image,.fd-image-frame) { align-items:flex-end; }
.block-image:is(.fd-imageAlignY-top,.fd-imageAlignY-middle,.fd-imageAlignY-bottom) .fd-image-frame { min-height:240px; }
.banner-item:is(.fd-imageAlignY-top,.fd-imageAlignY-middle,.fd-imageAlignY-bottom) .fd-image-frame { min-height:360px; }
.banner-item:is(.fd-imageAlignX-left,.fd-imageAlignX-center,.fd-imageAlignX-right) img { width:auto; max-width:100%; }
.fd-textAlignX-left { text-align:left; }
.fd-textAlignX-center { text-align:center; }
.fd-textAlignX-right { text-align:right; }
.fd-textAlignX-center .block-menu-links { justify-content:center; }
.fd-textAlignX-right .block-menu-links { justify-content:flex-end; }
.block-image.fd-textAlignX-left figcaption,.banner-item.fd-textAlignX-left > p { justify-content:flex-start; }
.block-image.fd-textAlignX-center figcaption,.banner-item.fd-textAlignX-center > p { justify-content:center; }
.block-image.fd-textAlignX-right figcaption,.banner-item.fd-textAlignX-right > p { justify-content:flex-end; }
.fd-textAlignY-top .item-content,.fd-textAlignY-middle .item-content,.fd-textAlignY-bottom .item-content { display:flex; flex-direction:column; min-height:180px; }
.fd-textAlignY-top .item-content { justify-content:flex-start; }
.fd-textAlignY-middle .item-content { justify-content:center; }
.fd-textAlignY-bottom .item-content { justify-content:flex-end; }
.block-menu:is(.fd-textAlignY-top,.fd-textAlignY-middle,.fd-textAlignY-bottom) { display:flex; flex-direction:column; min-height:180px; }
.block-menu.fd-textAlignY-top { justify-content:flex-start; }
.block-menu.fd-textAlignY-middle { justify-content:center; }
.block-menu.fd-textAlignY-bottom { justify-content:flex-end; }
.block-image:is(.fd-textAlignY-top,.fd-textAlignY-middle,.fd-textAlignY-bottom) figcaption,.banner-item:is(.fd-textAlignY-top,.fd-textAlignY-middle,.fd-textAlignY-bottom) > p { display:flex; align-items:flex-start; min-height:80px; }
.block-image.fd-textAlignY-middle figcaption,.banner-item.fd-textAlignY-middle > p { align-items:center; }
.block-image.fd-textAlignY-bottom figcaption,.banner-item.fd-textAlignY-bottom > p { align-items:flex-end; }
.fd-textStyle-normal :is(h3,p,strong,figcaption,.block-menu-links a) { font-weight:400; font-style:normal; }
.fd-textStyle-bold :is(h3,p,strong,figcaption,.block-menu-links a) { font-weight:700; font-style:normal; }
.fd-textStyle-italic :is(h3,p,strong,figcaption,.block-menu-links a) { font-style:italic; }
.fd-textStyle-bolditalic :is(h3,p,strong,figcaption,.block-menu-links a) { font-weight:700; font-style:italic; }
.fd-font-arial { font-family:Arial,Helvetica,sans-serif; }
.fd-font-verdana { font-family:Verdana,Geneva,sans-serif; }
.fd-font-georgia { font-family:Georgia,serif; }
.fd-font-times { font-family:"Times New Roman",Times,serif; }
.fd-font-trebuchet { font-family:"Trebuchet MS",Arial,sans-serif; }
.fd-font-courier { font-family:"Courier New",Courier,monospace; }
.fd-font-custom { font-family:var(--fd-font-family),Arial,sans-serif; }
.block-av { padding:18px 22px; background:#f5f6f6; text-align:left; }
.block-av .item-content p { margin:8px 0 14px; }
.fd-playlist { margin-top:14px; }
.fd-playlist audio,.fd-playlist video { display:block; width:100%; }
.fd-playlist video { max-height:520px; background:#111; }
.fd-player-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:9px; }
.fd-player-controls[hidden] { display:none; }
.fd-player-controls button { padding:7px 10px; border:1px solid #9cb1c5; background:#fff; color:#183b75; cursor:pointer; font:700 .82rem Arial,sans-serif; }
.fd-player-controls button:disabled { opacity:.48; cursor:not-allowed; }
.fd-player-controls label { display:flex; align-items:center; gap:7px; color:#303742; font-size:.82rem; }
.fd-player-controls input { width:95px; accent-color:#183b75; }
.fd-player-timeline { display:flex; align-items:center; flex:1 1 230px; min-width:min(100%,230px); gap:8px; }
.fd-player-timeline input { flex:1; width:auto; min-width:90px; cursor:pointer; }
.fd-player-timeline input:disabled { cursor:not-allowed; }
.fd-player-timeline span { min-width:3.5em; color:#303742; font:700 .82rem/1 Arial,sans-serif; font-variant-numeric:tabular-nums; text-align:center; }
.fd-track-list { margin:12px 0 0; padding-left:24px; text-align:left; }
.fd-track-list li { margin:3px 0; }
.fd-track-list a { color:#183b75; }
.fd-track-list a[aria-current="true"] { font-weight:700; }
.fd-body-size .item-content p,.block-image.fd-body-size figcaption,.banner-item.fd-body-size > p,.block-menu.fd-body-size .block-menu-links a { font-size:var(--fd-body-size); }
.fd-title-size .item-content h3,.block-menu.fd-title-size > strong,.banner-item.fd-title-size > strong { font-size:var(--fd-title-size); }
.edit-page-shortcut { position:fixed; z-index:45; right:18px; bottom:18px; display:block; padding:10px 16px; background:#183b75; color:#fff; box-shadow:0 4px 16px #0004; text-decoration:none; font-size:.85rem; font-weight:700; }
.edit-page-shortcut:hover { background:#102a54; }
.page-tutoriels .item-image { height:150px; margin-bottom:18px; }
.page-tutoriels .item-image img { max-width:100%; max-height:150px; border:1px solid var(--line); }
.tutorial-thumb { display:block; }
.tutorial-thumb img { transition:transform .2s ease; }
.tutorial-thumb:hover img { transform:scale(1.03); }
.lightbox { position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; border:0; padding:16px; background:transparent; overflow:auto; }
.lightbox[open] { display:flex; align-items:center; justify-content:center; }
.lightbox::backdrop { background:#000c; }
.lightbox-panel { position:relative; width:fit-content; max-width:calc(100vw - 94px); margin:auto; padding:7px; background:#fff; box-shadow:0 15px 45px #0008; }
.lightbox figure { margin:0; text-align:center; }
.lightbox img { display:block; max-width:calc(100vw - 108px); max-height:calc(100vh - 100px); width:auto; height:auto; margin:auto; object-fit:contain; }
.lightbox figcaption { padding:7px 4px 2px; font-size:.85rem; color:var(--muted); }
.lightbox-close { position:absolute; z-index:1; top:0; right:-44px; display:grid; place-items:center; width:40px; height:40px; border:2px solid #b62020; border-radius:50%; background:#fff; color:#b62020; font-size:1.7rem; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 2px 9px #0004; }
.lightbox-close:hover { background:#b62020; color:#fff; }
.feature-section { background:#f8f9f8; border-top:1px solid var(--line); padding:65px 0; }
.feature-section .item-grid { grid-template-columns:1fr; }
.feature-section .item-card { max-width:540px; margin:auto; }
.feature-section .item-content p { margin-top:10px; }
.banner-section { padding:6px 0 45px; }
.banner-grid { display:grid; justify-items:center; gap:22px; }
.banner-item { width:min(600px,100%); text-align:center; }
.banner-item a { display:block; }
.banner-item img { width:100%; height:auto; }
.banner-item p { margin:9px 0 0; color:var(--muted); }
.contact-section { padding-top:55px; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; max-width:980px; margin:auto; }
.contact-grid.contact-only { display:flex; justify-content:center; }
.contact-only .contact-details { width:min(100%,520px); text-align:center; }
.contact-only .contact-rule { margin-left:auto; margin-right:auto; }
.contact-details h1 { font-size:1.25rem; line-height:1.35; margin:0; font-weight:700; }
.contact-rule { display:block; width:55px; height:2px; background:#b9d590; margin:14px 0 21px; }
.contact-address,.contact-phone { color:var(--ink); margin:0; line-height:1.8; }
.contact-phone { margin-top:18px; }
.eyebrow { color:#8fb458; font-weight:800; letter-spacing:.17em; text-transform:uppercase; font-size:.73rem; }
.contact-card { padding:0; background:transparent; }
.contact-card form label { display:block; font-size:.83rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:15px; }
input,textarea { display:block; width:100%; border:1px solid #d3d8dc; background:#fff; color:var(--ink); padding:10px 12px; margin-top:6px; border-radius:0; font:inherit; text-transform:none; letter-spacing:normal; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { font-size:.78rem; color:#777; margin:0 0 17px; }
.button { display:inline-block; border:0; background:#292e33; color:#fff!important; text-decoration:none; padding:11px 22px; font:700 .8rem Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.button:hover { background:var(--accent); }
.button:disabled { opacity:.6; }
.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.alert { padding:10px 14px; border-left:3px solid; margin-bottom:18px; }
.alert.success { background:#eef8e8; border-color:#8cb45a; }
.alert.error { background:#fff1ef; border-color:#b54637; }
.footer { margin-top:35px; background:#eceeef; color:#555; padding:34px 0; }
.background-layout-general .footer { background:transparent; }
.background-layout-general .footer,.background-layout-zones .footer { margin-top:0; }
.footer-inner { display:flex; justify-content:flex-end; gap:19px; align-items:center; flex-wrap:wrap; font-size:.83rem; }
.footer a { text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer small { color:#777; }
.ad-container[hidden],.ad-preferences[hidden] { display:none!important; }
.ad-container { padding:18px 0; text-align:center; background:#f7f7f7; border-block:1px solid #e8e8e8; }
.ad-container .container { max-width:970px; overflow-x:auto; }
.ad-label { display:block; margin-bottom:8px; color:#818181; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; }
.ad-preferences { border:0; background:none; color:inherit; cursor:pointer; font:inherit; padding:0; }
.ad-preferences:hover { text-decoration:underline; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
@media(max-width:900px) {
  .ads-visible .has-ad-rails { display:flex; flex-direction:column; }
  .has-ad-rails > .main-column { order:0; }
  .has-ad-rails > .ad-rail-left { order:1; }
  .has-ad-rails > .ad-rail-right { order:2; }
  .ad-rail { padding:0 18px; }
  .ad-rail .ad-container { position:static; }
  .header-inner { padding-top:58px; }
  .nav { margin-top:25px; }
  .item-grid,.page-informatique .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 28px; }
  .page-photos .item-grid,.page-tutoriels .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  body { background:linear-gradient(#e1e2e3 0,#fff 185px); }
  .header-inner { padding-top:26px; }
  .brand { width:min(440px,95vw); }
  .nav { min-height:0; display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; padding:max(4px,var(--menu-surface-padding,0px)); }
  .nav .fd-menu-link { width:var(--menu-width,auto); max-width:100%; min-height:var(--menu-height,54px); height:auto; font-size:min(var(--menu-font-size,13px),.82rem); letter-spacing:.06em; padding:10px 4px; }
  .nav.fd-menu:is([data-menu-shape="square"],[data-menu-shape="circle"]) { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .fd-menu:is([data-menu-shape="square"],[data-menu-shape="circle"]) .fd-menu-link { width:min(100%,var(--menu-width)); height:auto; min-height:0; aspect-ratio:1; }
  .fd-menu[data-menu-shape="circle"] .fd-menu-link { border-radius:50%; }
  .hero { padding-top:24px; }
  .hero h1 { font-size:1.9rem; }
  .page-accueil .hero-line { margin-top:10px; }
  .content-section { padding:42px 0; }
  .item-grid,.page-informatique .item-grid,.page-photos .item-grid,.page-tutoriels .item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:39px 16px; }
  .item-grid > .block-text,.item-grid > .block-image,.item-grid > .block-av { grid-column:1/-1; }
  .item-content h3 { font-size:.8rem; letter-spacing:.08em; }
  .item-content p { font-size:.89rem; line-height:1.6; margin-top:10px; }
  .item-image { height:52px; margin-bottom:10px; }
  .item-image img { max-width:50px; max-height:48px; }
  .page-tutoriels .item-grid { grid-template-columns:1fr; }
  .contact-grid,.form-row { grid-template-columns:1fr; gap:20px; }
  .contact-card { padding:0; }
  .footer-inner { justify-content:center; }
}
@media(max-width:380px) {
  .item-grid,.page-informatique .item-grid,.page-photos .item-grid { grid-template-columns:1fr; }
  .nav { grid-template-columns:repeat(2,1fr); }
  .edit-page-shortcut { right:8px; bottom:8px; }
}