@charset "utf-8"; /*=======================*\ # Points de rupture # #-------------------------# # min-width -> 600px # # 601px <-> 980px # # 981px <-> 1260px # # 1261px <- max-width # \*=======================*/ /*============================================*\ # Initialisation de la feuille de styles # # -------------------------------------------- # # fusion annotée du meilleur de : # # - normalize.css (v8.0.1) - https://github.com/necolas/normalize.css/blob/8.0.1/CHANGELOG.md # - knacss (v7.1.2) - https://github.com/alsacreations/KNACSS/blob/master/changelog.md # + ajustements maison # \*============================================*/ /* Remplacera un jour la balise viewport - knacss cf. https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html */ @-ms-viewport{ width:device-width; } @-o-viewport{ width:device-width; } @viewport{ width:device-width; } :root{ --couleurDefaut:var(--couleur-couleur-principale); /* Couleur par défaut reprise de la couleur principale définie dans WP */ --placeholderCouleur:inherit; /* Couleur des placeholders */ --placeholderOpacite:0.8; /* Opacité des placeholders */ --margesDefaut:3rem; /* Espacement par défaut */ --bleu:#00325d; --rouge:#d34510; } *, *:before, *:after{ /* Rend héritable le box-sizing, cf. https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing:inherit; box-sizing:inherit; /* évite min-width:auto sur les enfants flex et grid - knacss */ min-width:0; min-height:0; } html{ -webkit-box-sizing:border-box; box-sizing:border-box; line-height:1.15; -webkit-text-size-adjust:100%; /* iOS : empêche les ajustements de font-size après un changement d'orientation */ -moz-text-size-adjust:100%; /* pareil pour les suivants, mais pas iOS :) */ -ms-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; /* retire la mise en avant des liens touché par l'internaute - knacss */ font-size: 62.5%; /* Définit le font-size de base à l'équivalent de 10px, pour faciliter l'utilisation des tailles en rem : 1rem = 10px - knacss */ font-size: calc(1em * 0.625); /* Correctif pour IE9-IE11 qui calculent différemment des autres */ } body{ margin:0; color:#000; font-family:'Roboto',Arial,sans-serif; font-size:2rem; font-weight:400; line-height:1.5; text-align:left; background-color:#fff; } article, aside, dialog, figcaption, figure, video, footer, header, hgroup, main, nav, section{ display:block; /* IE : permet de se comporter comme des blocs */ } hr{ -webkit-box-sizing:content-box; box-sizing:content-box; /* Firefox : met en place le bon box-sizing */ height:0; /* Firefox : met en place le bon box-sizing */ overflow:visible; /* IE/Edge : affiche l'overflow */ } a{ background-color:transparent; /* IE10 : retire le fond gris sur les liens actifs */ } a:not([href]):not([tabindex]){ color:inherit; text-decoration:none; } a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover{ color:inherit; text-decoration:none; } a:not([href]):not([tabindex]):focus{ outline:0; } abbr[title]{ text-decoration:underline dotted; /* Chrome, IE/Edge, Opera, Safari : ajoute le bon text-decoration */ border-bottom:none; /* Chrome57- : Retire le bottom-border */ cursor:help; } b, strong{ font-weight:bolder; /* Chrome, Edge, Safari : définit le bon font-weight */ } pre, code, kbd, samp{ font-family:monospace, monospace; font-size:1em; } pre{ overflow:auto; } small{ font-size:80%; } sub, sup{ position:relative; font-size:75%; line-height:0; vertical-align:baseline; } sub{ bottom:-0.25em; } sup{ top:-0.5em; } embed, iframe, object, img{ max-width:100%; vertical-align:middle; } img{ height:auto; border-style:none; /* IE10 : empêche les bordures sur les images dans des liens */ } output{ display:inline-block; } details{ display:block; /* IE10+/Edge, Firefox : corrige le display */ } summary{ display:list-item; } template, [hidden]{ display:none; /* IE10 : corrige le display */ } [tabindex="-1"]:focus{ outline:none !important; /* N'affiche pas le outline sur la cible du lien skip link */ } ul,ol,li{ margin:0; padding:0; list-style:none; } .contenu-html li{ padding:0 0 0 0.6em; text-indent:-0.6em; } .contenu-html li::before{ content:""; display:inline-block; width:0.3em; height:0.3em; background-color:currentColor; border-radius:50%; margin:-0.05em 0.3em 0.05em 0; vertical-align:baseline; } .container{margin:0 auto;} @media (min-width:1261px){ .container{width:1200px;} } @media (min-width:981px) and (max-width:1260px){ .container{width:960px;} } @media (min-width:601px) and (max-width:980px){ .container{width:540px;} } @media (max-width:600px){ .container{width:300px;} } .page-container{margin:6rem auto;} /* Supprime les animations et transitions quand la préférence reduced motion est activée (un jour ça existera) - knacss */ @media (prefers-reduced-motion:reduce){ *{ -webkit-animation:none !important; animation:none !important; -webkit-transition:none !important; transition:none !important; } } /*================*\ # Impression # \*================*/ @media not print{ .printonly{ display:none !important; } } /*=================*\ # Formulaires # \*=================*/ fieldset{ padding:0; border:0.1rem solid #ccc; } legend{ box-sizing:border-box; /* IE/Edge : corrige l'inclusion du texte */ display:table; /* IE/Edge : corrige l'inclusion du texte */ max-width:100%; /* IE/Edge : corrige l'inclusion du texte */ padding:0; /* Laisser 0 */ color:inherit; /* IE : corrige le problème d'héritage de couleur */ white-space:normal; /* IE/Edge : corrige l'inclusion du texte */ } button, [type="button"], [type="reset"], [type="submit"], ::-webkit-file-upload-button, [class*="bouton"], .form--file-bouton, [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], [type="color"], [type="number"], [type="search"], [type="range"], textarea, optgroup, select, .form--file-dropZone{ margin:0; /* Firefox, Safari : retire les marges */ font-family:inherit; font-size:100%; color:inherit; line-height:1.2; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button, input, [class*="bouton"], .form--file-bouton, .form--file-dropZone{ overflow:visible; /* IE/Edge : affiche l'overflow */ } button, [type="button"], [type="reset"], [type="submit"], ::-webkit-file-upload-button, [class*="bouton"], .form--file-bouton{ background:#00325d; color:#fff; border:none; display:inline-block; padding:0.5em 1em; cursor:default; text-decoration:none; font-size:2rem; text-transform:uppercase; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{ padding:0; /* Firefox : retire le padding et la bordure interne */ border-style:none; /* Firefox : retire le padding et la bordure interne */ } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring{ outline:1px dotted ButtonText; /* Firefox : restaure le style au focus supprimé par la règle précédente */ } [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea { vertical-align:middle; padding:calc((4rem - 2*0.1rem - 1.4em)*0.5) 1rem; /* hauteur - 2*bordure - line-height */ height:4rem; min-height:4rem; line-height:1.4; border:0.1rem solid #707070; background-color:#fff; } textarea{ overflow:auto; /* IE10+ : retire la scrollbar verticale par défaut */ resize:vertical; vertical-align:top; white-space:pre-wrap; height:calc(4rem + 2*1.4em); /* hauteur + (lignes-1)*line-height */ } [type="color"]{ background:none; width:2.4rem; height:2.4rem; border:none; padding:0; } [type="color"]::-webkit-color-swatch-wrapper{ padding: 0; } [type="color"]::-webkit-color-swatch{ border:none; border-radius:50%; } [type="color"]::-moz-color-swatch{ border:none; border-radius:50%; } [type="number"]{ -moz-appearance: textfield; /* Firefox : conversion en apparence textfield pour retirer les flèches mal gérées */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } [type="search"]{ outline-offset:-2px; /* Safari : corrige le style de l'outline */ } [type="search"]::-webkit-search-decoration, [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-results-button, [type="search"]::-webkit-search-results-decoration { -webkit-appearance:none; appearance:none; /* macOS Chrome et Safari : retire le padding */ display: none; /* Supprime le 'x' à droite du champ quand du texte est entré */ } /*--- # Spécificités du champ */ [type="range"]{ -webkit-appearance:none; width:100%; background:transparent;} /* Curseur */ [type="range"]::-webkit-slider-thumb{ /* (pour WebKit/Blink) */ -webkit-appearance:none; appearance:none; margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/ border: 0.1rem solid #000; height: 2rem; width: 2rem; border-radius: 50%; background-color:#888; background-color:var(--couleurDefaut); cursor:ew-resize; } /* All the same stuff for Firefox */ [type="range"]::-moz-range-thumb { -moz-appearance:none; appearance:none; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } /* All the same stuff for IE */ [type="range"]::-ms-thumb { -webkit-appearance:none; /*le préfixe est bien -webkit et non -ms */ appearance:none; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } [type="range"]:focus::-webkit-slider-runnable-track { background: #367ebd; } [type="range"]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #3071a9; border-radius: 1.3px; border: 0.2px solid #010101; } [type="range"]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; border-width: 16px 0; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } [type="range"]::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } [type="range"]:focus::-ms-fill-lower { background: #3071a9; } [type="range"]::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } [type="range"]:focus::-ms-fill-upper { background: #367ebd; } [type="date"]::-webkit-inner-spin-button, [type="time"]::-webkit-inner-spin-button{ -webkit-appearance: none; } select { padding-right: 2rem; border-radius: 0; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); background-position: right .6rem center; background-repeat: no-repeat; background-size: 1.2rem; } select::-ms-expand { display: none; /* IE11 : cache la flèche */ } [type="checkbox"], [type="radio"]{ box-sizing:border-box; /* IE10 : définit le bon box-sizing */ padding:0; /* IE10 : retire le padding */ } /*--- # Spécificités du champ */ .form--fileInput{ /* élément qui contient tous les composants du champ file */ display:inline-block; position:relative; } .form--fileInput [type="file"]{ /* champ file réel */ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; z-index:1; overflow:hidden; } ::-webkit-file-upload-button{ font:inherit; } /* Safari : récupère les styles hérités des parents */ .form--file-dropZone{ /* zone de drop, si activée (input.form--dropFile) */ -webkit-appearance:none; appearance:none; background:none; border:0.4rem dashed #ccc; padding:1ch 2ch; cursor:default; } .form--file-dropZone-list{ /* liste des fichiers sélectionnés */ margin:0; padding:0; list-style:none; } .form--file-dropZone-listItem{ margin:0; } .form--file-dropZone-listItem:not(:first-child){ margin-top:0.5rem; } .form--file-dropZone-listItem:not(:last-child){ margin-bottom:0.5rem; } .form--file{ display:inline-flex; align-items:center; justify-content:flex-start; } .form--file-reset{ /* bouton x */ position:relative; z-index:2; display:inline-block; margin:-0.5ch -1.5ch -0.5ch 1.5ch; flex:0 0 auto; align-self:flex-start; width:3rem; height:3rem; line-height:3rem; text-align:center; background:rgba(0,0,0,0.2); border-radius:0.3rem; cursor:pointer; opacity:0.5; transition:opacity 0.3s ease-out; } .form--file-reset:hover, .form--file-reset:focus{ opacity:1; } [type="file"]:focus + .form--file, [type="file"]:focus-within + .form--file{ outline:1px dotted ButtonText; /* imitation du focus */ outline: 5px auto -webkit-focus-ring-color; /* Chrome : imitation du focus */ } a, area, button, [role="button"], input:not([type="range"]), label, select, summary, textarea{ /* Permet au navigateur de considérer que tout toucher qui débute sur ces éléments n'ont pour but que le scroll ou le zoom de la page. - knacss cf. https://developer.mozilla.org/fr/docs/Web/CSS/touch-action */ -ms-touch-action:manipulation; touch-action:manipulation; } label{cursor: pointer;} progress{ width: 100%; vertical-align:middle; /* Chrome, Firefox, Opera : corrige le vertical-align */ } /* Couleurs de placeholders, doivent être séparés pour être reconnus par leurs préfixes respectifs. Pour simplifier, la couleur a été mise en variable de :root. Pour changer la couleur d'une partie des placeholders, il suffit de redéfinir une variable --placeholderCouleur sur leur plus proche parent commun. Idem pour l'opacité. */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:inherit; color:var(--placeholderCouleur); opacity:var(--placeholderOpacite); } input::-moz-placeholder, textarea::-moz-placeholder{ color:inherit; color:var(--placeholderCouleur); opacity:var(--placeholderOpacite); } input:-ms-input-placeholder, textarea:-ms-input-placeholder{ color:inherit; color:var(--placeholderCouleur); opacity:var(--placeholderOpacite); } input::-ms-input-placeholder, textarea::-ms-input-placeholder{ color:inherit; color:var(--placeholderCouleur); opacity:var(--placeholderOpacite); } input::placeholder, textarea::placeholder{ color:inherit; color:var(--placeholderCouleur); opacity:var(--placeholderOpacite); } .switch { border-radius: 3em; } .radio { border-radius: 50%; } .switch, .checkbox, .radio { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: text-bottom; outline: 0; cursor: pointer; } .switch ~ label, .checkbox ~ label, .radio ~ label { cursor: pointer; } .switch::-ms-check, .checkbox::-ms-check, .radio::-ms-check { display: none; } .switch { width: 4rem; height: 2rem; line-height: 2rem; font-size: 70%; -webkit-box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333; box-shadow: inset -2rem 0 0 #333, inset 0 0 0 1px #333; -webkit-transition: -webkit-box-shadow .15s; transition: -webkit-box-shadow .15s; transition: box-shadow .15s; transition: box-shadow .15s, -webkit-box-shadow .15s; background-color: #fff; } .switch::before, .switch::after { font-weight: bold; color: #fff; } .switch::before { content: "✕"; float: right; margin-right: 0.66667rem; } .switch:checked { -webkit-box-shadow: inset 2rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C; box-shadow: inset 2rem 0 0 #5CB85C, inset 0 0 0 1px #5CB85C; } .switch:checked::before { content: "✓"; float: left; margin-left: 0.66667rem; } /*===================*\ # Accessibilité # \*===================*/ /* Liseuses */ /* Affichage sur liseuses uniquement : Usage : Texte accessible Alternative dans certains cas : attribut aria-label */ .no-texte, .screen-reader-response{ border: 0; clip: rect(0 0 0 0); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } /* Masquage sur liseuses uiquement : */ /* Ajouter l'attribut aria-hidden="true", pas de CSS */ /* Liens d'évitement */ .skip-links{ /* Ne pas utiliser display:none, les logiciels de synthèse vocale ignoreraient ces liens :) */ margin:0 auto; padding:0rem; width:100%; height:0; transition:all 0.3s ease-out; transition-property:opacity, padding; background:#fff; opacity:0; text-align:center; list-style:none; overflow:hidden; } .skip-links.active{ height:auto; padding:1rem; opacity:1; } .skip-links-li{ display:inline-block; vertical-align:middle; margin:0; padding:0; } .skip-links-a{ display:block; text-decoration:none; color:#333; padding:0.3rem 0.5rem; } /*============================*\ # Styles Gutenberg Front # \*============================*/ /* Feuille de style par défaut complète : /wp-includes/css/dist/block-library/style.css */ /* Éléments de contenu classiques */ h1,.h1,h2,.h2,h3,.h3,h4,.h4{ line-height:1.2; font-weight:700; margin:1.5em 0 1em 0; } h1 a,.h1 a,h2 a,.h2 a,h3 a,.h3 a,h4 a,.h4 a{ color:inherit; text-decoration:none; } h1,.h1{ color:inherit; font-size:1em; margin:0; text-align:inherit; text-transform:none; } h2,.h2{ font-size:3.5rem; text-transform:uppercase; text-align:center; } h3,.h3{ font-size:2.4rem; text-align:inherit; text-transform:none; } h4,.h4{ font-size:2rem; text-align:inherit; text-transform:none; } a{color:#00325d;} p{margin:0 0 1em 0;} figure{ margin:0 0 1em 0; } [class*="colonnes-"]{ column-gap: 2em; margin:0 0 1em 0; } [class*="colonnes-"] > :first-child{margin-top:0;} [class*="colonnes-"] > :last-child{margin-bottom:0;} .colonnes-2{column-count: 2;} .colonnes-3{column-count: 3;} .colonnes-4{column-count: 4;} @media (max-width:1260px){ .colonnes-4{column-count: 3;} } @media (max-width:980px){ .colonnes-3, .colonnes-4{column-count: 2;} } @media (max-width:600px){ .colonnes-2, .colonnes-3, .colonnes-4{column-count: 1;} } .adresse{ padding-left:1em; border-left:0.2em solid #ccc; } /*============================*\ # Styles Gutenberg Front # \*============================*/ /* Feuille de style par défaut complète : /wp-includes/css/dist/block-library/style.css */ /* Affichage du bloc core/audio */ .wp-block-audio figcaption{ margin-top:0.5em; margin-bottom:1em; } .wp-block-audio audio{ width:100%; min-width:300px; } /* Affichage du bloc core/button */ .wp-block-button{ margin-bottom:1.5em; text-align:left; color:#fff; color:var(--couleur-blanc); } .wp-block-button.aligncenter{text-align:center;} .wp-block-button.alignright{text-align:right;} .is-style-squared .wp-block-button__link, .no-border-radius.wp-block-button__link{border-radius:0;} .is-style-outline .wp-block-button__link{ background-color:transparent; border:0.2rem solid currentColor; } /* Affichage du bloc core/calendar */ .wp-block-calendar{text-align:center;} .wp-block-calendar th, .wp-block-calendar tbody td{ padding:0.5em; border:1px solid #ddd; } .wp-block-calendar tfoot td{border:none;} .wp-block-calendar table{ width:100%; border-collapse:collapse; } .wp-block-calendar table th{ font-weight:400; background:#eee; } /* Affichage du bloc core/columns */ .wp-block-columns{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:space-between; } @media (min-width:981px){ .wp-block-columns{flex-wrap:nowrap;} } .wp-block-column{ flex-grow:1; min-width:0; word-break:break-word; overflow-wrap:break-word; } @media (max-width:600px){ .wp-block-column{ flex-basis:100%; } } @media (min-width:601px){ } @media (min-width:981px){ .wp-block-column{ flex-basis:calc(50% - 1.5rem); flex-grow:0; } .wp-block-column:nth-child(even){ margin-left:3rem; } .wp-block-column:not(:first-child){ margin-left:6rem; } } .wp-block-columns.are-vertically-aligned-top{align-items:flex-start;} .wp-block-columns.are-vertically-aligned-center{align-items:center;} .wp-block-columns.are-vertically-aligned-bottom{align-items:flex-end;} .wp-block-column.is-vertically-aligned-top{align-self:flex-start;} .wp-block-column.is-vertically-aligned-center{ align-self:center; -ms-grid-row-align:center; } .wp-block-column.is-vertically-aligned-bottom{align-self:flex-end;} .wp-block-columns.boutons{ display:block; } .wp-block-columns.boutons .wp-block-column, .wp-block-columns.boutons .wp-block-button{ display:inline; margin:0; } .wp-block-columns.boutons .wp-block-button__link{margin:0 1em 1em 0;} /* Affichage du bloc core/cover */ .wp-block-cover-image, .wp-block-cover{ display:flex; position:relative; align-items:center; justify-content:center; width:100%; height:100%; min-height:430px; overflow:hidden; background:no-repeat center center / cover #000; } .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax{background-attachment:fixed;} @supports (-webkit-overflow-scrolling:touch){ .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax{background-attachment:scroll;} } @media (prefers-reduced-motion:reduce){ .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax{background-attachment:scroll;} } .wp-block-cover-image.has-background-dim::before, .wp-block-cover.has-background-dim::before{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background-color:inherit; opacity:0.5; } .wp-block-cover-image.has-background-dim.has-background-dim-10::before, .wp-block-cover.has-background-dim.has-background-dim-10::before{opacity:0.1;} .wp-block-cover-image.has-background-dim.has-background-dim-20::before, .wp-block-cover.has-background-dim.has-background-dim-20::before{opacity:0.2;} .wp-block-cover-image.has-background-dim.has-background-dim-30::before, .wp-block-cover.has-background-dim.has-background-dim-30::before{opacity:0.3;} .wp-block-cover-image.has-background-dim.has-background-dim-40::before, .wp-block-cover.has-background-dim.has-background-dim-40::before{opacity:0.4;} .wp-block-cover-image.has-background-dim.has-background-dim-50::before, .wp-block-cover.has-background-dim.has-background-dim-50::before{opacity:0.5;} .wp-block-cover-image.has-background-dim.has-background-dim-60::before, .wp-block-cover.has-background-dim.has-background-dim-60::before{opacity:0.6;} .wp-block-cover-image.has-background-dim.has-background-dim-70::before, .wp-block-cover.has-background-dim.has-background-dim-70::before{opacity:0.7;} .wp-block-cover-image.has-background-dim.has-background-dim-80::before, .wp-block-cover.has-background-dim.has-background-dim-80::before{opacity:0.8;} .wp-block-cover-image.has-background-dim.has-background-dim-90::before, .wp-block-cover.has-background-dim.has-background-dim-90::before{opacity:0.9;} .wp-block-cover-image.has-background-dim.has-background-dim-100::before, .wp-block-cover.has-background-dim.has-background-dim-100::before{opacity:1;} .wp-block-cover-image::after, .wp-block-cover::after{ content:""; display:block; min-height:inherit; font-size:0; } @supports ((position:-webkit-sticky) or (position:sticky)){ .wp-block-cover-image::after, .wp-block-cover::after{content:none;} } .wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.aligncenter, .wp-block-cover.alignleft, .wp-block-cover.alignright{display:flex;} .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container{ z-index:1; width:calc(100% - 6rem); color:#fff; } .wp-block-cover-image > * > *:not(.has-text-color), .wp-block-cover > * > *:not(.has-text-color){color:inherit;} .wp-block-cover-image > * > *:first-child, .wp-block-cover > * > *:first-child{margin-top:0;} .wp-block-cover-image > * > *:last-child, .wp-block-cover > * > *:last-child{margin-bottom:0;} .wp-block-cover__video-background{ position:absolute; top:50%; left:50%; z-index:0; width:100%; height:100%; transform:translateX(-50%) translateY(-50%); -o-object-fit:cover; object-fit:cover; } section.wp-block-cover-image h2, .wp-block-cover-image-text, .wp-block-cover-text{color:#fff;} section.wp-block-cover-image h2 a, section.wp-block-cover-image h2 a:hover, section.wp-block-cover-image h2 a:focus, section.wp-block-cover-image h2 a:active, .wp-block-cover-image-text a, .wp-block-cover-image-text a:hover, .wp-block-cover-image-text a:focus, .wp-block-cover-image-text a:active, .wp-block-cover-text a, .wp-block-cover-text a:hover, .wp-block-cover-text a:focus, .wp-block-cover-text a:active{color:inherit;} .wp-block-cover-image .wp-block-cover.has-left-content{justify-content:flex-start;} .wp-block-cover-image .wp-block-cover.has-right-content{justify-content:flex-end;} section.wp-block-cover-image.has-left-content > h2, .wp-block-cover-image.has-left-content .wp-block-cover-image-text, .wp-block-cover.has-left-content .wp-block-cover-text{ margin-left:0; text-align:left; } section.wp-block-cover-image.has-right-content > h2, .wp-block-cover-image.has-right-content .wp-block-cover-image-text, .wp-block-cover.has-right-content .wp-block-cover-text{ margin-right:0; text-align:right; } /* Affichage du bloc core-embed */ .wp-block-embed{margin:0 0 1em 0;} .wp-block-embed figcaption{ margin-top:0.5em; margin-bottom:1em; } .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper{position:relative;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before{ content:""; display:block; padding-top:50%; } .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; } .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before{padding-top:42.85%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before{padding-top:50%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before{padding-top:56.25%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before{padding-top:75%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before{padding-top:100%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before{padding-top:177.78%;} .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before{padding-top:200%;} /* Affichage du bloc core/file */ .wp-block-file{ text-align:left; margin-bottom:1.5em; } .wp-block-file.aligncenter{text-align:center;} .wp-block-file.alignright{text-align:right;} .wp-block-file > a:only-child::before, .wp-block-file__button::before{ content:""; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cline x1='3.74' x2='27.74' y1='28' y2='28' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='4'/%3E%3Cpolygon fill='%23fff' points='21.74 12 21.74 0 9.74 0 9.74 12 3.74 12 15.74 24 27.74 12'/%3E%3C/svg%3E") no-repeat; width:0.8em; height:0.8em; display:inline-block; margin:0 0.3em 0 0; position: relative; top:-0.15em; vertical-align:text-bottom; } .wp-block-file * + .wp-block-file__button{ margin-left:0.75em; vertical-align:baseline; } /* Affichage du bloc core/gallery */ .wp-block-gallery, .blocks-gallery-grid{ display:flex; flex-wrap:wrap; padding:0; margin:0; list-style-type:none; --gallery-gap:3rem; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item, .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item{ display:flex; position:relative; flex-direction:column; /*flex-grow:1;*/ justify-content:center; margin:0 1.5rem 1.5rem 0; margin-right:var(--gallery-gap); margin-bottom:var(--gallery-gap); } .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure, .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure{ height:100%; margin:0; } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img, .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img{ display:block; height:auto; max-width:100%; width:100%; } .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img, .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img{width:100%;} @supports ((position: -webkit-sticky) or (position: sticky)){ .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure, .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure{ display:flex; align-items:flex-end; justify-content:flex-start; } .wp-block-gallery .blocks-gallery-image img, .wp-block-gallery .blocks-gallery-item img, .blocks-gallery-grid .blocks-gallery-image img, .blocks-gallery-grid .blocks-gallery-item img{width:auto;} .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img, .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img{ flex:1; height:100%; -o-object-fit:cover; object-fit:cover; } } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption{ position:absolute; bottom:0; width:100%; max-height:100%; padding:3em 1em 1em 1em; overflow:auto; color:#fff; font-size:0.8em; text-align:center; background:linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); } .wp-block-gallery .blocks-gallery-image figcaption img, .wp-block-gallery .blocks-gallery-item figcaption img, .blocks-gallery-grid .blocks-gallery-image figcaption img, .blocks-gallery-grid .blocks-gallery-item figcaption img{display:inline;} .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item, .blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item{ width:calc((100% - 1.5rem ) / 2); width:calc((100% - var(--gallery-gap)) / 2); } .wp-block-gallery .blocks-gallery-image:nth-of-type(even), .wp-block-gallery .blocks-gallery-item:nth-of-type(even), .blocks-gallery-grid .blocks-gallery-image:nth-of-type(even), .blocks-gallery-grid .blocks-gallery-item:nth-of-type(even){margin-right:0;} .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item, .blocks-gallery-grid.columns-1 .blocks-gallery-image, .blocks-gallery-grid.columns-1 .blocks-gallery-item{ width:100%; margin-right:0; } @media (min-width:601px){ .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item, .blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item{ width:calc((100% - 1.5rem * 2) / 3); width:calc((100% - var(--gallery-gap) * 2) / 3); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item, .blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item{width:calc((100% - 1.5rem * 2) / 3 - 1px);} } .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item, .blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item{ width:calc((100% - 1.5rem * 3) / 4); width:calc((100% - var(--gallery-gap) * 3) / 4); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item, .blocks-gallery-grid.columns-4 .blocks-gallery-image, .blocks-gallery-grid.columns-4 .blocks-gallery-item{width:calc((100% - 1.5rem * 3) / 4 - 1px);} } .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item, .blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item{ width:calc((100% - 1.5rem * 4) / 5); width:calc((100% - var(--gallery-gap) * 4) / 5); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item, .blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item{width:calc((100% - 1.5rem * 4) / 5 - 1px);} } .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item, .blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item{ width:calc((100% - 1.5rem * 5) / 6); width:calc((100% - var(--gallery-gap) * 5) / 6); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-6 .blocks-gallery-image, .wp-block-gallery.columns-6 .blocks-gallery-item, .blocks-gallery-grid.columns-6 .blocks-gallery-image, .blocks-gallery-grid.columns-6 .blocks-gallery-item{width:calc((100% - 1.5rem * 5) / 6 - 1px);} } .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item, .blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item{ width:calc((100% - 1.5rem * 6) / 7); width:calc((100% - var(--gallery-gap) * 6) / 7); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-7 .blocks-gallery-image, .wp-block-gallery.columns-7 .blocks-gallery-item, .blocks-gallery-grid.columns-7 .blocks-gallery-image, .blocks-gallery-grid.columns-7 .blocks-gallery-item{width:calc((100% - 1.5rem * 6) / 7 - 1px);} } .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item, .blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item{ width:calc((100% - 1.5rem * 7) / 8); width:calc((100% - var(--gallery-gap) * 7) / 8); margin-right:1.5rem; margin-right:var(--gallery-gap); } @supports (-ms-ime-align: auto){ .wp-block-gallery.columns-8 .blocks-gallery-image, .wp-block-gallery.columns-8 .blocks-gallery-item, .blocks-gallery-grid.columns-8 .blocks-gallery-image, .blocks-gallery-grid.columns-8 .blocks-gallery-item{width:calc((100% - 1.5rem * 7) / 8 - 1px);} } .wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-image:nth-of-type(1n), .blocks-gallery-grid.columns-1 .blocks-gallery-item:nth-of-type(1n){margin-right:0;} .wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n), .blocks-gallery-grid.columns-2 .blocks-gallery-image:nth-of-type(2n), .blocks-gallery-grid.columns-2 .blocks-gallery-item:nth-of-type(2n){margin-right:0;} .wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-image:nth-of-type(3n), .blocks-gallery-grid.columns-3 .blocks-gallery-item:nth-of-type(3n){margin-right:0;} .wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-image:nth-of-type(4n), .blocks-gallery-grid.columns-4 .blocks-gallery-item:nth-of-type(4n){margin-right:0;} .wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-image:nth-of-type(5n), .blocks-gallery-grid.columns-5 .blocks-gallery-item:nth-of-type(5n){margin-right:0;} .wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-image:nth-of-type(6n), .blocks-gallery-grid.columns-6 .blocks-gallery-item:nth-of-type(6n){margin-right:0;} .wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-image:nth-of-type(7n), .blocks-gallery-grid.columns-7 .blocks-gallery-item:nth-of-type(7n){margin-right:0;} .wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-image:nth-of-type(8n), .blocks-gallery-grid.columns-8 .blocks-gallery-item:nth-of-type(8n){margin-right:0;} } .wp-block-gallery .blocks-gallery-image:last-child, .wp-block-gallery .blocks-gallery-item:last-child, .blocks-gallery-grid .blocks-gallery-image:last-child, .blocks-gallery-grid .blocks-gallery-item:last-child{margin-right:0;} .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .blocks-gallery-grid.alignleft, .blocks-gallery-grid.alignright{ width:100%; max-width:305px; } .wp-block-gallery.aligncenter .blocks-gallery-item figure, .blocks-gallery-grid.aligncenter .blocks-gallery-item figure{justify-content:center;} /* Affichage du bloc core/image */ .wp-block-image{ max-width:100%; margin-bottom:1em; } .wp-block-image img{max-width:100%;} .wp-block-image.aligncenter{text-align:center;} .wp-block-image.alignfull img, .wp-block-image.alignwide img{ width:100%; } .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image .aligncenter, .wp-block-image.is-resized{ display:table; margin-right:0; margin-left:0; } .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image .aligncenter > figcaption, .wp-block-image.is-resized > figcaption{ display:table-caption; caption-side:bottom; } .wp-block-image .alignleft{ float:left; margin-right:1em; } .wp-block-image .alignright{ float:right; margin-left:1em; } .wp-block-image .aligncenter{ margin-right:auto; margin-left:auto; } .wp-block-image figcaption{ margin-top:0.5em; margin-bottom:1em; } .is-style-circle-mask img{border-radius:100vmax;} @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none){ .is-style-circle-mask img{ border-radius:none; -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); mask-mode:alpha; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; } } /* Affichage du bloc core/latest-posts */ /* Affichage du bloc core/rss */ .wp-block-latest-posts, .wp-block-rss{margin-bottom:1em;} .wp-block-latest-posts.alignleft, .wp-block-rss.alignleft{margin-right:3rem;} .wp-block-latest-posts.alignright, .wp-block-rss.alignright{margin-left:3rem;} .wp-block-latest-posts.wp-block-latest-posts__list, .wp-block-rss.wp-block-rss__list{list-style:none;} .wp-block-latest-posts.is-grid, .wp-block-rss.is-grid{ display:flex; flex-wrap:wrap; padding:0; } .wp-block-latest-posts.is-grid li, .wp-block-rss.is-grid li{ width:100%; margin:0 3rem 3rem 0; } .wp-block-latest-posts__post-excerpt > a, .wp-block-rss__post-excerpt > a{white-space:nowrap;} @media (min-width:601px){ .wp-block-latest-posts.columns-2 li, .wp-block-rss.columns-2 li{width:calc((100% / 2) - 3rem);} .wp-block-latest-posts.columns-3 li, .wp-block-rss.columns-3 li{width:calc((100% / 3) - 3rem);} .wp-block-latest-posts.columns-4 li, .wp-block-rss.columns-4 li{width:calc((100% / 4) - 3rem);} .wp-block-latest-posts.columns-5 li, .wp-block-rss.columns-5 li{width:calc((100% / 5) - 3rem);} .wp-block-latest-posts.columns-6 li, .wp-block-rss.columns-6 li{width:calc((100% / 6) - 3rem);} } .wp-block-latest-posts__post-date, .wp-block-latest-posts__post-author, .wp-block-rss__item-publish-date, .wp-block-rss__item-author{ display:block; opacity:0.8; font-size:0.8em; } .wp-block-latest-posts__post-excerpt, .wp-block-rss__item-excerpt{ margin-top:0.5em; margin-bottom:1em; } /* Affichage du bloc core/media-text */ .wp-block-media-text .wp-block-media-text__media{margin:0;} @media (min-width:601px){ .wp-block-media-text{ display:-ms-grid; display: grid; -ms-grid-rows:auto; grid-template-rows:auto; -ms-grid-columns:50% 1fr; grid-template-columns:50% 1fr; } .wp-block-media-text .has-media-on-the-right{ -ms-grid-columns:1fr 50%; grid-template-columns:1fr 50%; } .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media{ align-self:start; -ms-grid-row-align:start; } .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text .wp-block-media-text__media, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media{ align-self:center; -ms-grid-row-align:center; } .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media{ align-self:end; -ms-grid-row-align:end; } .wp-block-media-text .wp-block-media-text__media{ -ms-grid-column:1; grid-column:1; -ms-grid-row:1; grid-row:1; } .wp-block-media-text .wp-block-media-text__content{ padding:0 0 0 3rem; word-break:break-word; -ms-grid-column:2; grid-column:2; -ms-grid-row:1; grid-row:1; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{ -ms-grid-column:2; grid-column:2; -ms-grid-row:1; grid-row:1; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{ padding:0 3rem 0 0; -ms-grid-column:1; grid-column:1; -ms-grid-row:1; grid-row:1; } .wp-block-media-text > figure > img, .wp-block-media-text > figure > video{ width:100%; max-width:unset; vertical-align:middle; } .wp-block-media-text.is-image-fill figure{ height:100%; min-height:250px; background-size:cover; } .wp-block-media-text.is-image-fill figure > img{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; } } @media (max-width:600px){ .wp-block-media-text.is-stacked-on-mobile{display:block;} .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{padding:0;} } /* Affichage du bloc core/paragraph */ .is-small-text{font-size:0.8em;} .is-regular-text{font-size:1em;} .is-large-text{font-size:2em;} .is-larger-text{font-size:3em;} .has-drop-cap:not(:focus)::first-letter{ float:left; margin:0 0.1em 0.05em 0; font-size:8.4em; line-height:0.667; text-transform:uppercase; } .has-drop-cap:not(:focus)::after{ content:""; display:block; overflow:hidden; clear:both; } p.has-background{padding:0.5em 1em;} .has-text-color a{color:inherit;} /* Affichage du bloc core/pullquote */ .wp-block-pullquote{ padding:3em 0; margin-right:0; margin-left:0; text-align:center; } .wp-block-pullquote p{ font-size:1.75em; line-height:1.6; } .wp-block-pullquote cite, .wp-block-pullquote footer{ position:relative; } .wp-block-pullquote:not(.is-style-solid-color){background:none;} .wp-block-pullquote.is-style-solid-color{border:none;} .wp-block-pullquote.is-style-solid-color blockquote{ max-width:60%; margin-right:auto; margin-left:auto; } .wp-block-pullquote.is-style-solid-color blockquote p{ margin-top:0; margin-bottom:0; font-size:2em; } .wp-block-pullquote.is-style-solid-color blockquote cite{ font-style:normal; text-transform:none; } .wp-block-pullquote cite{color:inherit;} /* Affichage du bloc core/quote */ .wp-block-quote.is-style-large, .wp-block-quote.is-large{ padding:0 1em; margin:0 0 1em 0; } .wp-block-quote.is-style-large p, .wp-block-quote.is-large p{ font-size:1.5em; font-style:italic; line-height:1.6; } .wp-block-quote.is-style-large cite, .wp-block-quote.is-style-large footer, .wp-block-quote.is-large cite, .wp-block-quote.is-large footer{ font-size:1em; text-align:right; } /* Affichage du bloc core/search */ .wp-block-search{ display:flex; flex-wrap:wrap; } .wp-block-search .wp-block-search__label{width:100%;} .wp-block-search .wp-block-search__input{flex-grow:1;} .wp-block-search .wp-block-search__button{margin-left:0;} /* Affichage du bloc core/separator */ .wp-block-separator{ width:6em; margin:3rem auto; border:none; border-bottom:0.2em solid currentColor; } .wp-block-separator.is-style-wide{ width:auto; border-bottom-width:1px; } .wp-block-separator.is-style-dots{ width:auto; height:auto; line-height:1; text-align:center; background:none; border:none; } .wp-block-separator.is-style-dots::before{ content:"\00b7 \00b7 \00b7"; display:block; padding-left:1em; color:currentColor; font-family:serif; font-size:2em; letter-spacing:1em; } /* Affichage du bloc core/spacer */ .wp-block-spacer{clear:both;} /* Affichage du bloc core/table */ .wp-block-table{overflow-x:auto;} .wp-block-table table{width:100%;} .wp-block-table .has-fixed-layout{ width:100%; table-layout:fixed; } .wp-block-table td{padding:0.5em 1em;} .wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th, .wp-block-table.alignleft td, .wp-block-table.alignleft th, .wp-block-table.aligncenter td, .wp-block-table.aligncenter th, .wp-block-table.alignright td, .wp-block-table.alignright th{word-break:break-word;} .wp-block-table.alignleft, .wp-block-table.aligncenter, .wp-block-table.alignright{ display:table; width:auto; } .wp-block-table .has-subtle-light-gray-background-color{background-color:rgba(116,127,139,0.1);} .wp-block-table .has-subtle-pale-green-background-color{background-color:rgba(47,255,0,0.1);} .wp-block-table .has-subtle-pale-blue-background-color{background-color:rgba(10,155,245,0.1);} .wp-block-table .has-subtle-pale-pink-background-color{background-color:rgba(214,55,41,0.1);} .wp-block-table.is-style-stripes table{ background-color:transparent; border-collapse:inherit; border-bottom:1px solid rgba(116,127,139,0.1); border-spacing:0; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background-color:rgba(116,127,139,0.1); } .wp-block-table.is-style-stripes .has-subtle-light-gray-background-color tbody tr:nth-child(odd){ background-color:rgba(116,127,139,0.1); } .wp-block-table.is-style-stripes .has-subtle-pale-green-background-color tbody tr:nth-child(odd){ background-color:rgba(47,255,0,0.1); } .wp-block-table.is-style-stripes .has-subtle-pale-blue-background-color tbody tr:nth-child(odd){ background-color:rgba(10,155,245,0.1); } .wp-block-table.is-style-stripes .has-subtle-pale-pink-background-color tbody tr:nth-child(odd){ background-color:rgba(214,55,41,0.1); } .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td{border-color:transparent;} /* Affichage du bloc core/video */ .wp-block-video{ margin-right:0; margin-left:0; } .wp-block-video video{ max-width:100%; } @supports ((position: -webkit-sticky) or (position: sticky)){ .wp-block-video [poster]{ -o-object-fit:cover; object-fit:cover; } } .wp-block-video.aligncenter{ text-align:center; } .wp-block-video figcaption{ margin-top:0.5em; margin-bottom:1em; } /* Mise en forme */ .has-small-font-size{font-size: 0.8em;} .has-regular-font-size, .has-normal-font-size{font-size: 1em;} .has-medium-font-size{font-size: 1.2em;} .has-large-font-size{font-size: 1.5em;} .has-larger-font-size, .has-huge-font-size{font-size: 2em;} .has-text-align-center{text-align: center;} .has-text-align-left{text-align: left;} .has-text-align-right{text-align: right;} .aligncenter{ clear:both; display:block; text-align:center; } .alignwide{ width:calc(100% + 20rem); max-width:calc(100vw - 4rem); min-width:100%; margin-left:50%; transform:translateX(-50%); } .alignfull{ width:100vw; max-width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); } /*============*\ # HEADER # \*============*/ .header{ display:flex; align-items:center; justify-content:space-around; } .header-logo{ background:url('../design/logoNautimob.svg') no-repeat center center / contain transparent; width:24.4rem; height:6rem; margin:1rem auto; display:block; text-decoration:none; font-size:0; color:rgba(255,255,255,0); } @media(max-width:600px){ .header{ flex-wrap:wrap; } .site-header-logo{ width:100%; } .main-navigation, .header-social{ flex:1 1 50%; } } /* Menu */ .site-header-menu--level-1-ul{ display:flex; list-style:none; align-items:center; justify-content:center; text-align:center; margin:2em 1em; padding:0; font-size:1.2rem; } .site-header-menu--level-1-li{ margin:0 1em; } .site-header-menu--level-1-a{ color:#000; text-decoration:none; text-transform:uppercase; font-weight:400; display:flex; align-items:center; justify-content:center; position:relative; } .site-header-menu--level-1-a::after{ content:""; width:0.5em; height:0.5em; border-right:0.01em solid currentColor; border-bottom:0.01em solid currentColor; transform-origin: center center; transform:rotate(-45deg); margin:0 0.5em 0 0.2em; } @media (min-width:981px){ .menu-toggle{display:none;} .current-menu-item > .site-header-menu--level-1-a{color:#d34510;} .current-menu-item > .site-header-menu--level-1-a::after{ transform:rotate(45deg); margin:-0.2em 0.2em 0.2em 0.5em; } } @media (max-width:980px){ .main-navigation{ align-self:stretch; margin:0 0 0 auto; position:relative; } .menu-toggle{ display:flex; width:100%; height:100%; background-color:#00325d; color:#fff; min-width:8rem; align-items:center; justify-content:center; } .menu-toggle-icon{ display:block; font-size:2rem; width:1.2em; height:0.1em; background:currentColor; position:relative; } .menu-toggle-icon::before, .menu-toggle-icon::after{ content:""; display:block; width:100%; height:100%; position:absolute; left:0; background:currentColor; } .menu-toggle-icon::before{top:-0.45em;} .menu-toggle-icon::after{top:0.45em;} .site-header-menu--level-1-ul{ display:none; position:absolute; right:0; top:100%; z-index:9; white-space:nowrap; margin:0; padding:0.5em 0; background:#00325d; color:#fff; font-size:1.6rem; } .site-header-menu--level-1-li{margin:0;} .site-header-menu--level-1-a{ color:#fff; padding:0.5em 1em; } .current-menu-item > .site-header-menu--level-1-a{background-color:rgba(255,255,255,0.1);} .current-menu-item > .site-header-menu--level-1-a::after{ transform:rotate(135deg); margin:0 0.2em 0 0.5em; } } @media (max-width:600px){ .site-header-menu--level-1-ul{ right:-100%; left:0; } } /* Page header */ .page-header{ overflow:hidden; padding:1em; color:#fff; position:relative; display:flex; align-items:center; justify-content:center; min-height:22rem; font-size:6rem; font-weight:bold; text-align:center; text-transform:uppercase; background:no-repeat center center / cover #fff; } .page-header-layer{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; opacity:0.7; pointer-events:none; background:#00325d; } @supports (mix-blend-mode:multiply){ .page-header-layer{ mix-blend-mode:multiply; opacity:1; } } .page-header-container{ position:relative; z-index: 2; } @media (max-width:600px){ .page-header{ font-size:4rem; } } /*============*\ # FOOTER # \*============*/ .footer{ margin:3em 0 0 0; color:#fff; } .footer-haut{ background:#00325D; font-size:1.4rem; } .footer-haut-inner{ padding:1em 0; position:relative; display:flex; align-items:center; justify-content:space-between; } .footer-haut-inner::after{ content:""; position:absolute; right:0; bottom:100%; width:0; height:0; border-style:solid; border-width:0 5rem 5rem 5rem; border-color:transparent transparent #d34510 transparent; opacity:0.8; } .footer-logos{ display:flex; align-items:center; justify-content:flex-start; } .footer-logos-coponent:nth-child(2){margin:0 0.5em 0 1.5em;} .widgets-footer--text-3{ display:flex; align-items:center; justify-content:flex-end; } @media (max-width:980px){ .footer-haut-inner{ flex-direction:column; align-items:center; justify-content:center; } .footer-logos{margin-bottom:1em;} } @media (max-width:600px){ .footer-logos{ display:block; text-align:center; } .footer-logos-coponent:nth-child(2){margin:0.5em auto;} } .footer-bas{ background-color:#012441; font-size:1rem; } .footer-bas-inner{ padding:1em 0; display:flex; align-items:center; justify-content:space-between; } .footer-bas a{ color:inherit; text-decoration:none; } .footer-lien-ML a{white-space:nowrap;} .footer-lien-ML-sep{ margin:0 1em; opacity:0.5; } .footer-liens{order:1;} .site-footer-menu--level-1-ul{ display:flex; list-style:none; align-items:center; justify-content:center; text-align:center; margin:2em 1em; padding:0; font-size:1rem; } .site-footer-menu--level-1-li{ margin:0 1em; } .site-footer-menu--level-1-a{ color:#000; text-decoration:none; text-transform:uppercase; font-weight:400; display:flex; align-items:center; justify-content:center; position:relative; } .site-footer-menu--level-1-a::after{ content:""; width:0.5em; height:0.5em; border-right:0.01em solid currentColor; border-bottom:0.01em solid currentColor; transform-origin: center center; transform:rotate(-45deg); margin:0 0.5em 0 0.2em; } @media (max-width:980px){ .footer-bas-inner{ display:block; text-align:center; } } @media (max-width:980px){ .site-footer-menu--level-1-ul{ display:block; } .site-footer-menu--level-1-a{ padding:1em 0; } } /*============*\ # SOCIAL # \*============*/ /* Social */ .header-social{ font-size:1.4rem; color:#00325d; text-align:center; padding:1em 2em; align-self:stretch; border-left:1px solid #d4d4d4; display:flex; align-items:center; justify-content:center; } .footer-social{ color:inherit; text-align:right; } .contact-social{ font-size:1.4rem; color:#00325d; } .contact-social .widget-titre{ font-size:1.5rem; color:#d34510; margin-top:3em; } .widget-social ul{ margin:0; padding:0; list-style:none; } .widget-social li{ margin:0.2em 0.4em; display:inline-block; } .widget-social a{ color:inherit; display:block; width:2em; height:2em; border:0.1em solid currentColor; border-radius:50%; text-indent:100%; overflow:hidden; } .header-social a[href*="linkedin."]{ background-image:url('../design/social-in.php?clr=00325d'); } .header-social a[href*="facebook."]{ background-image:url('../design/social-fb.php?clr=00325d'); } .footer-social a[href*="linkedin."]{ background-image:url('../design/social-in.php?clr=ffffff'); } .footer-social a[href*="facebook."]{ background-image:url('../design/social-fb.php?clr=ffffff'); } .contact-social a[href*="linkedin."]{ background-image:url('../design/social-in.php?clr=00325d'); } .contact-social a[href*="facebook."]{ background-image:url('../design/social-fb.php?clr=00325d'); } /*==================*\ # RÉALISATIONS # \*==================*/ /* LISTE */ .realisations-liste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; padding:10px 0; } .realisations-liste-item{ margin:10px; flex:0 0 auto; width:280px; height:280px; position:relative; overflow:hidden; } .realisations-liste-item:nth-child(n+5){ display:none; } .realisations-liste-item::before{ content:""; position:absolute; right:80%; bottom:80%; width:90%; height:90%; transform-origin:right bottom; transform:rotate(-45deg); transition:0.3s ease-out; transition-property:right, bottom, transform; background:#d34510; opacity:0.8; z-index:1; } .realisations-liste-item:hover::before, .realisations-liste-item:focus::before{ right:5%; bottom:95%; transform:rotate(-90deg); } .realisations-liste-item--image{ background:no-repeat center center / cover #00325d; z-index:0; position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%, -50%) scale(1); transform-origin:center center; transition:transform 0.3s ease-out; } .realisations-liste-item:hover .realisations-liste-item--image, .realisations-liste-item:focus .realisations-liste-item--image{ transform:translate(-50%, -50%) scale(1.1); } .realisations-liste-item--lien{ position:absolute; left:0; top:0%; width:100%; height:200%; padding:100% 0 0 0; display:flex; align-items:center; justify-content:center; z-index:2; color:inherit; text-decoration:none; transition:top 0.3s ease-out; } .realisations-liste-item:hover .realisations-liste-item--lien, .realisations-liste-item:focus .realisations-liste-item--lien{ top:-100%; } .realisations-liste-item--titre{ padding:1.5em; text-align:center; font-weight:bold; color:#fff; font-size:2.4rem; } @media (min-width:981px) and (max-width:1260px){ .realisations-liste-item{ width:220px; height:220px; } } @media (min-width:601px) and (max-width:980px){ .realisations-liste-item{ width:250px; height:250px; } } .realisations-lienMore{text-align:center;} .realisations-lienMore-bouton{ position:relative; padding-right:3em; margin:2em auto; } .realisations-lienMore-bouton::before, .realisations-lienMore-bouton::after{ content:""; display:block; position:absolute; right:1em; bottom:calc(50% - 0.5px); border-bottom:1px solid currentColor; } .realisations-lienMore-bouton::before{ width:1.3em; height:0; } .realisations-lienMore-bouton::after{ width:0.4em; height:0.4em; border-right:1px solid currentColor; transform-origin:right bottom; transform:rotate(-45deg); } /* DETAILS */ .realisation-content{ max-width:800px; } .realisation-images img{ width:100%; display:block; margin:10px 0; } .realisation-footer{ display:flex; align-items:center; justify-content:space-between; text-align:center; padding:3rem 0; } .realisation-footer > *{flex:1 1 33.33%;} .realisation-footer > :first-child{text-align:left;} .realisation-footer > :last-child{text-align:right;} .realisation-footer-lien a{ position:relative; display:inline-block; font-size:1.2rem; line-height:2em; color:#000; opacity:0.7; text-decoration:none; } .realisation-footer-lien-prev a{padding-left:calc(2.08rem + 0.5em);} .realisation-footer-lien-next a{padding-right:calc(2.08rem + 0.5em);} .realisation-footer-lien a::before, .realisation-footer-lien a::after{ content:""; display:block; position:absolute; bottom:calc(50% - 0.5px); border-bottom:1px solid currentColor; font-size:1.6rem; } .realisation-footer-lien-prev a::before, .realisation-footer-lien-prev a::after{left:0;} .realisation-footer-lien-next a::before, .realisation-footer-lien-next a::after{right:0;} .realisation-footer-lien a::before{ width:1.3em; height:0; } .realisation-footer-lien a::after{ width:0.4em; height:0.4em; } .realisation-footer-lien-prev a::after{ border-left:1px solid currentColor; transform-origin:left bottom; transform:rotate(45deg); } .realisation-footer-lien-next a::after{ border-right:1px solid currentColor; transform-origin:right bottom; transform:rotate(-45deg); } .realisation-footer-lien-back{ display:flex; align-items:center; justify-content:center; min-height:6rem; } .realisation-footer-lien-back a{ display:inline-block; padding:1rem; text-decoration:none; color:#fff; } .realisation-footer-lien-back .pictoGrid{ font-size:0rem; padding:0.3rem; background:#000; opacity:0.8; position:relative; transition:0.3s ease-out; transition-property:font-size, padding; } .realisation-footer-lien-back a:hover .pictoGrid, .realisation-footer-lien-back a:focus .pictoGrid{ font-size:1.2rem; padding:1rem 1.5rem; } .realisation-footer-lien-back .pictoGrid::before, .realisation-footer-lien-back .pictoGrid::after, .realisation-footer-lien-back .pictoGrid span::before, .realisation-footer-lien-back .pictoGrid span::after, .realisation-footer-lien-back .pictoGrid span{ content:""; background-color:#000; width:0.6rem; height:0.6rem; position:absolute; } .realisation-footer-lien-back .pictoGrid span:first-child::after, .realisation-footer-lien-back .pictoGrid span:last-child::after{ left:0; } .realisation-footer-lien-back .pictoGrid span:last-child, .realisation-footer-lien-back .pictoGrid span:first-child::before, .realisation-footer-lien-back .pictoGrid::after{ left:calc(100% + 0.2rem); } .realisation-footer-lien-back .pictoGrid span:first-child, .realisation-footer-lien-back .pictoGrid span:last-child::before, .realisation-footer-lien-back .pictoGrid::before{ right:calc(100% + 0.2rem); } .realisation-footer-lien-back .pictoGrid span:first-child::before, .realisation-footer-lien-back .pictoGrid span:last-child::before{ top:0; } .realisation-footer-lien-back .pictoGrid span:last-child, .realisation-footer-lien-back .pictoGrid span:first-child::after, .realisation-footer-lien-back .pictoGrid::before{ top:calc(100% + 0.2rem); } .realisation-footer-lien-back .pictoGrid span:first-child, .realisation-footer-lien-back .pictoGrid span:last-child::after, .realisation-footer-lien-back .pictoGrid::after{ bottom:calc(100% + 0.2rem); } @media (max-width:600px){ .realisation-footer{ flex-wrap:wrap; } .realisation-footer-lien{ flex:1 1 50%; order:-1; } .realisation-footer-lien a{ font-size:1.1rem; } } /*==================*\ # SAVOIR-FAIRE # \*==================*/ /* Frise */ .savoirFaire-frise-titre{ position:relative; z-index:1; } .savoirFaire-frise-image{ position:relative; font-size:2rem; font-weight:bold; line-height:1.2; z-index:0; } .savoirFaire-frise-ancres, .savoirFaire-frise-ancres-ul{ position:absolute; left:0; top:0; width:100%; height:100%; } .savoirFaire-frise-ancres-li{ width:0; height:0; position:absolute; } .savoirFaire-frise-ancres-li:nth-child(1){ left:7%; top:61%; } .savoirFaire-frise-ancres-li:nth-child(2){ left:19.6%; top:72%; } .savoirFaire-frise-ancres-li:nth-child(3){ left:32.2%; top:80%; } .savoirFaire-frise-ancres-li:nth-child(4){ left:44.8%; top:77%; } .savoirFaire-frise-ancres-li:nth-child(5){ left:57.4%; top:69%; } .savoirFaire-frise-ancres-li:nth-child(6){ left:70%; top:58%; } .savoirFaire-frise-ancres-li:nth-child(odd){color:#00325d;} .savoirFaire-frise-ancres-li:nth-child(even){color:#d34510;} .savoirFaire-frise-ancres-a svg{ width:100%; height:100%; } .savoirFaire-frise-ancres-a{ color:currentColor; width:1.2em; height:1.2em; position:absolute; left:-0.6em; top:-0.6em; } .savoirFaire-frise-ancres-a circle{stroke:currentColor;} .savoirFaire-frise-ancres-a path{fill:currentColor;} .savoirFaire-frise-ancres-filet{ position:absolute; width:0; height:1em; border-right:2px dotted currentColor; left:calc(50% - 1px); } .savoirFaire-frise-ancres-label{ position:absolute; left:1px; text-transform:uppercase; transform:translateX(-50%); text-align:center; } @media (min-width:981px){ .savoirFaire-frise-image{ width:940px; margin:-6em 0 0 auto; } .savoirFaire-frise-ancres-li:nth-child(1) .savoirFaire-frise-ancres-filet{height:1em;} .savoirFaire-frise-ancres-li:nth-child(2) .savoirFaire-frise-ancres-filet{height:9em;} .savoirFaire-frise-ancres-li:nth-child(3) .savoirFaire-frise-ancres-filet{height:10em;} .savoirFaire-frise-ancres-li:nth-child(4) .savoirFaire-frise-ancres-filet{height:6em;} .savoirFaire-frise-ancres-li:nth-child(5) .savoirFaire-frise-ancres-filet{height:7em;} .savoirFaire-frise-ancres-li:nth-child(6) .savoirFaire-frise-ancres-filet{height:6em;} .savoirFaire-frise-ancres-filet, .savoirFaire-frise-ancres-label{bottom:100%;} } @media (max-width:980px){ .savoirFaire-frise-image{ width:100%; margin:-2em 0 7em 0; } .savoirFaire-frise-ancres-li:nth-child(4){color:#00325d;} .savoirFaire-frise-ancres-li:nth-child(3){color:#d34510;} .savoirFaire-frise-ancres-li:nth-child(odd) .savoirFaire-frise-ancres-filet, .savoirFaire-frise-ancres-li:nth-child(odd) .savoirFaire-frise-ancres-label{bottom:100%;} .savoirFaire-frise-ancres-li:nth-child(even) .savoirFaire-frise-ancres-filet, .savoirFaire-frise-ancres-li:nth-child(even) .savoirFaire-frise-ancres-label{top:100%;} .savoirFaire-frise-ancres-li:nth-child(1) .savoirFaire-frise-ancres-filet{height:1em;} .savoirFaire-frise-ancres-li:nth-child(2) .savoirFaire-frise-ancres-filet{height:7em;} .savoirFaire-frise-ancres-li:nth-child(3) .savoirFaire-frise-ancres-filet{height:8em;} .savoirFaire-frise-ancres-li:nth-child(4) .savoirFaire-frise-ancres-filet{height:4em;} .savoirFaire-frise-ancres-li:nth-child(5) .savoirFaire-frise-ancres-filet{height:5em;} .savoirFaire-frise-ancres-li:nth-child(6) .savoirFaire-frise-ancres-filet{height:4em;} } @media (max-width:600px){ .savoirFaire-frise-image{ width:100%; margin:6em 0 9em 0; } .savoirFaire-frise-ancres-li:nth-child(1) .savoirFaire-frise-ancres-filet{height:5.5em;} .savoirFaire-frise-ancres-li:nth-child(2) .savoirFaire-frise-ancres-filet{height:6em;} .savoirFaire-frise-ancres-li:nth-child(3) .savoirFaire-frise-ancres-filet{height:5em;} .savoirFaire-frise-ancres-li:nth-child(4) .savoirFaire-frise-ancres-filet{height:2em;} .savoirFaire-frise-ancres-li:nth-child(5) .savoirFaire-frise-ancres-filet{height:2em;} .savoirFaire-frise-ancres-li:nth-child(6) .savoirFaire-frise-ancres-filet{height:2em;} .savoirFaire-frise-ancres-label{ left:calc(1px + 1.5em); text-align:left; } } /* Sections */ .section-savoirFaire{ padding:10rem 0 5rem 0; position:relative; } .section-savoirFaire:nth-child(odd){background:#faf8f6;} .section-savoirFaire:nth-child(even){background:#fff;} .section-savoirFaire::after{ content:""; position:absolute; font-size:1rem; bottom:-10em; width:0; height:0; border-style:solid; border-width:10em; border-color:transparent; z-index:2; } .section-savoirFaire:nth-child(odd)::after{ border-left-width:0; border-right-color:#00325d; right:0; } .section-savoirFaire:nth-child(even)::after{ border-right-width:0; border-left-color:#d34510; left:0; } .section-savoirFaire-container{max-width:970px;} .SF-titre-h2{ text-align:left; margin:0.7em 0; } .section-savoirFaire:nth-child(odd) .SF-titre-h2{color:#d34510;} .section-savoirFaire:nth-child(even) .SF-titre-h2{color:#00325d;} .SF-contenu{font-weight:300;} .SF-contenu p{margin:0;} .SF-qqmots{ color:#fff; font-weight:bold; font-size:2rem; text-align:center; text-transform:uppercase; padding:0.5em 0; margin:0 0 20px 0; } .section-savoirFaire:nth-child(odd) .SF-qqmots{background-color:#d34510;} .section-savoirFaire:nth-child(even) .SF-qqmots{background-color:#00325d;} .SF-liste{margin-top:20px;} .listePoint li{ padding-left:0.511em; text-indent:-0.511em; } .listePoint li::before{content:". ";} .SF-encartPlus{ background:rgba(0,50,93,0.15); padding:1em 1.5em; margin:2em auto 0 auto; } @media (min-width:981px){ .SF-cols{ display:flex; align-items:flex-start; justify-content:space-between; } .SF-cols > *{flex:0 0 auto;} .SF-col-gauche{width:700px;} .SF-col-droite{width:250px;} } @media (max-width:980px){ .SF-col-gauche{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; } .SF-image{ order:1; margin:20px 0; } } @media (min-width:601px) and (max-width:980px){ .SF-col-droite{ overflow:hidden; } .SF-vignette{ float:left; width:calc(50% - 10px); margin:0 20px 0 0; } } @media (max-width:600px){ .SF-col-droite{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; } .SF-qqmots{margin:20px 0 0 0;} .SF-vignette{order:-1;} } /* Vidéo */ .section-video{ padding:6em 0 4em 0; } .section-video-cadrage{ position:relative; } .section-video-titre{ margin-top:0; font-size:3rem; font-weight:700; } .section-video-description{ font-weight:300; } .section-video-colVideo-format iframe{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; } .section-video-lien{ background:url('../design/lienYouTube.svg') no-repeat center center / contain; width:8.4rem; height:3.6rem; display:block; } @media (max-width:1260px){ .section-video-colVideo-format{ padding-top:56.25%; } } @media (max-width:980px){ .section-video{ padding-top:4em; } .section-video-colVideo-format{ position:relative; margin:0 auto 2em auto; } } @media (min-width:981px){ .section-video-cols{ display:flex; align-items:stretch; justify-content:space-between; } .section-video-cols > *{ flex:1 1 50%; max-width:calc(50% - 2em); } .section-video-colVideo-inner{ position:absolute; top:0; left:0; width:calc(50% - 2em); height:auto; } .section-video-colVideo-format iframe{ border-radius:0 1em 1em 0; } } @media (min-width:1261px){ .section-video-colVideo-inner{ height:100%; } } /*=============*\ # CONTACT # \*=============*/ .contact-container{padding-top:2em;} .contact_intro{ font-weight:300; text-align:center; max-width:570px; margin:0 auto 3em auto; } .contact-cols{font-size:1.5rem;} .contact-sousTitre{ font-size:2rem; font-weight:400; margin:0 0 0.5em 0; } .form-ligne{ margin:0 0 20px 0; } .form-ligne input, .form-ligne textarea{ width:100%; } .wpcf7-form{ max-width:600px; margin:0 auto 0 0; font-size:1.5rem; } .wpcf7-acceptance label{ text-indent:-1.8em; padding-left:1.8em; display:block; } .wpcf7-acceptance input[type="checkbox"]{ width:1.5em; height:1.5em; margin:0 0.3em 0 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:1px solid #707070; vertical-align:text-bottom; } .wpcf7-acceptance input[type="checkbox"]::before{ content:""; width:calc(100% - 4px); height:calc(100% - 4px); margin:2px; display:block; background:#d34510; opacity:0; transition:opacity 0.3s ease-out; } .wpcf7-acceptance input[type="checkbox"]:checked::before{opacity:1;} .wpcf7-form{position:relative;} .wpcf7-not-valid-tip{color:#a00;} .wpcf7-mail-sent-ok, .wpcf7-validation-errors{ margin:1em auto; padding:1em 2em; font-weight:bold; } .wpcf7-mail-sent-ok{ background-color:#cfa; color:#040; } .wpcf7-validation-errors{ background-color:#fcc; color:#400; } @media (max-width:980px){ .contact-colDroite{margin-bottom:3em;} } @media (min-width:981px){ .contact-cols{ display:flex; flex-direction:row-reverse; align-items:flex-start; justify-content:space-between; } .contact-cols > *{ flex:0 0 50%; width:calc(50% - 1.5rem); } } @media (max-width:600px){ .form-ligne > *:not(:first-child){margin-top:20px;} } @media (min-width:601px){ .form-ligne{ display:flex; align-items:stretch; justify-content:space-between; } .form-ligne > *{ flex-grow:0; flex-shrink:0; flex-basis:calc(50% - 10px); } .form-ligne > .large{ flex:1 1 100%; } } /*=============*\ # ACCUEIL # \*=============*/ /* Header / diapo */ .home-header{ min-height:55rem; } .home-header-slider, .home-header-slider-inner, .home-header-slider-item{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; } .home-header-slider-item{ background:no-repeat center center / cover; opacity:0; transition:opacity 1s ease-out; } .home-header-slider-item.active{ opacity:1; } .home-header .page-header-layer{ mix-blend-mode:normal; background:rgba(0,50,93,0.4); } .home-header .page-header-layer::before, .home-header .page-header-layer span{ content:""; position:absolute; bottom:50%; width:38.9rem; /* 1/√2 x 55rem */ padding-top:38.9rem; } .home-header .page-header-layer::before{ background:#d34510; opacity:0.8; transform-origin:right bottom; transform:rotate(-45deg); right:calc(100% - 27.5rem); /* 100% - 55rem / 2 */ } .home-header .page-header-layer span{ transform-origin:left bottom; transform:rotate(45deg); left:calc(100% - 27.5rem); overflow:hidden; } .home-header .page-header-layer span::before{ content:""; display:block; position:absolute; left:0; top:calc(100% - 27.5rem); width:27.5rem; height:55rem; background:url('../design/home-diapo-droite.jpg') no-repeat center center / cover; transform-origin:left center; transform:rotate(-45deg); } @media (max-width:980px){ .home-header .page-header-layer::before{ right:calc(100% - 8rem); bottom:80%; } .home-header .page-header-layer span{ left:calc(100% - 8rem); bottom:20%; } .home-header .page-header-layer span::before{ top:calc(100% - 8rem); width:8rem; height:16rem; } } @media (max-width:600px){ .page-header{ min-height:30rem; } } /* Texte intro */ .home-intro{ overflow:hidden; text-align:center; } .home-intro-container{ padding:2rem 11rem 6rem 11rem; position:relative; } .home-intro-container p{ margin:4em 0 0 0; padding:0 4rem; } @media (min-width:981px){ .home-intro-gauche, .home-intro-droite{ position:absolute; bottom:2rem; } .home-intro-gauche{ right:calc(100% - 11rem); } .home-intro-droite{ left:calc(100% - 11rem); } } @media (max-width:980px){ .home-intro-container{ padding:2rem 0 330px 0; } .home-intro-container p{ margin:2em 0 0 0; padding:0; } .home-intro-gauche, .home-intro-droite{ object-fit:contain; object-position: center center; height:310px; position:absolute; bottom:20px; } .home-intro-gauche{left:10%;} .home-intro-droite{right:10%;} } @media (max-width:600px){ .home-intro-gauche{display:none;} .home-intro-droite{ right:0; width:100%; } } /* Savoir-faire */ .home-titre{ padding:1.5em 1em; position:relative; background:#00325d; } .home-titre h2{ color:#fff; margin:0; } .home-savoirFaire-titre{background-color:#d34510;} @media (min-width:981px){ .home-titre{ padding:1.5em 12rem; } .home-savoirFaire-titre::after{ content:""; position:absolute; right:0; top:calc(50% - 12rem); width:0; height:0; border-style:solid; border-width:12rem 12rem 12rem 0; border-color:transparent #dbdbdb transparent transparent; } } .home-savoirFaire-container{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:0 0 2em 0; } .home-savoirFaire-item{ display:inline-block; flex:1 1 25%; padding:1.5rem; max-width:25%; text-align:center; color:inherit; text-decoration:none; } .home-savoirFaire-item--titre{ text-transform:uppercase; font-size:1.6rem; font-weight:bold; margin:0.5em 0; } .home-savoirFaire-item--image{ position:relative; padding-top:60%; } .home-savoirFaire-item--image img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } @media (min-width:601px) and (max-width:980px){ .home-savoirFaire-item{ flex-basis:50%; max-width:50%; } } @media (max-width:600px){ .home-savoirFaire-item{ flex-basis:100%; max-width:100%; } } /* Équipe */ .home-equipe{ background:#faf8f6; position:relative; overflow:hidden; padding:0 0 3rem 0; } .home-equipe::before{ content:""; position:absolute; display:block; left:0; top:0; z-index:0; width: 0; height: 0; border-style: solid; border-width: 50vw 0 50vw 50vw; border-color: transparent transparent transparent #d8d8d8; opacity:0.8; } .home-equipe-inner{ position:relative; z-index:1; } .home-equipe-intro{ position:relative; z-index:1; text-align:center; font-weight:300; max-width:960px; } .home-equipe-liste{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; } .equipe-item{ flex:0 0 25%; margin:0; padding:0; text-align:center; } .equipe-item-inner{padding:0.75em;} .equipe-image{ position:relative; padding-top:126%; } .equipe-image img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center top; } .equipe-nom{ font-size:1.6rem; font-weight:bold; text-transform:uppercase; margin:1em 10px 0.5em 10px; } .equipe-label{ font-size:1.5rem; color:#7c7b7b; } @media (max-width:980px){ .equipe-image{ padding-top:100%; } .equipe-item{ flex-basis:50%; } } @media (max-width:600px){ .equipe-item{ flex-basis:100%; } }