@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900');
/* =====================================================================
   all-in-web.fr : feuille COMPLÈTE du nouveau thème (novembre 2026).
   À coller SEULE dans la feuille du thème, en remplaçant tout son contenu.
   Partie 1 : base du thème actuel (copie de /p/style/8.css).
   Partie 2 : nouvelle charte (all-in-web.css).
   Les @import doivent rester tout en haut du fichier.
   ===================================================================== */

/* ---------- Partie 1 : base du thème (8.css) ---------- */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #0f1219;
	background-color: #f3f3f3;
	padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, a:visited {
    color:#0f1219;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: underline;
    color: #0f1219;
}

p {
    /*font-weight: 300;*/
    font-size: 16px;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
}

p u {
    color:#ff6a62;
    text-decoration: none;
}

main ul  {
	list-style: none;
	margin: 1% 0;
	padding: 0;
}

main ul li:before {
	content: "#";
}

h1.main {
    text-align: center;
    padding: 5% 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 28px;
    text-shadow: 0 0 10px #160b03;
    background: url(https://v2.all-in-web.fr/f/db041abe9323946673406d653666a0fd3356bf4e/bg_philo.png) no-repeat;
}

h1.titre_page {
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

h2 {
    font-weight: 900;
    font-size: 28px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

h2 b,
h3 b,
h1 span b,
h1.titre_page b{
    color: #17c2c0;
}

h3 {
    font-family: 'Montserrat', sans-serif;
}

h4 {
    font-family: 'Montserrat', sans-serif;
}

h5 {
    font-weight: 500;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}

.title {
    width: 100%;
    text-align: center;
    height: 92vh;
    padding: 35vh;
}

.title h1 {
    font-size: 55px;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    color: white;
    background: none;
    padding: 1%;
    text-shadow: 0 0 10px #160b03; 
} 

.title h1 span {
	font-size: 30px;
	font-weight: 800;
	font-family: 'Montserrat', sans-serif;
	color: white;
	text-shadow: 0 0 10px #160b03;
	padding: 0;
	margin: 0;
	text-transform: initial;
	display: block;
	line-height: 1.28em;
	margin-top: 2%;
}

.title h2 {
    font-size: 30px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-shadow: 0 0 10px #160b03;
    padding: 0;
    margin: 0;
    text-transform: initial;
}

button {
  padding: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  padding: .5rem 3rem;
  box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
  border: solid 2px transparent;
  background-image: linear-gradient(rgba(243, 243, 243, 0), rgba(243, 243, 243, 0)), linear-gradient(101deg, #ff6a62, #ff8e5d);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 1px 1000px 1px #f3f3f3 inset;
  cursor: pointer;
}

button:hover {
  box-shadow: none;
  color: white;
  transition: all 0.4s ease 0s;
}

.primary {
	font-size: 15px !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: white !important;
	line-height: 22px;
	background: #17c2c0 !important;
	padding: 5px 15px !important;
	margin-top: 2% !important;
	display: inline-block;
	cursor: pointer !important;
	border: 0 !important;
	border-radius: 20px !important;
	min-width: 150px;
	text-align: center;
}

.main-color {
	color: #17c2c0;
}

.second-color {
	color: #ff6a62;
}

.bg-orange {
	background: linear-gradient(#ff8e5d, #ff6a62);
	color: white;
}

.bg-blue {
	background-color: #17c2c0;
	color: white;
}

.bg-orange button,
.bg-black  button {
	padding: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	padding: .5rem 3rem;
	border: solid 2px #f3f3f3;
	box-shadow: none;
	background: transparent;
	background-image: none;
	cursor: pointer;
	color: white;
}

.bg-orange button:hover,
.bg-black button:hover {
	color: #0f1219;
	transition: all 0.4s ease 0s;
	 background: #f3f3f3; 
}

.spacing {
    padding: 2% 0;
}

.border:hover {
	box-shadow: inset 0 0 0 40px rgba(0,0,0,.5);
	transition: all 0.3s ease;
}

.scale:hover {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	transition: all 0.3s ease;
}

/*** HEADER ***********************************************************************/

header {
	display: flex;
	width: 1118px;
    margin: 0 auto;
    justify-content: space-between;
}

	.logo {
	    width: 25%;
	    padding: 1.5% 0;
	}

	nav {
        width: 71%;
        z-index: 10;
    }
    
/*** MENU RESPONSIVE VERTICAL *******************************************************/

header nav {
    position: relative;
    line-height: initial;
}

/* button */

header nav .arrow {
    display: flex;
    justify-content: center;
    background: #005cb0;
    cursor: pointer;
    width: 30px;
    height: 100%;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
}

header nav .arrow::before {
    content: "\f0dd";
    font-family: 'Icons';
}

/***/

header nav .button {
    width: 100%;
    padding: 1em;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

header nav .button:before {
    content: "Menu";
    width: 100%;
    display: block;
}

header nav .button+input {
    width: 100%;
    height: 40px;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    margin: 0;
    left: 0;
    top: 0;
}

/**/

header nav ul {
    padding: 0;
    margin: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    transition: font-size 0.3s 0.2s, color 0.2s;
}

header nav ul li a,
header nav ul li .label,
header nav ul li a:visited {
    font-size: inherit !important;
}

header nav input:checked+ul {
    font-size: 13px !important;
    color: #fff;
    transition: font-size 0.3s, color 0.2s 0.3s;
}

header nav li:focus>ul {
    font-size: 14px;
    color: #fff;
    transition: font-size 0.3s, color 0.2s 0.3s;
}

header nav li:hover,
header nav li:focus {

}

header nav li {
    list-style-type: none;
    outline: none;
    position: relative;
}

header nav li a,
header nav li .label,
header nav li a:visited {
    color:#0f1219;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 300;
    display: block;
    vertical-align: middle;
    line-height: 2.5;
    transition: 0.4s;
    padding: 0 15px;
    width: 100% !important;
    text-align: center;
}

header nav li a:hover,
header nav li a:focus,
header nav li a:active {
    text-decoration: none;
    background-color: #17c2c0;
    color: #fff;
}

[view="4524"] div.date {
	display: none;
}

.item-data.block-26376.type-file.logo {
	margin: 0 auto;
}
.item-data.block-26376.type-file.logo div img {
	max-width: 100%;
}

/*** pour les 3 regles ci-dessous c'est pour aligner les questions/reponses 
copier la première ligne de régle et changer l'identifiant du formulaire ***/
[form="19"] div.ui div.row div.column,
[form="4"] div.ui div.row div.column{
	width: 100% !important;
	text-align: left !important;
}

[form="19"] div.ui div.row div.name,
[form="4"] div.ui div.row div.name{
	border:none !important;
}

[form="19"] .info,
[form="4"] .info{
	padding-top: 45px !important;
}


/*** MENU PRINCIPAL HORIZONTAL *******************************************************/

@media screen and (min-width: 800px) {
    /* button */
    header nav .button {
        display: none;
    }

    header nav ul li .arrow {
        display: none;
    }

    /* submenu show*/

    header nav ul li ul {
        display: none;
        z-index: 10;
    }

    header nav ul li:hover ul {
        display: block;
        position: absolute;
        transition: 0.4s;
    }

    /***/

    header nav ul {
        display: flex;
        justify-content: space-between;
        overflow: inherit;
    }

    header nav ul li {
        position: initial;
    }

    header nav ul li:hover,
    header nav ul li:focus,
    header nav ul li:active {
        background-color: #17c2c0;
    }

    header nav ul li a,
    header nav ul li .label,
    header nav ul li a:visited {
        font-size: 13px !important;
        line-height: 6.6;
    }

}


/*** MAIN ***********************************************************************/

main {
	width: 100%;
}

.wrapper-full-screen {
	width: 100%;
}

.wrapper-large {
	width: 70%;
	margin: 0 auto;
}

.wrapper,
.block-26377 {
	width: 1118px;
	margin: 0 auto;
}

.left-structure-block {
	display: table-cell;
}

.right-structure-block {
	background: #f3f3f3;
	display: table-cell;
}

.content-bg {
	background: url(https://v2.all-in-web.fr/f/db041abe9323946673406d653666a0fd3356bf4e/bg_philo.png) no-repeat;
	background-size: cover;
	display: table;
	justify-content: flex-end;
	padding: 5% 0;
	width: 100%;
	margin: 0 0 5% 0;
}

	.wrapper-cell {
		width: 1118px;
		margin: 0 auto;
		display: table-cell;
	}

		.content-wrapper-cell {
			width: 65%;
			background: #f3f3f3;
			float: right;
			padding: 3% 0 3% 5%;
		}

/** home **/

    .agency-box {
		height: 92vh;
        background: url(/f/80922334daa29e7cad0f00847c74823b26d831a1/bg_all_in_web.jpg);
		background-size: cover;
    }
    
	.agency-content {
		padding: 5% 0;
	}

		.agency-content .two-columns {
			margin: 0 -3% 30;
		}

			.agency-content .agency {
				padding: 3%;
			}

			.agency-content .bg-orange {
				width: 30.33%;
				padding: 2% 3%;
			}

	.software-content {
		background: url(/f/9d30573e0bacdf6ce52508efdf8987636b71d1c7/bg_software.jpg) no-repeat;
        background-size: cover;
		display: table;
		justify-content: flex-end;
		padding: 5% 0;
        width: 100%;
        margin: 0 0 5% 0;
	}

		.software-content .two-columns img {
			float: left;
			padding: 0 5% 0 0;
		}

		.software-content .two-columns h3 {
			font-size: 17px;
			font-weight: 300; 
			text-transform: uppercase;
			padding: 0;
			margin: 0;
		}

		.software-content .two-columns p {
			font-size: 12px;
		}

	.skills-content {
		display: table;
		justify-content: flex-end;
        width: 90%;
        margin: 0 auto !important;
	}


		.skills-content .three-columns div {
			padding: 0;
		}

			.skills-content figure {
				position: relative;
				overflow: hidden;
				background: #3085a3;
				text-align: center;
				
				margin: 0;
			}

			.skills-content figure img {
				position: relative;
				display: block;
				min-height: 100%;
				max-width: 100%;
				opacity: 0.8;
			}

			.skills-content figure figcaption {
				color: #fff;
				text-transform: uppercase;
				font-size: 1.25em;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}

			.skills-content figure figcaption::before,
			.skills-content figure figcaption::after {
				pointer-events: none;
			}

			.skills-content figure figcaption,
			.skills-content figure figcaption > a {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			figure.effect-sadie figcaption::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
				background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
				content: '';
				opacity: 0;
				-webkit-transform: translate3d(0,50%,0);
				transform: translate3d(0,50%,0);
			}

			figure.effect-sadie h2 {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				color: #ffffff;
				-webkit-transition: -webkit-transform 0.35s, color 0.35s;
				transition: transform 0.35s, color 0.35s;
				-webkit-transform: translate3d(0,-50%,0);
                transform: translate3d(0,-50%,0);
                text-shadow: 0 0 10px #160b03; 
			}

			figure.effect-sadie figcaption::before,
			figure.effect-sadie p {
				-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
				transition: opacity 0.35s, transform 0.35s;
			}

			figure.effect-sadie p {
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 9em 0;
				width: 100%;
				opacity: 0;
				-webkit-transform: translate3d(0,10px,0);
				transform: translate3d(0,10px,0);
			}

			figure.effect-sadie:hover h2 {
				color: #17c2c0;
				-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
				transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
			}

			figure.effect-sadie:hover figcaption::before,
			figure.effect-sadie:hover p {
				opacity: 1;
				-webkit-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}

/**Software page**/

.item-1418417 .content-bg {
	background: url(/f/9d30573e0bacdf6ce52508efdf8987636b71d1c7/bg_software.jpg) no-repeat;
	background-size: cover;
	display: table;
	justify-content: flex-end;
	padding: 5% 0;
	width: 100%;
	margin: 0 0 5% 0;
}

/**knowledge page**/

.item-1418509 .content-bg {
	background: url(/f/db041abe9323946673406d653666a0fd3356bf4e/bg_philo.png) no-repeat;
	background-size: cover;
	display: table;
	justify-content: flex-end;
	padding: 5% 0;
	width: 100%;
	margin: 0 0 5% 0;
}

/**contact page**/

.item-1418511 .content-bg {
	background: url(/f/34d58899b63d47d9839ae5c79437e07b0be1f8fe/bg_contact.jpg) no-repeat;
	background-size: cover;
	display: table;
	justify-content: flex-end;
	padding: 5% 0;
	width: 100%;
	margin: 0 0 5% 0;
}

/** solution page**/

.item-1418508 .content-bg {
	background: url(/f/9fbf134e6557461598890b8b1daa99ee5a6db33b/bg_solution.jpg) no-repeat;
	background-size: cover;
	display: table;
	justify-content: flex-end;
	padding: 5% 0;
	width: 100%;
	margin: 0 0 5% 0;
}

.wrapper-icon {
    height: 283px;
}

.wrapper-icon img {
	padding: 20%;
	width: 100%;
}

/*** FOOTER ***********************************************************************/

footer {
	background-color: #0f1219;
	color: white;
    padding: 3% 0;
    margin: 5% 0 0 0;
}

	footer h3 {
		text-transform: uppercase;
		font-size: 16px;
	}

	footer .wrapper {
		display: flex;
	}

	footer .color {
		color: #17c2c0;
		font-size: 24px;
    }
    
	footer a {
        color: #fff !important;
        text-decoration: underline;
    }
    
	footer a:hover {
        color: #17c2c0 !important;
        text-decoration: underline;
	}

    .mentions {
        text-align: center;
        font-size: 10px;
    }


/*** ACTUS ***********************************************************************/



item-gallery .content .title,
item-gallery .content .text {
    padding: 0 !important;
    margin: 0 !important;
  }

  item-gallery .content .text {
    text-align: justify;
    }

item-gallery .content .title h3 {
    margin: 0 0 2% 0;
    }


item-gallery .content .title a {
    color: #17c2c0;
  }

item-gallery .title {
    width: 100%;
    height: auto !important;
    padding: 0 2%;
  }



/*** COLUMNS ***********************************************************************/

.two-col {
    width: 50%;
}

.four-col {
    width: 25%;
}

/*** RESPONSIVE ***********************************************************************/


@media screen and (max-width: 1118px) {
	
	header,
	.wrapper,
    .block-26377,
	footer {
		width: 100%;
    }
    
    .one-column,
    .two-columns,
    .three-columns,
    .four-columns,
    .six-columns,
    .eight-columns {
        margin: 0 !important ;
    }

    header nav ul li a,
    header nav ul li .label,
    header nav ul li a:visited {
        font-size: 13px;
    }
}

@media screen and (max-width: 990px) {

    header {
        width: 100%;
        display: block;
    }

    .logo {
        width: 100%;
        padding: 6.5% 0;
    }

    nav {
        width: 100%;
        z-index: 10;
        border-top: 1px solid #ccc;
    }

    .title {
        padding: 35vh 0;
    }

    .left-structure-block,
    .right-structure-block {
        display: none;
    }

    .wrapper-cell {
        width: 100%;
        display: block;
    }

    .content-wrapper-cell {
        width: 94%;
        float: none;
        margin: 0 auto;
    }
}

    @media screen and (max-width: 700px) {


        .wrapper-icon img {
            width: 150px !important;
            padding: 2%;
        }

        .wrapper-icon {
            height: auto;
          }

        .two-col {
            width: 96% !important;
        }
        
        .four-col {
            width: 48% !important;
            padding: 6% 0;
            display: inline-block;
            vertical-align: top;
            text-align: left;
        }

        .four-col p {
            font-size: 12px;
        }
        
        .one-column.centered > * {
        width: 100% !important;
        }
        
        .two-columns > * {
          width: 96% !important;
        }

        .three-columns > * {
            width: 96% !important;
        }
        
        .four-columns > * {
            width: 96% !important;
        }
        
        .six-columns > * {
            width: 96% !important;
        }
        
        .eight-columns > * {
            width: 96% !important;
        }
        
        .agency-box{
          background:none;
          background-color:#434D55;
          height:auto;
        }
        
        .agency-box .title{
          padding:0px;
          height:auto;
        }
        
        footer .wrapper {
            display: initial;
            text-align: center;
        }



    }



/* ---------- Partie 2 : nouvelle charte ---------- */
/* =====================================================================
   all-in-web.fr : design V2
   À coller À LA FIN de la feuille du thème (/p/style/8.css).
   Direction graphique : voir DESIGN.md (le "fil" entre le site et la gestion).
   Les nouveaux blocs portent la classe .aw ; l'en-tête, le pied de page et
   la typographie générale sont aussi redéfinis ici.
   ===================================================================== */


:root {
    --aw-encre: #13243A;
    --aw-lagune: #0E7C7B;
    --aw-turquoise: #17C2C0;
    --aw-corail: #C8412E;
    --aw-brume: #EEF3F2;
    --aw-papier: #FFFFFF;
    --aw-trait: #D5E0DF;
    --aw-texte-doux: #4A5A6A;
    --aw-largeur: 1160px;
    --aw-police: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Typographie générale ------------------------------------------- */
html, body {
    font-family: var(--aw-police);
    background: var(--aw-papier);
    color: var(--aw-encre);
}
body p, body li, body h1, body h2, body h3, body h4, body h5 { font-family: var(--aw-police); }

:focus-visible { outline: 3px solid var(--aw-turquoise); outline-offset: 3px; }

/* --- En-tête ---------------------------------------------------------- */
header {
    width: auto;
    max-width: var(--aw-largeur);
    padding: 0 24px;
    align-items: center;
}
header .logo { width: auto; padding: 18px 0; }
header .logo img { width: 210px; height: auto; display: block; }
header nav { width: auto; }
@media screen and (min-width: 800px) {
    header nav ul { gap: 4px; align-items: center; }
    header nav ul li a,
    header nav ul li a:visited {
        font-size: 15px !important;
        line-height: 1 !important;
        text-transform: none;
        font-weight: 500;
        padding: 12px 14px;
        border-radius: 8px;
    }
    header nav ul li:hover, header nav ul li:focus, header nav ul li:active { background: none; }
    header nav ul li a:hover, header nav ul li a:focus { background: var(--aw-brume); color: var(--aw-encre); }
    header nav ul li.aw-nav-cta a,
    header nav ul li.aw-nav-cta a:visited {
        background: var(--aw-corail);
        color: #fff;
        font-weight: 700;
        padding: 13px 20px;
        margin-left: 10px;
        border-radius: 999px;
    }
    header nav ul li.aw-nav-cta a:hover { background: var(--aw-encre); color: #fff; }
}

/* --- Sections .aw ----------------------------------------------------- */
.item-data.aw { padding: 88px 0; background: var(--aw-papier); }
.item-data.aw > div { max-width: var(--aw-largeur); margin: 0 auto; padding: 0 24px; }
.item-data.aw.aw-brume { background: var(--aw-brume); }
.item-data.aw.aw-encre { background: var(--aw-encre); color: #E6EEF0; }

.aw h1, .aw h2, .aw h3 { text-transform: none; color: inherit; font-family: var(--aw-police); }
.aw h1 {
    font-size: clamp(36px, 5.2vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 24px;
}
.aw h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 20px;
    max-width: 22ch;
}
.aw h3 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.aw h2 b, .aw h3 b, .aw h1 b { color: inherit; }
.aw p, .aw li { font-size: 17px; line-height: 1.6; }
.aw p { max-width: 68ch; margin: 0 0 16px; }
.aw .aw-intro { font-size: 20px; line-height: 1.55; color: var(--aw-texte-doux); max-width: 56ch; }
.aw.aw-encre .aw-intro { color: #B9C8CE; }
.aw .aw-petit { font-size: 15px; color: var(--aw-texte-doux); }

.aw a, .aw a:visited { color: var(--aw-lagune); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.aw a:hover { color: var(--aw-encre); text-decoration-thickness: 2px; }
.aw.aw-encre a, .aw.aw-encre a:visited { color: #7FE0DE; }

/* Le thème met "#" devant chaque élément de liste : on le remplace */
main .aw ul { list-style: none; padding: 0; margin: 8px 0 16px; }
main .aw ul li { position: relative; padding-left: 20px; margin: 6px 0; }
main .aw ul li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: .66em;
    width: 8px;
    height: 2px;
    background: var(--aw-turquoise);
}

/* Grilles simples (remplacent les colonnes du CMS dans les blocs .aw) */
.aw .aw-cols { display: grid; gap: 40px 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aw .aw-cols.aw-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aw .aw-cols.aw-large-gauche { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.aw .aw-cols.aw-large-droite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
.aw .aw-cols > * { min-width: 0; }

/* --- Boutons ---------------------------------------------------------- */
.aw .aw-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 32px; }
.aw a.aw-btn, .aw a.aw-btn:visited {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--aw-corail);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s;
}
.aw a.aw-btn:hover, .aw a.aw-btn:focus-visible { background: var(--aw-encre); color: #fff; }
.aw a.aw-lien-fort, .aw a.aw-lien-fort:visited { font-weight: 700; color: var(--aw-encre); }
.aw.aw-encre a.aw-btn:hover { background: #fff; color: var(--aw-encre); }

/* --- Accroche --------------------------------------------------------- */
.item-data.aw.aw-accroche { padding: 72px 0 96px; background: linear-gradient(180deg, var(--aw-brume) 0%, var(--aw-papier) 100%); }
.aw-accroche .aw-cols { align-items: center; }
.aw-accroche h1 { max-width: 15ch; }
.item-data.aw.aw-accroche-page { padding: 64px 0 48px; background: var(--aw-brume); }
.aw-accroche-page h1 { max-width: 20ch; font-size: clamp(32px, 4.4vw, 52px); }
.aw-accroche-page .aw-intro { margin-bottom: 0; }

/* --- Le fil (élément signature de l'accueil) ------------------------- */
.aw-fil {
    background: var(--aw-encre);
    color: #E6EEF0;
    border-radius: 20px;
    padding: 32px 32px 28px;
    position: relative;
}
.aw-fil-titre { font-size: 14px; color: #9FB3BC; margin: 0 0 22px; }
.aw-fil ol { list-style: none; margin: 0; padding: 0; position: relative; }
.aw-fil ol:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 14px;
    bottom: 26px;
    width: 2px;
    background: linear-gradient(var(--aw-turquoise), rgba(23,194,192,.25));
    transform-origin: top;
}
.aw-fil li { position: relative; padding: 0 0 22px 44px; margin: 0; }
.aw-fil li:last-child { padding-bottom: 0; }
main .aw-fil li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--aw-encre);
    box-shadow: inset 0 0 0 3px var(--aw-turquoise);
}
.aw-fil .aw-fil-lieu { display: block; font-size: 13px; font-weight: 600; color: var(--aw-turquoise); margin-bottom: 2px; }
.aw-fil .aw-fil-quoi { display: block; font-size: 17px; font-weight: 600; color: #fff; line-height: 1.35; }
.aw-fil .aw-fil-detail { display: block; font-size: 14px; color: #9FB3BC; margin-top: 2px; }
.aw-fil li.aw-fil-site:before { background: var(--aw-turquoise); }
.aw-fil-pied { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; color: #C9D6DB; }

/* Le fil se déroule une fois au chargement */
@media (prefers-reduced-motion: no-preference) {
    .aw-fil ol:before { animation: aw-trace 1.6s .3s ease-out both; }
    .aw-fil li { animation: aw-etape .5s ease-out both; }
    .aw-fil li:nth-child(1) { animation-delay: .2s; }
    .aw-fil li:nth-child(2) { animation-delay: .65s; }
    .aw-fil li:nth-child(3) { animation-delay: 1.1s; }
    .aw-fil li:nth-child(4) { animation-delay: 1.55s; }
    .aw-fil-pied { animation: aw-etape .5s 2s ease-out both; }
}
@keyframes aw-trace { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aw-etape { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Références (vignettes) ------------------------------------------ */
.item-data.aw.aw-confiance { padding: 40px 0; border-top: 1px solid var(--aw-trait); border-bottom: 1px solid var(--aw-trait); }
.aw-confiance .aw-confiance-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.aw-confiance p { margin: 0; font-weight: 600; }
main .aw-confiance ul { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
main .aw-confiance ul li { padding: 0; margin: 0; }
main .aw-confiance ul li:before { display: none; }
.aw-confiance img { height: 56px; width: auto; border-radius: 6px; border: 1px solid var(--aw-trait); display: block; }

/* --- Deux métiers ----------------------------------------------------- */
.aw-metier { padding: 36px; border-radius: 20px; }
.aw-metier.aw-metier-agence { background: var(--aw-brume); }
.aw-metier.aw-metier-logiciel { border: 2px solid var(--aw-encre); }
.aw-metier .aw-metier-nom { font-size: 15px; font-weight: 700; color: var(--aw-lagune); margin: 0 0 12px; }
.aw-metier h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 14px; }

/* --- Citation --------------------------------------------------------- */
.aw blockquote.aw-citation { margin: 0; padding: 0; border: 0; }
.aw blockquote.aw-citation p {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.01em;
    max-width: 40ch;
    color: #fff;
}
.aw blockquote.aw-citation p:before { content: "« "; color: var(--aw-turquoise); }
.aw blockquote.aw-citation p:after { content: " »"; color: var(--aw-turquoise); }
.aw blockquote.aw-citation footer {
    background: none;
    color: #B9C8CE;
    padding: 0;
    margin: 20px 0 0;
    font-size: 16px;
    display: block;
}
.aw blockquote.aw-citation footer b { color: #fff; }
/* Citations courtes sur fond clair */
.aw blockquote.aw-citation.aw-claire p { color: var(--aw-encre); font-size: 21px; }
.aw blockquote.aw-citation.aw-claire footer { color: var(--aw-texte-doux); }
.aw blockquote.aw-citation.aw-claire footer b { color: var(--aw-encre); }

/* --- Cartes (seulement pour les listes d'objets) --------------------- */
.aw .aw-carte { display: block; }
.aw a.aw-carte, .aw a.aw-carte:visited { color: var(--aw-encre); text-decoration: none; }
.aw a.aw-carte p { color: var(--aw-texte-doux); }
.aw a.aw-carte .aw-type { color: var(--aw-lagune); }
.aw a.aw-carte:hover h3, .aw a.aw-carte:focus-visible h3 { color: var(--aw-lagune); text-decoration: underline; text-underline-offset: 3px; }
.aw .aw-carte img.aw-vignette {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    border: 1px solid var(--aw-trait);
    margin-bottom: 16px;
    display: block;
}
.aw .aw-carte .aw-type { font-size: 14px; font-weight: 600; color: var(--aw-lagune); margin: 0 0 4px; }
.aw .aw-carte h3 { margin-bottom: 6px; }
.aw .aw-carte p { font-size: 16px; }

/* Liste de pages Assotools */
.aw .aw-liens-assotools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--aw-trait); }
.aw .aw-liens-assotools > div { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--aw-trait); }
.aw .aw-liens-assotools h3 a { color: var(--aw-encre); text-decoration: none; }
.aw .aw-liens-assotools h3 a:hover { color: var(--aw-lagune); text-decoration: underline; }
.aw .aw-liens-assotools p { font-size: 16px; color: var(--aw-texte-doux); margin: 0; }

/* --- Étapes (suite réelle) ------------------------------------------- */
.aw ol.aw-etapes { list-style: none; counter-reset: aw; margin: 0; padding: 0; }
.aw ol.aw-etapes > li { counter-increment: aw; position: relative; padding: 0 0 32px 72px; margin: 0; }
.aw ol.aw-etapes > li:after {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 6px;
    width: 2px;
    background: var(--aw-trait);
}
.aw ol.aw-etapes > li:last-child:after { display: none; }
main .aw ol.aw-etapes > li:before {
    content: counter(aw);
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--aw-papier);
    box-shadow: inset 0 0 0 2px var(--aw-lagune);
    color: var(--aw-lagune);
    font-weight: 800;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aw ol.aw-etapes > li h3 { padding-top: 11px; }

/* --- Encadré ---------------------------------------------------------- */
.aw .aw-encadre { background: var(--aw-brume); border-radius: 16px; padding: 28px 30px; }
.aw.aw-brume .aw-encadre { background: var(--aw-papier); }

/* --- Tableau ---------------------------------------------------------- */
.aw table.aw-table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 16px; }
.aw table.aw-table th, .aw table.aw-table td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--aw-trait); }
.aw table.aw-table thead th { border-bottom: 2px solid var(--aw-encre); font-weight: 700; }

/* --- FAQ -------------------------------------------------------------- */
.aw details.aw-faq { border-bottom: 1px solid var(--aw-trait); }
.aw details.aw-faq:first-of-type { border-top: 1px solid var(--aw-trait); }
.aw details.aw-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 18px;
    padding: 20px 44px 20px 0;
    position: relative;
}
.aw details.aw-faq summary::-webkit-details-marker { display: none; }
.aw details.aw-faq summary:after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--aw-lagune);
    border-bottom: 2px solid var(--aw-lagune);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s;
}
.aw details.aw-faq[open] summary:after { transform: translateY(-30%) rotate(-135deg); }
.aw details.aw-faq p { margin: 0 0 22px; }

/* --- Formulaire (maquette du contact) -------------------------------- */
.aw .aw-form label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.aw .aw-form input, .aw .aw-form select, .aw .aw-form textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid #B9C6C8;
    border-radius: 10px;
    background: #fff;
    color: var(--aw-encre);
}
.aw .aw-form .aw-champ { margin-bottom: 18px; }
.aw .aw-form .aw-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* --- Article ---------------------------------------------------------- */
.aw.aw-article > div > div { max-width: 720px; }
.aw.aw-article h2 { font-size: 28px; max-width: none; margin-top: 48px; }
.aw .aw-reponse { font-size: 19px; line-height: 1.6; border-left: 4px solid var(--aw-turquoise); padding: 4px 0 4px 22px; margin: 0 0 28px; max-width: none; }

/* --- Bandeau final ---------------------------------------------------- */
.item-data.aw.aw-final { background: var(--aw-encre); color: #E6EEF0; padding: 80px 0; }
.aw-final h2 { color: #fff; }
.aw-final .aw-actions { margin-top: 24px; }

/* --- Repères à compléter (ne doivent pas rester en ligne) ------------- */
.aw-todo {
    background: #FFF1A6;
    color: #5A4A00;
    font-size: 14px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* --- Pied de page ----------------------------------------------------- */
footer { background: var(--aw-encre); margin: 0; padding: 56px 0 24px; font-family: var(--aw-police); }
footer .wrapper { max-width: var(--aw-largeur); width: auto; padding: 0 24px; gap: 40px; }
footer h3 { text-transform: none; font-size: 20px; line-height: 1.3; }
footer .color { font-size: 20px; color: #7FE0DE; }
footer p, footer li { font-size: 15px; color: #C9D6DB; }
footer ul { list-style: none; padding: 0; }
footer ul li { margin: 0 0 8px; }
footer a, footer a:visited { color: #fff !important; text-decoration: none; }
footer a:hover { color: #7FE0DE !important; text-decoration: underline; }
footer .mentions { margin-top: 32px; font-size: 13px; color: #9FB3BC; }

/* --- Responsive ------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .item-data.aw { padding: 64px 0; }
    .aw .aw-cols, .aw .aw-cols.aw-3, .aw .aw-cols.aw-large-gauche, .aw .aw-cols.aw-large-droite { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .aw .aw-liens-assotools { grid-template-columns: minmax(0, 1fr); }
    .item-data.aw.aw-accroche { padding: 48px 0 64px; }
}
@media screen and (max-width: 799px) {
    header { padding: 0; }
    header .logo { padding: 18px 16px; }
    header nav ul li.aw-nav-cta a { background: var(--aw-corail); color: #fff; font-weight: 700; }
}
@media screen and (max-width: 600px) {
    .item-data.aw > div { padding: 0 16px; }
    .aw-fil { padding: 24px 20px; }
    .aw-metier { padding: 26px 22px; }
    .aw .aw-form .aw-deux { grid-template-columns: 1fr; }
    .aw table.aw-table { font-size: 14px; }
    .aw table.aw-table th, .aw table.aw-table td { padding: 10px 6px; }
}

/* =====================================================================
   V2.1 : plus de couleur (palette du site actuel)
   Turquoise franc #17C2C0 et dégradé orange #FF6A62 → #FF8E5D, comme sur
   l'ancien site, utilisés en GRANDS APLATS avec du texte bleu nuit
   (contraste 7,9:1 sur le turquoise, 5,7:1 sur l'orange). Le blanc n'est
   jamais posé sur ces deux couleurs (contraste insuffisant).
   ===================================================================== */
:root {
    --aw-orange: linear-gradient(115deg, #FF6A62 0%, #FF8E5D 100%);
    --aw-turquoise-clair: #E2F7F6;
}

/* Accroches : aplat turquoise de la marque */
.item-data.aw.aw-accroche,
.item-data.aw.aw-accroche-page {
    background: var(--aw-turquoise);
    position: relative;
    overflow: hidden;
}
.item-data.aw.aw-accroche:after,
.item-data.aw.aw-accroche-page:after {
    /* grande pastille orange, rappel du logo */
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--aw-orange);
    right: -180px;
    bottom: -260px;
    opacity: .95;
    pointer-events: none;
}
.item-data.aw.aw-accroche-page:after { width: 380px; height: 380px; right: -120px; bottom: -220px; }
.item-data.aw.aw-accroche > div, .item-data.aw.aw-accroche-page > div { position: relative; z-index: 1; }
.aw-accroche .aw-intro, .aw-accroche-page .aw-intro, .aw-accroche .aw-petit, .aw-accroche-page .aw-petit { color: var(--aw-encre); }
.aw-accroche a.aw-lien-fort, .aw-accroche-page a.aw-lien-fort,
.aw-accroche-page a, .aw-accroche-page a:visited { color: var(--aw-encre); }
.aw-accroche .aw-fil { box-shadow: 0 30px 60px -20px rgba(19,36,58,.45); }

/* Sections alternées : turquoise très clair au lieu de gris */
.item-data.aw.aw-brume { background: var(--aw-turquoise-clair); }
.aw .aw-encadre { background: var(--aw-turquoise-clair); }
.aw.aw-brume .aw-encadre { background: #fff; }

/* Bandeau orange (témoignages) */
.item-data.aw.aw-orange { background: var(--aw-orange); color: var(--aw-encre); }
.aw.aw-orange blockquote.aw-citation p { color: var(--aw-encre); }
.aw.aw-orange blockquote.aw-citation p:before,
.aw.aw-orange blockquote.aw-citation p:after { color: #fff; }
.aw.aw-orange blockquote.aw-citation footer { color: var(--aw-encre); }
.aw.aw-orange blockquote.aw-citation footer b { color: var(--aw-encre); }
.aw.aw-orange a, .aw.aw-orange a:visited { color: var(--aw-encre); font-weight: 700; }

/* Deux métiers : un panneau orange, un panneau bleu nuit */
.aw-metier.aw-metier-agence { background: var(--aw-orange); color: var(--aw-encre); }
.aw-metier.aw-metier-agence .aw-metier-nom { color: var(--aw-encre); }
.aw-metier.aw-metier-agence a, .aw-metier.aw-metier-agence a:visited { color: var(--aw-encre); font-weight: 700; }
.aw-metier.aw-metier-logiciel { background: var(--aw-encre); color: #E6EEF0; border: 0; }
.aw-metier.aw-metier-logiciel .aw-metier-nom { color: var(--aw-turquoise); }
.aw-metier.aw-metier-logiciel a, .aw-metier.aw-metier-logiciel a:visited { color: #7FE0DE; }

/* Photo (équipe, ateliers) */
.aw img.aw-photo { width: 100%; height: auto; border-radius: 20px; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* Étapes : pastilles pleines turquoise */
main .aw ol.aw-etapes > li:before { background: var(--aw-turquoise); box-shadow: none; color: var(--aw-encre); }
.aw ol.aw-etapes > li:after { background: var(--aw-turquoise); opacity: .35; }

/* Liens et filets turquoise plus présents */
main .aw ul li:before { height: 3px; width: 10px; }
.aw .aw-liens-assotools > div { border-bottom-color: #BFE9E7; }
.aw .aw-liens-assotools { border-top-color: #BFE9E7; }
.item-data.aw.aw-confiance { border-color: #BFE9E7; }

/* Bandeau final : bleu nuit + liseré orange */
.item-data.aw.aw-final { border-top: 8px solid #FF6A62; }

/* En-tête : filet turquoise sous le menu */
header { border-bottom: 0; }
body > header + main { border-top: 4px solid var(--aw-turquoise); }

@media screen and (max-width: 960px) {
    .item-data.aw.aw-accroche:after { width: 300px; height: 300px; right: -140px; bottom: -170px; }
    .item-data.aw.aw-accroche-page:after { width: 220px; height: 220px; right: -100px; bottom: -130px; }
}

/* =====================================================================
   V2.2 : photos et animations
   ===================================================================== */

/* --- En-tête collant, qui se détache au défilement ------------------- */
body > header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    max-width: none;
    padding-left: max(24px, calc((100% - var(--aw-largeur)) / 2 + 24px));
    padding-right: max(24px, calc((100% - var(--aw-largeur)) / 2 + 24px));
    transition: box-shadow .25s;
}
body > header.aw-defile { box-shadow: 0 6px 24px -12px rgba(19,36,58,.35); }
body > header + main { border-top: 0; }

/* --- Accroche avec photo ---------------------------------------------- */
.aw .aw-scene { position: relative; }
.aw .aw-scene img.aw-photo-accroche {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 28px;
    display: block;
    box-shadow: 0 30px 60px -24px rgba(19,36,58,.5);
}
/* Le fil vient se poser sur la photo, en bas à gauche */
.aw .aw-scene .aw-fil {
    position: absolute;
    left: -56px;
    bottom: -48px;
    width: min(380px, 88%);
    padding: 24px 24px 20px;
}
.aw .aw-scene .aw-fil .aw-fil-quoi { font-size: 15px; }
.aw .aw-scene .aw-fil li { padding-bottom: 14px; }
.item-data.aw.aw-accroche { padding-bottom: 120px; }

/* Accroches des pages intérieures : texte + photo */
.aw-accroche-page .aw-cols { align-items: center; }
.aw-accroche-page img.aw-photo-accroche {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    box-shadow: 0 24px 48px -24px rgba(19,36,58,.5);
}

/* Photos dans le contenu */
.aw-metier img.aw-photo-metier {
    width: calc(100% + 72px);
    margin: -36px -36px 24px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    display: block;
    max-width: none;
}
.aw-metier { overflow: hidden; }

/* --- Pastille orange qui flotte doucement ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .item-data.aw.aw-accroche:after,
    .item-data.aw.aw-accroche-page:after { animation: aw-flotte 14s ease-in-out infinite alternate; }
    .aw .aw-scene img.aw-photo-accroche,
    .aw-accroche-page img.aw-photo-accroche { animation: aw-entree .9s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes aw-flotte {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-40px, -30px) scale(1.06); }
}
@keyframes aw-entree {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* --- Apparition au défilement (posée par aiw-v2.js) ------------------ */
html.aw-js .aw-a-reveler {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--aw-delai, 0ms),
                transform .7s cubic-bezier(.2,.7,.2,1) var(--aw-delai, 0ms);
}
html.aw-js .aw-a-reveler.aw-visible { opacity: 1; transform: none; }

/* --- Bandeau des références qui défile ------------------------------- */
.aw-confiance .aw-defilant {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
main .aw-confiance .aw-defilant ul { flex-wrap: nowrap; width: max-content; }
main .aw-confiance .aw-defilant ul.aw-anime { animation: aw-defile 40s linear infinite; }
.aw-confiance .aw-defilant:hover ul.aw-anime,
.aw-confiance .aw-defilant:focus-within ul.aw-anime { animation-play-state: paused; }
@keyframes aw-defile { to { transform: translateX(-50%); } }
.aw-confiance img { height: 64px; }

/* --- Micro-interactions ---------------------------------------------- */
.aw a.aw-btn { transition: background-color .2s, transform .2s, box-shadow .2s; }
.aw a.aw-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(19,36,58,.6); }
header nav ul li.aw-nav-cta a { transition: background-color .2s, transform .2s; }
header nav ul li.aw-nav-cta a:hover { transform: translateY(-1px); }
.aw a.aw-carte img.aw-vignette { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.aw a.aw-carte .aw-vignette-cadre { overflow: hidden; border-radius: 12px; margin-bottom: 16px; }
.aw a.aw-carte .aw-vignette-cadre img.aw-vignette { margin: 0; border: 0; border-radius: 0; }
.aw a.aw-carte:hover img.aw-vignette { transform: scale(1.05); }
.aw a.aw-lien-fort { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s; }
.aw a.aw-lien-fort:hover { background-size: 100% 2px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
    .aw a.aw-btn:hover, header nav ul li.aw-nav-cta a:hover { transform: none; }
    .aw a.aw-carte:hover img.aw-vignette { transform: none; }
}

/* --- Responsive -------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .aw .aw-scene { margin-bottom: 40px; }
    .aw .aw-scene .aw-fil { position: relative; left: auto; bottom: auto; width: auto; margin: -60px 16px 0; }
    .item-data.aw.aw-accroche { padding-bottom: 64px; }
}
@media screen and (max-width: 799px) {
    body > header { position: relative; padding-left: 0; padding-right: 0; }
}
@media screen and (max-width: 600px) {
    .aw-metier img.aw-photo-metier { width: calc(100% + 44px); margin: -26px -22px 20px; }
}

/* Accueil : la photo prend plus de place, le fil se pose en bas à gauche */
.aw-accroche .aw-cols.aw-large-gauche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.aw .aw-scene { padding-bottom: 40px; }
.aw .aw-scene img.aw-photo-accroche { aspect-ratio: 1 / 1; object-position: 30% center; }
.aw .aw-scene .aw-fil { left: -48px; bottom: 0; width: 330px; padding: 20px 22px 16px; }
.aw .aw-scene .aw-fil-titre { margin-bottom: 14px; font-size: 13px; }
.aw .aw-scene .aw-fil li { padding: 0 0 10px 38px; }
.aw .aw-scene .aw-fil .aw-fil-lieu { font-size: 12px; }
.aw .aw-scene .aw-fil .aw-fil-quoi { font-size: 14px; }
.aw .aw-scene .aw-fil-pied { margin-top: 12px; padding-top: 12px; font-size: 14px; }
@media screen and (max-width: 960px) {
    .aw-accroche .aw-cols.aw-large-gauche { grid-template-columns: minmax(0, 1fr); }
    .aw .aw-scene { padding-bottom: 0; }
    .aw .aw-scene .aw-fil { width: auto; left: auto; bottom: auto; }
}

/* =====================================================================
   V2.3 : charte de marque (CHARTE-DE-MARQUE.md) — règles ui-ux-pro-max
   ===================================================================== */
:root { --aw-ardoise: #4A5A6A; }

/* Menu : page courante indiquée, zones cliquables de 44 px */
@media screen and (min-width: 800px) {
    header nav ul li a { min-height: 44px; display: inline-flex !important; align-items: center; }
    header nav ul li.active > a,
    header nav ul li > a[aria-current="page"] { color: var(--aw-lagune); box-shadow: inset 0 -3px 0 var(--aw-turquoise); border-radius: 8px 8px 0 0; }
}

/* Icônes SVG (trait 2 px, grille 24) */
.aw svg.aw-ico {
    width: 24px; height: 24px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.aw .aw-ico-rond {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--aw-turquoise-clair); color: var(--aw-lagune);
    margin-bottom: 14px;
}
.aw.aw-brume .aw-ico-rond, .aw .aw-encadre .aw-ico-rond { background: #fff; }
.aw-metier .aw-metier-nom { display: flex; align-items: center; gap: 8px; }
.aw-metier .aw-metier-nom svg.aw-ico { width: 20px; height: 20px; }
.aw .aw-ligne-ico { display: flex; gap: 12px; align-items: flex-start; }
.aw .aw-ligne-ico svg.aw-ico { color: var(--aw-lagune); margin-top: 2px; }

/* Chiffres clés */
.item-data.aw.aw-chiffres { padding: 64px 0; }
.aw .aw-chiffres-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.aw .aw-chiffre { border-top: 3px solid var(--aw-turquoise); padding-top: 18px; }
.aw .aw-chiffre-valeur {
    display: block;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--aw-encre);
    font-variant-numeric: tabular-nums;
}
.aw .aw-chiffre-legende { display: block; margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--aw-ardoise); max-width: 26ch; }
.aw.aw-encre .aw-chiffre-valeur { color: #fff; }
.aw.aw-encre .aw-chiffre-legende { color: #B9C8CE; }

/* Étude de cas */
.aw .aw-cas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.aw .aw-cas-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--aw-turquoise); color: var(--aw-encre);
    font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; margin-bottom: 18px;
}
.aw .aw-cas-badge svg.aw-ico { width: 18px; height: 18px; }
.aw .aw-cas .aw-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }

@media screen and (max-width: 960px) {
    .aw .aw-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aw .aw-cas { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media screen and (max-width: 480px) {
    .aw .aw-chiffres-grille { gap: 24px 16px; }
    .aw .aw-chiffre-legende { font-size: 15px; }
}

/* --- Charte (page interne d'aperçu) ---------------------------------- */
.aw .aw-nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.aw .aw-nuance { border-radius: 14px; overflow: hidden; border: 1px solid var(--aw-trait); background: #fff; }
.aw .aw-nuance span { display: block; height: 96px; }
.aw .aw-nuance p { margin: 0; padding: 12px 14px; font-size: 14px; line-height: 1.4; }

/* =====================================================================
   V2.4 : modernité (styles ui-ux-pro-max : Aurora UI, Bento Grid,
   Glassmorphism, Motion-Driven), adaptés à la charte
   ===================================================================== */

/* --- Menu flottant en verre dépoli ------------------------------------ */
@media screen and (min-width: 800px) {
    body > header {
        position: sticky;
        top: 14px;
        margin: 14px auto 0;
        width: calc(100% - 32px);
        max-width: calc(var(--aw-largeur) - 16px);
        padding: 6px 8px 6px 22px !important;
        border-radius: 999px;
        background: rgba(255,255,255,.72);
        -webkit-backdrop-filter: saturate(1.6) blur(16px);
        backdrop-filter: saturate(1.6) blur(16px);
        border: 1px solid rgba(255,255,255,.6);
        box-shadow: 0 8px 30px -12px rgba(19,36,58,.28);
    }
    body > header.aw-defile { box-shadow: 0 14px 40px -14px rgba(19,36,58,.45); background: rgba(255,255,255,.86); }
    body > header .logo { padding: 8px 0; }
    body > header .logo img { width: 180px; }
    /* l'accroche passe sous le menu flottant */
    body > header + main { margin-top: -84px; }
    .item-data.aw.aw-accroche, .item-data.aw.aw-accroche-page { padding-top: 150px; }
    header nav ul li.aw-nav-cta a, header nav ul li.aw-nav-cta a:visited { margin-left: 6px; }
}

/* --- Accroches : aurore turquoise animée + grain --------------------- */
.item-data.aw.aw-accroche,
.item-data.aw.aw-accroche-page {
    background:
        radial-gradient(60% 80% at 12% 10%, #5FE3DF 0%, rgba(95,227,223,0) 60%),
        radial-gradient(50% 70% at 85% 15%, #0FA9A7 0%, rgba(15,169,167,0) 65%),
        radial-gradient(45% 60% at 60% 100%, rgba(255,142,93,.55) 0%, rgba(255,142,93,0) 70%),
        #17C2C0;
    background-size: 140% 140%;
}
.item-data.aw.aw-accroche:before,
.item-data.aw.aw-accroche-page:before {
    /* grain très léger, pour la profondeur */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
    opacity: .09;
    mix-blend-mode: multiply;
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .item-data.aw.aw-accroche,
    .item-data.aw.aw-accroche-page { animation: aw-aurore 16s ease-in-out infinite alternate; }
}
@keyframes aw-aurore {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 60%; }
}

/* Titre d'accroche révélé mot à mot (mots posés par aiw-v2.js) */
.aw .aw-mot { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
    html.aw-js .aw .aw-mot {
        opacity: 0;
        transform: translateY(.45em);
        filter: blur(6px);
        animation: aw-mot .7s cubic-bezier(.2,.7,.2,1) forwards;
        animation-delay: calc(var(--aw-i) * 55ms + 80ms);
    }
}
@keyframes aw-mot { to { opacity: 1; transform: none; filter: none; } }

/* --- Sections de couleur en panneaux arrondis ------------------------- */
.item-data.aw.aw-orange,
.item-data.aw.aw-final,
.item-data.aw.aw-encre {
    margin: 24px 16px;
    border-radius: 36px;
    overflow: hidden;
}
.item-data.aw.aw-final { border-top: 0; position: relative; }
.item-data.aw.aw-final:after {
    content: "";
    position: absolute;
    width: 420px; height: 420px; border-radius: 50%;
    right: -120px; top: -180px;
    background: radial-gradient(circle, rgba(23,194,192,.55), rgba(23,194,192,0) 70%);
    pointer-events: none;
}
.item-data.aw.aw-final > div { position: relative; z-index: 1; }
.item-data.aw.aw-final h2 { font-size: clamp(32px, 4.6vw, 56px); max-width: 18ch; }

/* --- Grille bento ------------------------------------------------------ */
.aw .aw-bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: 16px;
}
.aw .aw-tuile {
    border-radius: 24px;
    padding: 28px;
    background: var(--aw-turquoise-clair);
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.aw .aw-tuile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(19,36,58,.45); }
.aw .aw-tuile h3 { font-size: 22px; }
.aw .aw-tuile p { font-size: 16px; }
.aw .aw-tuile.aw-t-large { grid-column: span 4; grid-row: span 2; }
.aw .aw-tuile.aw-t-moyenne { grid-column: span 2; grid-row: span 2; }
.aw .aw-tuile.aw-t-demi { grid-column: span 3; }
.aw .aw-tuile.aw-t-pleine { grid-column: span 6; }
.aw .aw-tuile.aw-t-encre { background: var(--aw-encre); color: #E6EEF0; }
.aw .aw-tuile.aw-t-encre h3 { color: #fff; }
.aw .aw-tuile.aw-t-encre .aw-ico-rond { background: rgba(255,255,255,.08); color: var(--aw-turquoise); }
.aw .aw-tuile.aw-t-encre a { color: #7FE0DE; }
.aw .aw-tuile.aw-t-orange { background: var(--aw-orange); color: var(--aw-encre); }
.aw .aw-tuile.aw-t-orange .aw-ico-rond { background: rgba(255,255,255,.35); color: var(--aw-encre); }
.aw .aw-tuile.aw-t-orange a { color: var(--aw-encre); font-weight: 700; }
.aw .aw-tuile.aw-t-turquoise { background: var(--aw-turquoise); color: var(--aw-encre); }
.aw .aw-tuile.aw-t-turquoise .aw-ico-rond { background: rgba(255,255,255,.4); color: var(--aw-encre); }
.aw .aw-tuile.aw-t-photo { padding: 0; display: flex; flex-direction: column; }
.aw .aw-tuile.aw-t-photo img { width: 100%; flex: 1; min-height: 220px; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.aw .aw-tuile.aw-t-photo .aw-tuile-texte { padding: 24px 28px 26px; }
.aw .aw-tuile.aw-t-photo:hover img { transform: scale(1.04); }

/* --- Boutons avec flèche qui glisse ------------------------------------ */
.aw a.aw-btn:after {
    content: "";
    width: 18px; height: 18px; margin-left: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.aw a.aw-btn:hover:after { transform: translateX(4px); }

/* --- Cartes de réalisations : légère élévation au survol ------------- */
.aw a.aw-carte { border-radius: 16px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.aw a.aw-carte:hover { transform: translateY(-4px); }

/* --- Responsive -------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .aw .aw-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aw .aw-tuile.aw-t-large, .aw .aw-tuile.aw-t-pleine { grid-column: span 2; grid-row: auto; }
    .aw .aw-tuile.aw-t-moyenne, .aw .aw-tuile.aw-t-demi { grid-column: span 1; grid-row: auto; }
}
@media screen and (max-width: 640px) {
    .aw .aw-bento { grid-template-columns: minmax(0, 1fr); }
    .aw .aw-tuile.aw-t-large, .aw .aw-tuile.aw-t-pleine, .aw .aw-tuile.aw-t-moyenne, .aw .aw-tuile.aw-t-demi { grid-column: span 1; }
    .item-data.aw.aw-orange, .item-data.aw.aw-final, .item-data.aw.aw-encre { margin: 16px 8px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .aw .aw-tuile:hover, .aw a.aw-carte:hover { transform: none; }
    .aw a.aw-btn:hover:after { transform: none; }
}

/* Bento : photo recadrée, la tuile ne s'étire plus */
.aw .aw-tuile.aw-t-photo img { flex: none; min-height: 0; aspect-ratio: 16 / 8; }
.aw .aw-tuile.aw-t-large { grid-row: auto; }
.aw .aw-tuile.aw-t-moyenne { grid-row: auto; display: flex; flex-direction: column; justify-content: flex-end; }

/* =====================================================================
   V2.5 : tendances octobre 2026 (Linear, Ramp, Awwwards)
   1. le produit montré dès l'accroche (notifications, interface)
   2. grande phrase en deux tons qui s'allume au défilement
   3. textures discrètes (trame de points)
   ===================================================================== */

/* --- 1a. Notifications flottantes sur la photo d'accroche ------------- */
.aw .aw-scene .aw-notifs {
    position: absolute;
    left: -64px;
    bottom: 28px;
    width: min(360px, 92%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
main .aw .aw-notifs li.aw-notif { margin: 0; padding: 12px 14px; }
main .aw .aw-notifs li:before { display: none; }
.aw .aw-notif {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 16px 36px -18px rgba(19,36,58,.55);
    color: var(--aw-encre);
}
.aw .aw-notif:nth-child(2) { translate: 28px 0; }
.aw .aw-notif:nth-child(3) { translate: 8px 0; }
.aw .aw-notif:nth-child(4) { translate: 36px 0; }
.aw .aw-notif-ico {
    flex: none;
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aw-turquoise); color: var(--aw-encre);
}
.aw .aw-notif:nth-child(1) .aw-notif-ico { background: #FF8E5D; }
.aw .aw-notif-ico svg.aw-ico { width: 18px; height: 18px; }
.aw .aw-notif-texte { flex: 1; min-width: 0; line-height: 1.3; }
.aw .aw-notif-texte b { display: block; font-size: 14px; }
.aw .aw-notif-texte span { display: block; font-size: 13px; color: var(--aw-ardoise); }
.aw .aw-notif time { flex: none; font-size: 12px; color: var(--aw-ardoise); }
.aw .aw-scene .aw-notifs-pied {
    position: absolute;
    right: 18px;
    top: 18px;
    background: var(--aw-encre);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 24px -12px rgba(19,36,58,.6);
}
@media (prefers-reduced-motion: no-preference) {
    .aw .aw-notif { animation: aw-notif .6s cubic-bezier(.2,.9,.25,1.15) both; }
    .aw .aw-notif:nth-child(1) { animation-delay: .5s; }
    .aw .aw-notif:nth-child(2) { animation-delay: 1.1s; }
    .aw .aw-notif:nth-child(3) { animation-delay: 1.7s; }
    .aw .aw-notif:nth-child(4) { animation-delay: 2.3s; }
    .aw .aw-scene .aw-notifs-pied { animation: aw-etape .5s 3s ease-out both; }
}
@keyframes aw-notif {
    from { opacity: 0; transform: translateX(-24px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* --- 1b. Interface Assotools illustrée -------------------------------- */
.aw .aw-appli {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px -30px rgba(19,36,58,.6), 0 0 0 1px rgba(19,36,58,.06);
    overflow: hidden;
    font-size: 13px;
    color: var(--aw-encre);
}
.aw .aw-appli-barre { display: flex; gap: 6px; padding: 12px 14px; background: #F1F5F5; border-bottom: 1px solid var(--aw-trait); }
.aw .aw-appli-barre i { width: 10px; height: 10px; border-radius: 50%; background: #D5E0DF; display: block; }
.aw .aw-appli-corps { display: grid; grid-template-columns: 150px 1fr; min-height: 300px; }
.aw .aw-appli-menu { background: var(--aw-encre); color: #C9D6DB; padding: 16px 10px; }
.aw .aw-appli-menu p { margin: 0 0 14px 8px; font-weight: 800; color: #fff; font-size: 14px; max-width: none; }
main .aw .aw-appli-menu ul { margin: 0; }
main .aw .aw-appli-menu li { padding: 7px 8px; margin: 2px 0; border-radius: 8px; font-size: 13px; }
main .aw .aw-appli-menu li:before { display: none; }
.aw .aw-appli-menu li.actif { background: rgba(23,194,192,.18); color: #fff; }
.aw .aw-appli-main { padding: 18px 20px; }
.aw .aw-appli-main h4 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.aw .aw-appli-main .aw-appli-sous { color: var(--aw-ardoise); margin: 0 0 14px; font-size: 13px; }
.aw .aw-appli table { width: 100%; border-collapse: collapse; }
.aw .aw-appli td { padding: 9px 6px; border-bottom: 1px solid #EDF2F2; font-size: 13px; }
.aw .aw-pastille { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.aw .aw-pastille.ok { background: #D9F6EE; color: #0B6B55; }
.aw .aw-pastille.relance { background: #FFE6DC; color: #9A3412; }
.aw .aw-appli-legende { font-size: 13px; color: var(--aw-encre); opacity: .8; margin: 10px 4px 0; }

/* --- 2. Manifeste en deux tons, qui s'allume au défilement ----------- */
.item-data.aw.aw-manifeste { padding: 110px 0; }
.aw .aw-manifeste-texte {
    font-size: clamp(28px, 3.8vw, 50px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 30ch;
    margin: 0;
    color: var(--aw-encre);
}
.aw .aw-manifeste-texte .aw-m { transition: color .35s ease; }
html.aw-js .aw .aw-manifeste-texte .aw-m { color: #B8C6CB; }
html.aw-js .aw .aw-manifeste-texte .aw-m.aw-allume { color: var(--aw-encre); }
html.aw-js .aw .aw-manifeste-texte .aw-m.aw-allume.aw-accent { color: var(--aw-lagune); }

/* --- 3. Trame de points sur les sections douces ---------------------- */
.item-data.aw.aw-brume {
    background-color: var(--aw-turquoise-clair);
    background-image: radial-gradient(rgba(14,124,123,.16) 1px, transparent 1.2px);
    background-size: 22px 22px;
}

/* --- Responsive -------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .aw .aw-scene .aw-notifs { position: relative; left: auto; bottom: auto; width: auto; margin: -70px 12px 0; }
    .aw .aw-notif:nth-child(n) { translate: none; }
    .aw .aw-scene .aw-notifs-pied { top: 12px; right: 12px; font-size: 13px; }
    .aw .aw-appli-corps { grid-template-columns: 1fr; }
    .aw .aw-appli-menu { display: none; }
}
@media screen and (max-width: 600px) {
    .aw .aw-notif time { display: none; }
}

.aw .aw-appli td { white-space: nowrap; }
.aw .aw-appli td:nth-child(2) { color: var(--aw-ardoise); }
@media screen and (max-width: 480px) { .aw .aw-appli td:nth-child(2) { display: none; } }

/* --- Page /logo : démonstrations (aperçu uniquement) ------------------- */
.aw .aw-logo-demo { border-radius: 24px; padding: 28px; margin-top: 20px; overflow: hidden; }
.aw .aw-demo-turquoise { background: radial-gradient(60% 80% at 12% 10%, #5FE3DF 0%, rgba(95,227,223,0) 60%), #17C2C0; min-height: 140px; }
.aw .aw-demo-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; color: var(--aw-encre); }
.aw .aw-demo-nav b { background: var(--aw-corail); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; }
.aw .aw-demo-a { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 999px; padding: 10px 10px 10px 30px; box-shadow: 0 10px 30px -14px rgba(19,36,58,.4); }
.aw .aw-demo-a img { width: 220px; height: auto; display: block; }
.aw .aw-demo-b { display: flex; justify-content: space-between; align-items: center; background: #fff; margin: -28px -28px 0; padding: 18px 28px; border-bottom: 4px solid #17C2C0; }
.aw .aw-demo-b img { width: 230px; height: auto; display: block; }
.aw .aw-demo-c { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.aw .aw-demo-c-logo { background: #fff; border-radius: 999px; padding: 14px 26px; box-shadow: 0 10px 30px -14px rgba(19,36,58,.4); display: inline-flex; }
.aw .aw-demo-c-logo img { width: 240px; height: auto; display: block; }
.aw .aw-demo-c-nav { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; padding: 8px 8px 8px 24px; }
@media screen and (max-width: 960px) { .aw .aw-demo-nav span { display: none; } }

/* =====================================================================
   V2.6 : intégration du logo, option B (validée le 26/10/2026)
   Barre blanche pleine largeur, collée en haut, filet turquoise dessous
   ===================================================================== */
@media screen and (min-width: 800px) {
    body > header {
        position: sticky;
        top: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        border: 0;
        border-bottom: 4px solid var(--aw-turquoise);
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        padding: 0 max(24px, calc((100% - var(--aw-largeur)) / 2 + 24px)) !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    body > header.aw-defile { background: #fff; box-shadow: 0 8px 24px -14px rgba(19,36,58,.4); }
    body > header .logo { width: auto; flex: none; padding: 16px 0; }
    body > header .logo img { width: 230px; height: auto; display: block; }
    body > header nav { width: auto; }
    /* l'accroche ne passe plus sous le menu */
    body > header + main { margin-top: 0; }
    .item-data.aw.aw-accroche { padding-top: 72px; }
    .item-data.aw.aw-accroche-page { padding-top: 64px; }
}
@media screen and (min-width: 800px) and (max-width: 1100px) {
    body > header .logo img { width: 190px; }
    header nav ul li a, header nav ul li a:visited { padding: 10px 9px !important; font-size: 14px !important; }
}

@media screen and (min-width: 800px) { body > header nav { border-top: 0; } }

/* =====================================================================
   V3 (novembre 2026) : all-in-web, agence web ET éditeur de logiciels
   - accroche « deux portes » : l'agence / nos logiciels
   - étagère de logiciels : chaque produit garde ses couleurs (variables --p-*)
   - portfolio dans des cadres de navigateur
   ===================================================================== */

/* --- Accroche « deux portes » ----------------------------------------- */
.item-data.aw.aw-portes { padding-bottom: 96px; }
.aw-portes h1 { max-width: 20ch; }
.aw-portes .aw-intro { margin-bottom: 40px; }
.aw .aw-portes-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.aw a.aw-porte, .aw a.aw-porte:visited {
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    padding: 28px;
    text-decoration: none;
    color: var(--aw-encre);
    position: relative;
    overflow: hidden;
    min-height: 360px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
    box-shadow: 0 24px 50px -28px rgba(19,36,58,.55);
}
.aw a.aw-porte:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(19,36,58,.6); }
.aw a.aw-porte:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.aw .aw-porte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; position: relative; z-index: 1; }
.aw .aw-porte h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 6px; max-width: none; }
.aw .aw-porte p { margin: 0; font-size: 16px; max-width: 40ch; }
.aw .aw-porte-fleche {
    flex: none;
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--aw-encre); color: #fff;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.aw a.aw-porte:hover .aw-porte-fleche { transform: rotate(-45deg); }
.aw .aw-porte-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Porte agence : blanche, avec un site client dans un cadre de navigateur */
.aw a.aw-porte-agence { background: #fff; }
.aw a.aw-porte-agence .aw-navigateur { margin-top: auto; transform: translate(40px, 44px) rotate(-2deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.aw a.aw-porte-agence:hover .aw-navigateur { transform: translate(32px, 34px) rotate(-1deg); }

/* Porte logiciels : bleu nuit, avec l'étagère miniature */
.aw a.aw-porte-logiciels { background: var(--aw-encre); color: #fff; }
.aw a.aw-porte-logiciels h2 { color: #fff; }
.aw a.aw-porte-logiciels p { color: #C9D6DB; }
.aw a.aw-porte-logiciels .aw-porte-fleche { background: var(--aw-turquoise); color: var(--aw-encre); }
.aw .aw-porte-produits { margin-top: auto; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }

/* --- Cadre de navigateur (portfolio) ---------------------------------- */
.aw .aw-navigateur {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px -24px rgba(19,36,58,.55), 0 0 0 1px rgba(19,36,58,.08);
}
.aw .aw-navigateur-barre { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF3F3; }
.aw .aw-navigateur-barre i { width: 9px; height: 9px; border-radius: 50%; background: #CDD8D8; display: block; }
.aw .aw-navigateur-barre span {
    margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 3px 10px;
    font-size: 12px; color: var(--aw-ardoise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw .aw-navigateur img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* --- Étagère de logiciels --------------------------------------------- */
/* Chaque produit définit ses couleurs :
   --p-fond (dégradé ou couleur), --p-texte, --p-accent, --p-sombre */
.aw .aw-produit {
    --p-fond: var(--aw-encre);
    --p-texte: #fff;
    --p-accent: var(--aw-turquoise);
    --p-sombre: #0B1626;
}
.aw .aw-produit.aw-p-assotools {
    --p-fond: linear-gradient(120deg, #10CCB6 0%, #0B6E9A 55%, #0C3BCE 100%);
    --p-texte: #fff;
    --p-accent: #F26653;
    --p-sombre: #1D2947;
}

/* Vignette compacte (dans la porte « logiciels ») */
.aw .aw-produit-mini {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 12px 14px;
}
.aw .aw-produit-mini .aw-produit-pastille {
    flex: none; width: 52px; height: 52px; border-radius: 14px;
    background: var(--p-fond);
    display: inline-flex; align-items: center; justify-content: center;
}
.aw .aw-produit-mini .aw-produit-pastille img { width: 40px; height: auto; display: block; }
.aw .aw-produit-mini b { display: block; color: #fff; font-size: 16px; }
.aw .aw-produit-mini span { display: block; color: #9FB3BC; font-size: 14px; }
.aw .aw-produit-mini.aw-produit-a-venir { border-style: dashed; background: transparent; }
.aw .aw-produit-mini.aw-produit-a-venir .aw-produit-pastille { background: transparent; border: 2px dashed rgba(255,255,255,.3); color: #9FB3BC; }
.aw .aw-produit-mini.aw-produit-a-venir .aw-produit-pastille svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Grande fiche produit (section « Nos logiciels ») */
.aw .aw-etagere { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.aw .aw-fiche-produit {
    background: var(--p-fond);
    color: var(--p-texte);
    border-radius: 32px;
    padding: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 32px;
    position: relative;
    overflow: hidden;
}
.aw .aw-fiche-produit h3 { color: var(--p-texte); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 18px 0 12px; }
.aw .aw-fiche-produit p { color: rgba(255,255,255,.92); }
.aw .aw-fiche-produit .aw-fiche-logo { width: 190px; height: auto; display: block; }
main .aw .aw-fiche-produit ul li:before { background: #fff; }
.aw .aw-fiche-produit ul li { color: #fff; font-weight: 500; }
.aw .aw-fiche-produit a.aw-btn { background: var(--p-accent); color: #1D2947; }
.aw .aw-fiche-produit a.aw-btn:hover { background: #fff; color: var(--p-sombre); }
.aw .aw-fiche-produit a.aw-lien-fort, .aw .aw-fiche-produit a.aw-lien-fort:visited { color: #fff; }
.aw .aw-fiche-produit .aw-fiche-visuel { position: relative; align-self: center; }
.aw .aw-fiche-produit .aw-notifs { position: relative; left: auto; bottom: auto; width: auto; }
.aw .aw-fiche-produit .aw-notif:nth-child(n) { translate: none; }
.aw .aw-fiche-produit .aw-notif:nth-child(2) { margin-left: 22px; }
.aw .aw-fiche-produit .aw-notif:nth-child(3) { margin-left: 8px; }
.aw .aw-fiche-produit .aw-notif-ico { background: #E6F7F4; color: #0B7D70; }
.aw .aw-fiche-produit .aw-notif:nth-child(1) .aw-notif-ico { background: #FDEEEB; color: #C8412E; }

/* Emplacement « votre outil métier » */
.aw .aw-fiche-a-venir {
    border: 2px dashed #B7C9CC;
    border-radius: 32px;
    padding: 36px 32px;
    display: flex; flex-direction: column; justify-content: center;
    background: #fff;
}
.aw .aw-fiche-a-venir .aw-ico-rond { width: 56px; height: 56px; }
.aw .aw-fiche-a-venir h3 { font-size: 24px; }

/* --- Portfolio en cadres de navigateur -------------------------------- */
.aw .aw-portfolio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.aw .aw-portfolio > :first-child { grid-row: span 2; }
.aw a.aw-projet, .aw a.aw-projet:visited { display: block; text-decoration: none; color: var(--aw-encre); }
.aw a.aw-projet .aw-navigateur { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.aw a.aw-projet:hover .aw-navigateur { transform: translateY(-6px); box-shadow: 0 34px 60px -26px rgba(19,36,58,.6), 0 0 0 1px rgba(19,36,58,.08); }
.aw a.aw-projet h3 { margin: 18px 0 4px; }
.aw a.aw-projet p { margin: 0; font-size: 15px; color: var(--aw-ardoise); }
.aw a.aw-projet:hover h3 { color: var(--aw-lagune); }

/* --- Responsive --------------------------------------------------------- */
@media screen and (max-width: 960px) {
    .aw .aw-portes-grille, .aw .aw-etagere, .aw .aw-fiche-produit, .aw .aw-portfolio { grid-template-columns: minmax(0, 1fr); }
    .aw .aw-portfolio > :first-child { grid-row: auto; }
    .aw a.aw-porte { min-height: 0; }
    .aw a.aw-porte-agence .aw-navigateur { transform: none; margin-top: 24px; }
    .aw a.aw-porte-agence:hover .aw-navigateur { transform: none; }
    .aw .aw-fiche-produit { padding: 28px 22px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .aw a.aw-porte:hover, .aw a.aw-projet:hover .aw-navigateur { transform: none; }
    .aw a.aw-porte:hover .aw-porte-fleche { transform: none; }
}

.aw span.aw-navigateur { display: block; }
.aw .aw-produit-mini .aw-produit-pastille { width: 104px; }
.aw .aw-produit-mini .aw-produit-pastille img { width: 86px; }
.aw .aw-produit-mini.aw-produit-a-venir .aw-produit-pastille { width: 52px; }

/* Porte logiciels : capture du site du logiciel, inclinée en miroir de la porte agence */
.aw a.aw-porte-logiciels .aw-navigateur-logiciel { margin: 26px 0 22px; transform: rotate(1.5deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.aw a.aw-porte-logiciels:hover .aw-navigateur-logiciel { transform: rotate(.5deg) translateY(-4px); }
.aw a.aw-porte-logiciels .aw-navigateur-logiciel img { aspect-ratio: 16 / 7; }
.aw .aw-porte-produits { margin-top: 0; }
.aw .aw-navigateur img { aspect-ratio: 16 / 9.5; }
@media screen and (max-width: 960px) { .aw a.aw-porte-logiciels .aw-navigateur-logiciel { transform: none; } }
@media (prefers-reduced-motion: reduce) { .aw a.aw-porte-logiciels:hover .aw-navigateur-logiciel { transform: rotate(1.5deg); } }

/* V3 : ajustements après relecture */
.aw a.aw-porte-agence .aw-navigateur { margin-top: 28px; flex: 1; display: flex; flex-direction: column; transform: translate(36px, 40px) rotate(-2deg); }
.aw a.aw-porte-agence .aw-navigateur img { flex: 1; aspect-ratio: auto; min-height: 240px; }
.aw .aw-etagere { grid-template-columns: minmax(0, 1fr); }
.aw .aw-fiche-produit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 48px; }
.aw .aw-fiche-produit .aw-notifs { max-width: 420px; margin-left: auto; }
.aw .aw-fiche-a-venir { flex-direction: row; align-items: center; gap: 24px; padding: 26px 32px; }
.aw .aw-fiche-a-venir .aw-ico-rond { margin: 0; flex: none; }
.aw .aw-fiche-a-venir h3 { margin: 0 0 4px; }
.aw .aw-fiche-a-venir p { margin: 0; }
.aw .aw-fiche-a-venir > p:last-child { margin-left: auto; flex: none; }
@media screen and (max-width: 960px) {
  .aw a.aw-porte-agence .aw-navigateur { transform: none; }
  .aw .aw-fiche-produit { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .aw .aw-fiche-produit .aw-notifs { max-width: none; margin-left: 0; }
  .aw .aw-fiche-a-venir { flex-direction: column; align-items: flex-start; }
  .aw .aw-fiche-a-venir > p:last-child { margin-left: 0; }
}

/* =====================================================================
   Échelle typographique réduite (retour client du 6/11 : polices trop grosses)
   ===================================================================== */
.aw h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; }
.aw-accroche-page h1 { font-size: clamp(28px, 3.2vw, 40px); }
.aw h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; }
.aw h3 { font-size: 18px; }
.aw p, .aw li { font-size: 16px; }
.aw .aw-intro { font-size: 18px; }
.aw .aw-manifeste-texte { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; }
.aw .aw-chiffre-valeur { font-size: clamp(32px, 3.6vw, 46px); }
.aw blockquote.aw-citation p { font-size: clamp(19px, 2vw, 24px); }
.aw .aw-porte h2 { font-size: clamp(22px, 2vw, 26px); }
.aw .aw-fiche-produit h3 { font-size: clamp(22px, 2vw, 26px); }
.item-data.aw.aw-final h2 { font-size: clamp(26px, 3vw, 38px); }
.item-data.aw { padding: 72px 0; }

/* =====================================================================
   Version « chaleureuse » (repartie de zéro, 6 novembre 2026). Préfixe .ch
   Système : design-system/all-in-web/MASTER.md
   ===================================================================== */
.ch { --ch-encre: #13243A; --ch-gris: #4A5A6A; --ch-turq: #17C2C0; --ch-turq-fonce: #0E7C7B; --ch-orange: linear-gradient(115deg, #FF6A62, #FF8E5D);
      --ch-turq-clair: #EAF9F8; --ch-peche: #FFF3EC; --ch-trait: #E3ECEE; --ch-ombre: 0 18px 40px -24px rgba(19,36,58,.35);
      font-family: 'Plus Jakarta Sans', var(--aw-police), sans-serif; color: var(--ch-encre); }
.ch h1, .ch h2, .ch h3 { font-family: inherit; color: var(--ch-encre); text-transform: none; letter-spacing: -0.02em; }
.item-data.ch { padding: 80px 0; background: #fff; position: relative; }
.item-data.ch > div { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; }
.ch p { font-size: 17px; line-height: 1.6; color: var(--ch-gris); }
.ch .ch-titre { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.2; margin: 0 0 10px; max-width: 28ch; }
.ch .ch-chapo { margin: 0 0 36px; max-width: 60ch; }
.item-data.ch.ch-fond-turquoise { background: var(--ch-turq-clair); }
.item-data.ch.ch-fond-peche { background: var(--ch-peche); }

/* Boutons */
.ch .ch-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ch a.ch-btn, .ch a.ch-btn:visited {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
    font-size: 16px; font-weight: 700; text-decoration: none; color: #fff; background: var(--ch-orange);
    box-shadow: 0 10px 24px -12px rgba(255,106,98,.8); transition: transform .2s ease, box-shadow .2s ease;
}
.ch a.ch-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(255,106,98,.9); }
.ch a.ch-btn:focus-visible { outline: 3px solid var(--ch-turq); outline-offset: 3px; }
.ch a.ch-btn.ch-btn-clair, .ch a.ch-btn.ch-btn-clair:visited { background: #fff; color: var(--ch-encre); box-shadow: inset 0 0 0 2px var(--ch-trait); }
.ch a.ch-btn.ch-btn-clair:hover { box-shadow: inset 0 0 0 2px var(--ch-turq); }
.ch a.ch-btn.ch-btn-assotools, .ch a.ch-btn.ch-btn-assotools:visited { background: linear-gradient(115deg, #0B6E9A, #0C3BCE); box-shadow: 0 10px 24px -12px rgba(12,59,206,.7); }

/* --- 1. Accroche ------------------------------------------------------ */
.item-data.ch.ch-accroche { padding: 64px 0 120px; background: linear-gradient(180deg, #fff 0%, var(--ch-turq-clair) 100%); overflow: hidden; }
.item-data.ch.ch-accroche > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.ch .ch-sur-titre { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ch-turq-fonce); margin: 0 0 18px; }
.ch .ch-pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--ch-turq); box-shadow: 0 0 0 5px rgba(23,194,192,.2); }
.ch-accroche h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.14; font-weight: 800; margin: 0 0 18px; max-width: 20ch; }
.ch-accroche .ch-intro { font-size: 18px; margin: 0 0 30px; max-width: 48ch; }
.ch .ch-accroche-visuel { position: relative; }
.ch .ch-accroche-visuel img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px; box-shadow: var(--ch-ombre); }
.ch .ch-forme { position: absolute; border-radius: 50%; z-index: 0; }
.ch .ch-forme-1 { width: 62%; aspect-ratio: 1; right: -8%; top: -12%; background: var(--ch-turq); }
.ch .ch-forme-2 { width: 34%; aspect-ratio: 1; left: -7%; bottom: -10%; background: var(--ch-orange); }
.ch .ch-bulle {
    position: absolute; z-index: 2; left: -28px; bottom: 36px; display: flex; gap: 12px; align-items: center; max-width: 290px;
    background: #fff; border-radius: 18px; padding: 14px 18px 14px 14px; box-shadow: 0 20px 40px -18px rgba(19,36,58,.45);
    font-size: 14px; color: var(--ch-gris); line-height: 1.4;
}
.ch .ch-bulle b { display: block; color: var(--ch-encre); font-size: 15px; }
.ch .ch-bulle-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ch-turq-clair); color: var(--ch-turq-fonce); display: flex; align-items: center; justify-content: center; }
.ch .ch-bulle-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Arrivée orchestrée : une seule animation au chargement */
@keyframes ch-monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ch-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ch-accroche .ch-accroche-texte > * { animation: ch-monte .6s cubic-bezier(.2,.7,.2,1) both; }
.ch-accroche .ch-accroche-texte > :nth-child(2) { animation-delay: .08s; }
.ch-accroche .ch-accroche-texte > :nth-child(3) { animation-delay: .16s; }
.ch-accroche .ch-accroche-texte > :nth-child(4) { animation-delay: .24s; }
.ch-accroche .ch-accroche-visuel img { animation: ch-monte .7s .15s cubic-bezier(.2,.7,.2,1) both; }
.ch-accroche .ch-forme { animation: ch-pop .8s .3s cubic-bezier(.2,.9,.3,1.2) both; }
.ch-accroche .ch-bulle { animation: ch-monte .6s .6s cubic-bezier(.2,.7,.2,1) both; }

/* --- 2. Les deux portes ---------------------------------------------- */
.item-data.ch.ch-portes { padding: 0 0 80px; background: transparent; margin-top: -72px; z-index: 2; }
.item-data.ch.ch-portes > div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch .ch-porte { position: relative; display: flex; flex-direction: column; align-items: flex-start; border-radius: 24px; padding: 36px 36px 0; background: #fff; box-shadow: var(--ch-ombre), inset 0 0 0 1px var(--ch-trait); overflow: hidden; }
.ch .ch-porte:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ch-turq); }
.ch .ch-porte-logiciel:before { background: linear-gradient(90deg, #10CCB6, #0B6E9A, #0C3BCE); }
.ch .ch-porte-tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--ch-turq-fonce); background: var(--ch-turq-clair); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.ch .ch-porte-logo { display: inline-flex; padding: 8px 14px; border-radius: 12px; background: linear-gradient(115deg, #10CCB6, #0B6E9A 55%, #0C3BCE); margin-bottom: 16px; }
.ch .ch-porte-logo img { width: 120px; display: block; }
.ch .ch-porte h2 { font-size: clamp(21px, 2vw, 25px); font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.ch .ch-porte p { font-size: 16px; margin: 0 0 16px; }
.ch .ch-porte ul { list-style: none; margin: 0 0 24px; padding: 0; }
main .ch .ch-porte ul li { position: relative; padding: 0 0 0 28px; margin: 8px 0; font-size: 16px; color: var(--ch-encre); }
main .ch .ch-porte ul li:before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--ch-turq-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }
main .ch .ch-porte-logiciel ul li:before { background-color: #E8EEFC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C3BCE' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.ch .ch-porte-image { margin-top: 32px; width: 100%; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -1px 0 var(--ch-trait), 0 -12px 30px -18px rgba(19,36,58,.4); align-self: stretch; margin-top: auto; padding-top: 32px; background: transparent; }
.ch .ch-porte-image img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; border-radius: 16px 16px 0 0; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.ch .ch-porte:hover .ch-porte-image img { transform: translateY(-6px); }

/* --- 3. Clients ------------------------------------------------------ */
.item-data.ch.ch-clients { padding: 8px 0 72px; }
.ch-clients p { text-align: center; font-size: 15px; margin: 0 0 18px; }
.ch-clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
main .ch-clients ul li { margin: 0; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ch-trait); font-size: 15px; font-weight: 700; color: var(--ch-encre); }
main .ch-clients ul li:before { display: none; }

/* --- 4. Étapes ------------------------------------------------------- */
.ch .ch-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
main .ch .ch-etapes li { margin: 0; padding: 30px; border-radius: 24px; background: #fff; box-shadow: var(--ch-ombre); }
main .ch .ch-etapes li:before { display: none; }
.ch .ch-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ch-turq); color: var(--ch-encre); font-weight: 800; font-size: 18px; margin-bottom: 18px; }
.ch .ch-etapes li:nth-child(2) .ch-num { background: var(--ch-orange); color: #fff; }
.ch .ch-etapes li:nth-child(3) .ch-num { background: var(--ch-encre); color: #fff; }
.ch .ch-etapes h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.ch .ch-etapes p { font-size: 16px; margin: 0; }

/* --- 5. Réalisations ------------------------------------------------- */
.ch .ch-projets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ch a.ch-projet { display: block; text-decoration: none; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ch-trait); transition: box-shadow .25s, transform .25s; }
.ch a.ch-projet:hover { transform: translateY(-4px); box-shadow: var(--ch-ombre), inset 0 0 0 1px var(--ch-trait); }
.ch a.ch-projet img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ch a.ch-projet span { display: block; padding: 18px 22px 22px; font-size: 15px; color: var(--ch-gris); line-height: 1.45; }
.ch a.ch-projet b { display: block; font-size: 18px; color: var(--ch-encre); margin-bottom: 4px; }
.ch .ch-lien-suite { margin: 28px 0 0; }
.ch .ch-lien-suite a { color: var(--ch-turq-fonce); font-weight: 700; text-underline-offset: 4px; }

/* --- 6. Chiffres et avis --------------------------------------------- */
.ch .ch-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.ch .ch-chiffres > div { padding: 4px 0 0 20px; border-left: 4px solid var(--ch-turq); }
.ch .ch-chiffres > div:nth-child(2) { border-color: #FF8E5D; }
.ch .ch-chiffres > div:nth-child(3) { border-color: var(--ch-encre); }
.ch .ch-chiffres b { display: block; font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--ch-encre); }
.ch .ch-chiffres > div > span { display: block; font-size: 15px; color: var(--ch-gris); margin-top: 4px; }
.ch .ch-avis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch .ch-avis blockquote { margin: 0; padding: 30px; border-radius: 24px; background: #fff; box-shadow: var(--ch-ombre); }
.ch .ch-avis blockquote p { font-size: 17px; color: var(--ch-encre); margin: 0 0 20px; max-width: none; }
.ch .ch-avis footer { display: flex; gap: 12px; align-items: center; background: none; padding: 0; margin: 0; font-size: 14px; color: var(--ch-gris); line-height: 1.35; }
.ch .ch-avis footer b { display: block; color: var(--ch-encre); font-size: 15px; }
.ch .ch-initiale { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ch-orange); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ch .ch-avis blockquote + blockquote .ch-initiale { background: var(--ch-turq); color: var(--ch-encre); }

/* --- 7. Appel final -------------------------------------------------- */
.item-data.ch.ch-final { background: linear-gradient(115deg, #0E7C7B 0%, #13243A 100%); text-align: center; padding: 88px 0; overflow: hidden; }
.item-data.ch.ch-final:before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -160px; background: var(--ch-orange); opacity: .9; }
.item-data.ch.ch-final:after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; left: -60px; bottom: -110px; background: var(--ch-turq); opacity: .8; }
.item-data.ch.ch-final > div { z-index: 1; }
.ch-final h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 800; margin: 0 0 12px; }
.ch-final p { color: #D6E6EA; margin: 0 auto 30px; max-width: 52ch; }
.ch-final .ch-btns { justify-content: center; }
.ch a.ch-btn.ch-btn-blanc, .ch a.ch-btn.ch-btn-blanc:visited { background: #fff; color: var(--ch-encre); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.ch a.ch-btn.ch-btn-contour, .ch a.ch-btn.ch-btn-contour:visited { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* Apparitions douces au défilement (seulement si JavaScript actif) */
html.ch-js .ch .ch-apparait { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
html.ch-js .ch .ch-apparait.ch-vu { opacity: 1; transform: none; }
html.ch-js .ch .ch-apparait:nth-child(2) { transition-delay: .08s; }
html.ch-js .ch .ch-apparait:nth-child(3) { transition-delay: .16s; }

@media screen and (max-width: 900px) {
    .item-data.ch { padding: 60px 0; }
    .item-data.ch.ch-accroche { padding: 40px 0 100px; }
    .item-data.ch.ch-accroche > div, .item-data.ch.ch-portes > div, .ch .ch-etapes, .ch .ch-projets, .ch .ch-avis { grid-template-columns: minmax(0, 1fr); }
    .ch .ch-chiffres { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .item-data.ch.ch-accroche > div { gap: 40px; }
    .ch .ch-bulle { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
    .ch .ch-forme-1 { right: -4%; }
    .ch .ch-forme-2 { left: -3%; }
    .ch .ch-porte { padding: 28px 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ch-accroche *, .ch-accroche .ch-forme { animation: none !important; }
    .ch a.ch-btn:hover, .ch a.ch-projet:hover, .ch .ch-porte:hover .ch-porte-image img { transform: none; }
}

.ch .ch-accroche-visuel img, .ch .ch-porte-image img, .ch a.ch-projet img { height: auto; max-width: 100%; }

/* Cartes « portes » : espace net entre le bouton et la capture */
.ch .ch-porte > a.ch-btn { margin-bottom: 36px; }
.ch .ch-porte-image { padding-top: 0; margin-top: auto; box-shadow: none; border-radius: 16px 16px 0 0; }
.ch .ch-porte-image img { box-shadow: 0 0 0 1px var(--ch-trait), 0 -12px 30px -18px rgba(19,36,58,.4); }

/* =====================================================================
   Harmonisation « chaleureuse » de toutes les pages (.aw) — 6 novembre 2026
   Mêmes jetons que la page d'accueil (.ch) : Plus Jakarta Sans, turquoise
   et dégradé orange, fonds turquoise clair et pêche, rayons 24 px, ombres douces.
   ===================================================================== */
:root { --aw-police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.aw h1, .aw h2, .aw h3 { font-weight: 800; letter-spacing: -0.02em; }
.aw p, .aw li { font-size: 17px; }

/* Bandeau de haut de page : clair, comme l'accueil */
.item-data.aw.aw-accroche-page { background: linear-gradient(180deg, #fff 0%, #EAF9F8 100%); animation: none; overflow: hidden; }
.item-data.aw.aw-accroche-page:before { display: none; }
.item-data.aw.aw-accroche-page:after { background: #17C2C0; opacity: 1; width: 300px; height: 300px; right: -90px; bottom: auto; top: -120px; animation: none; }
.aw-accroche-page h1 { font-size: clamp(28px, 3.2vw, 40px); }
.aw-accroche-page img.aw-photo-accroche { border-radius: 28px; box-shadow: 0 18px 40px -24px rgba(19,36,58,.35); animation: none; }
.aw-accroche-page .aw-cols > div:last-child { position: relative; }
.aw-accroche-page .aw-cols > div:last-child:before { content: ""; position: absolute; width: 34%; aspect-ratio: 1; left: -6%; bottom: -10%; border-radius: 50%; background: linear-gradient(115deg, #FF6A62, #FF8E5D); }
.aw-accroche-page .aw-cols > div:last-child img { position: relative; }

/* Fonds de section */
.item-data.aw.aw-brume { background: #EAF9F8; background-image: none; }
.item-data.aw.aw-orange { background: #FFF3EC; }

/* Boutons : pilule au dégradé orange */
.aw a.aw-btn, .aw a.aw-btn:visited { border-radius: 999px; background: linear-gradient(115deg, #FF6A62, #FF8E5D); color: #fff; min-height: 48px; padding: 0 24px; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(255,106,98,.8); }
.aw a.aw-btn:hover, .aw a.aw-btn:focus-visible { background: linear-gradient(115deg, #FF6A62, #FF8E5D); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(255,106,98,.9); }
.aw a.aw-btn:focus-visible { outline: 3px solid #17C2C0; outline-offset: 3px; }
.aw a.aw-btn svg { stroke: currentColor; }

/* Cartes et encadrés : rayon 24 px, ombre douce */
.aw .aw-encadre, .aw a.aw-carte, .aw .aw-carte, .aw .aw-faq, .aw .aw-fiche-produit, .aw .aw-tuile, .aw .aw-bento > * { border-radius: 24px; }
.aw a.aw-carte { box-shadow: inset 0 0 0 1px #E3ECEE; transition: box-shadow .25s, transform .25s; }
.aw a.aw-carte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(19,36,58,.35), inset 0 0 0 1px #E3ECEE; }
.aw .aw-encadre { box-shadow: 0 18px 40px -24px rgba(19,36,58,.35); }

/* Appel final : bande turquoise vers bleu nuit, cercles de la marque */
.item-data.aw.aw-final { background: linear-gradient(115deg, #0E7C7B 0%, #13243A 100%); border-radius: 0; margin: 0; overflow: hidden; text-align: center; }
.item-data.aw.aw-final:before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -160px; background: linear-gradient(115deg, #FF6A62, #FF8E5D); opacity: .9; }
.item-data.aw.aw-final:after { width: 220px; height: 220px; left: -60px; right: auto; bottom: -110px; top: auto; border-radius: 50%; background: #17C2C0; opacity: .8; filter: none; animation: none; }
.item-data.aw.aw-final h2 { font-size: clamp(26px, 3vw, 36px); max-width: 24ch; margin-left: auto; margin-right: auto; }
.item-data.aw.aw-final p { margin-left: auto; margin-right: auto; color: #D6E6EA; }
.item-data.aw.aw-final .aw-actions { justify-content: center; }
.aw-final a.aw-btn, .aw-final a.aw-btn:visited { background: #fff; color: #13243A; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.aw-final a.aw-btn:hover { background: #fff; color: #13243A; }
.aw-final a.aw-lien-fort, .aw-final a.aw-lien-fort:visited, .aw-final a:not(.aw-btn) { color: #fff; }

@media screen and (max-width: 900px) {
    .item-data.aw.aw-accroche-page:after { width: 180px; height: 180px; right: -70px; top: -80px; }
}
.aw.aw-orange blockquote.aw-citation p:before, .aw.aw-orange blockquote.aw-citation p:after { color: #0E7C7B; }

.ch .ch-projets { row-gap: 24px; }
html.ch-js .ch .ch-apparait:nth-child(4) { transition-delay: 0s; } html.ch-js .ch .ch-apparait:nth-child(5) { transition-delay: .08s; } html.ch-js .ch .ch-apparait:nth-child(6) { transition-delay: .16s; }

/* Cartes de réalisations : capture pleine largeur en haut, texte avec marges */
.aw a.aw-carte { display: block; padding: 0 0 24px; background: #fff; overflow: hidden; text-decoration: none; }
.aw a.aw-carte .aw-vignette-cadre { border-radius: 0; margin: 0 0 18px; background: #F3F7F8; border-bottom: 1px solid #E3ECEE; }
.aw a.aw-carte .aw-vignette-cadre img.aw-vignette { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; padding: 0; max-width: none; }
.aw a.aw-carte > :not(.aw-vignette-cadre) { margin-left: 24px; margin-right: 24px; }
.aw a.aw-carte h3 { margin-top: 4px; margin-bottom: 8px; color: #13243A; }
.aw a.aw-carte p { font-size: 16px; margin-bottom: 0; }
.aw a.aw-carte p.aw-type { font-size: 14px; font-weight: 600; color: #0E7C7B; margin-bottom: 4px; }

/* Pied de page : mention « Propulsé par Assotools » */
footer .mentions .aw-propulse a { color: #5FE0DE; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
footer .mentions .aw-propulse a:hover { color: #fff; }

/* Bouton du menu : la dernière entrée (« Parler de votre projet ») devient le bouton,
   sans dépendre du script ni d'une classe ajoutée dans le CMS. */
@media screen and (min-width: 800px) {
    header nav > ul > li:last-child > a,
    header nav > ul > li:last-child > a:visited { background: var(--aw-corail); color: #fff; font-weight: 700; padding: 13px 20px; margin-left: 6px; border-radius: 999px; transition: background-color .2s, transform .2s; }
    header nav > ul > li:last-child > a:hover,
    header nav > ul > li:last-child > a:focus { background: var(--aw-encre); color: #fff; transform: translateY(-1px); }
}
@media screen and (max-width: 799px) {
    header nav > ul > li:last-child > a { background: var(--aw-corail); color: #fff; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { header nav > ul > li:last-child > a:hover { transform: none; } }

/* Gabarit du nouveau thème : les zones n'ont plus la classe « editable » du CMS,
   on reprend ses marges pour garder le même rendu (pied de page, logo). */
header .logo > a { display: block; }
footer .two-col > *, footer .four-col > * { margin-top: 0; margin-bottom: 1em; }
footer .two-col > :last-child, footer .four-col > :last-child { margin-bottom: 0; }

/* =====================================================================
   Bandeau des cookies (tarteaucitron) aux couleurs de la charte.
   Carte blanche flottante en bas de l'écran ; « Tout accepter » et
   « Tout refuser » ont le même poids visuel (recommandation CNIL).
   Les !important sont nécessaires : la feuille de tarteaucitron est
   chargée après celle du thème et utilise elle-même des !important.
   ===================================================================== */
#tarteaucitronRoot, #tarteaucitronRoot * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
/* le thème met les boutons en capitales avec une ombre intérieure claire : on les retire */
#tarteaucitronRoot button { text-transform: none !important; letter-spacing: 0 !important; }
#tarteaucitronRoot button { box-shadow: none !important; }

/* --- Bandeau ----------------------------------------------------------- */
#tarteaucitronRoot #tarteaucitronAlertBig {
    box-sizing: border-box !important;
    left: 50% !important; right: auto !important; bottom: 16px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important; max-width: 1080px !important;
    flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px 12px !important;
    padding: 18px 22px !important; margin: 0 !important;
    background: #fff !important; color: #13243A !important;
    border-radius: 20px !important; border-top: 5px solid #17C2C0 !important;
    box-shadow: 0 24px 60px -20px rgba(19,36,58,.45), 0 0 0 1px rgba(19,36,58,.06) !important;
    text-align: left !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    flex: 1 1 320px !important; margin: 0 8px 0 0 !important; padding: 0 !important;
    color: #13243A !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 500 !important; text-align: left !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-height: 44px !important; margin: 0 !important; padding: 0 20px !important;
    border-radius: 999px !important; border: 0 !important;
    font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
    cursor: pointer !important; transition: transform .2s, box-shadow .2s, background-color .2s !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross { display: none !important; }
/* Tout accepter et Tout refuser : même taille, même poids */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 { background: #13243A !important; color: #fff !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 { background: #13243A !important; color: #fff !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover { background: #0E7C7B !important; transform: translateY(-1px) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert { background: #fff !important; color: #13243A !important; box-shadow: inset 0 0 0 2px #E3ECEE !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover { box-shadow: inset 0 0 0 2px #17C2C0 !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    background: none !important; color: #0E7C7B !important; padding: 0 8px !important; min-height: 44px !important;
    font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig button:focus-visible { outline: 3px solid #17C2C0 !important; outline-offset: 2px !important; }

/* --- Panneau de personnalisation ------------------------------------ */
#tarteaucitronRoot #tarteaucitron { border-radius: 20px !important; overflow: hidden !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover { background: #13243A !important; border-color: #13243A !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo { background: #0E7C7B !important; color: #fff !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel { background: #13243A !important; color: #fff !important; border-radius: 10px 10px 0 0 !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny { border-radius: 999px !important; padding: 8px 16px !important; font-weight: 700 !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny { background: #fff !important; color: #13243A !important; border: 2px solid #E3ECEE !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronIsAllowed .tarteaucitronAllow { background: #0E7C7B !important; color: #fff !important; border-color: #0E7C7B !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronIsDenied .tarteaucitronDeny { background: #C8412E !important; color: #fff !important; border-color: #C8412E !important; }
#tarteaucitronRoot #tarteaucitron button:focus-visible { outline: 3px solid #17C2C0 !important; outline-offset: 2px !important; }

/* --- Petite icône pour rouvrir le panneau ---------------------------- */
#tarteaucitronIcon #tarteaucitronManager { border-radius: 14px !important; box-shadow: 0 10px 24px -12px rgba(19,36,58,.5) !important; }

@media screen and (max-width: 700px) {
    #tarteaucitronRoot #tarteaucitronAlertBig { bottom: 8px !important; width: calc(100% - 16px) !important; padding: 16px !important; }
    #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex-basis: 100% !important; margin: 0 0 4px !important; }
    #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
    #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 { flex: 1 1 40% !important; }
    #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert { flex: 1 1 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
    #tarteaucitronRoot #tarteaucitronAlertBig button:hover { transform: none !important; }
}

/* =====================================================================
   Composants du CMS dans les blocs .aw : liste d'actualités (item-gallery)
   et formulaire (node-form), aux couleurs de la charte.
   ===================================================================== */

/* --- Liste d'actualités (page Blog) ---------------------------------- */
.aw item-gallery { display: block; }
.aw .aw-liens-assotools:has(> item-gallery) { display: block; border-top: 0; }
.aw item-gallery .grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 !important; }
.aw item-gallery .grid > .item { width: auto !important; margin: 0 !important; padding: 0 !important; }
.aw item-gallery .item .content {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: inset 0 0 0 1px #E3ECEE; transition: transform .25s, box-shadow .25s;
}
.aw item-gallery .item .content:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(19,36,58,.35), inset 0 0 0 1px #E3ECEE; }
.aw item-gallery .item .image { margin: 0; }
.aw item-gallery .item .image a { display: block; }
.aw item-gallery .item .image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid #E3ECEE; }
/* la feuille de base force marge, retrait et largeur des zones des cartes : on les reprend en !important */
.aw item-gallery .item .content > .title { margin: 18px 24px 6px !important; padding: 0 !important; width: auto !important; }
.aw item-gallery .item .title h3 { margin: 0; font-size: 18px; line-height: 1.35; text-align: left; }
.aw item-gallery .item .title h3 a, .aw item-gallery .item .title h3 a:visited { color: #13243A; text-decoration: none; }
.aw item-gallery .item .content:hover .title h3 a { color: #0E7C7B; }
.aw item-gallery .item .content > .date { margin: 0 24px 8px !important; padding: 0 !important; width: auto !important; }
.aw item-gallery .item .date { font-size: 14px; font-weight: 600; color: #0E7C7B; }
.aw item-gallery .item .content > .text { margin: 0 24px !important; padding: 0 !important; width: auto !important; }
.aw item-gallery .item .text { font-size: 15px; line-height: 1.55; color: #4A5A6A; text-align: left !important; }
.aw item-gallery .item .content > .more { margin: auto 24px 24px !important; padding: 14px 0 0 !important; width: auto !important; text-align: left !important; }
.aw item-gallery .item .more a, .aw item-gallery .item .more a:visited {
    display: inline; background: none !important; box-shadow: none !important; padding: 0 !important;
    color: #0E7C7B; font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
@media screen and (max-width: 960px) { .aw item-gallery .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 600px) { .aw item-gallery .grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .aw item-gallery .item .content:hover { transform: none; } }

/* --- Formulaire (page Contact) ---------------------------------------- */
.aw node-form { display: block; font-family: var(--aw-police); }
.aw node-form .ui.form.grid { margin: 0; }
.aw node-form .ui.form.grid > .row { display: block; padding: 0; margin: 0 0 18px; }
.aw node-form .ui.form.grid > .row > .column { width: 100% !important; padding: 0 !important; }
.aw node-form .name.column { margin-bottom: 6px; }
.aw node-form .name.column span { font-weight: 600; font-size: 15px; color: #13243A; }
.aw node-form .name.column span.required:after { content: " *"; color: #C8412E; }
.aw node-form .ui.form .fields { margin-bottom: 10px; }
.aw node-form .ui.form .fields:last-child { margin-bottom: 0; }
.aw node-form .ui.form input[type="text"],
.aw node-form .ui.form textarea,
.aw node-form .ui.form .ui.selection.dropdown {
    font-family: var(--aw-police); font-size: 16px; color: #13243A;
    min-height: 48px; padding: 12px 14px; line-height: 1.4;
    border: 1px solid #B9C6C8; border-radius: 10px; background: #fff; box-shadow: none;
}
.aw node-form .ui.form .ui.selection.dropdown { display: flex; align-items: center; }
.aw node-form .ui.form .ui.selection.dropdown > .dropdown.icon { top: 50%; transform: translateY(-50%); padding: 0; margin: 0; right: 14px; }
.aw node-form .ui.form textarea { min-height: 160px; }
.aw node-form .ui.form input::placeholder, .aw node-form .ui.form textarea::placeholder,
.aw node-form .ui.form .ui.dropdown .default.text { color: #7C8A99; }
.aw node-form .ui.form input[type="text"]:focus,
.aw node-form .ui.form textarea:focus,
.aw node-form .ui.form .ui.selection.dropdown.active {
    border-color: #17C2C0; box-shadow: 0 0 0 3px rgba(23,194,192,.25); outline: 0;
}
.aw node-form .buttons { margin-top: 8px; text-align: left; }
.aw node-form .ui.primary.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; margin: 0;
    border-radius: 999px; background: linear-gradient(115deg, #FF6A62, #FF8E5D) !important; color: #fff !important;
    font-family: var(--aw-police); font-size: 16px; font-weight: 700; text-transform: none;
    box-shadow: 0 10px 24px -12px rgba(255,106,98,.8); transition: transform .2s, box-shadow .2s;
}
.aw node-form .ui.primary.button:hover, .aw node-form .ui.primary.button:focus { background: linear-gradient(115deg, #FF6A62, #FF8E5D) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(255,106,98,.9); }
.aw node-form .ui.primary.button:focus-visible { outline: 3px solid #17C2C0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .aw node-form .ui.primary.button:hover { transform: none; } }

/* =====================================================================
   Animations en CSS seul (sans le script du site)
   Utilisées tant que le script n'est pas chargé (pas de classe aw-js sur
   <html>) ; si le script est ajouté plus tard, il reprend la main.
   - Accroches des pages : arrivée douce du titre, du texte et de la photo.
   - Contenus : apparition au défilement (animation liée au défilement,
     Chrome, Edge et Safari récents ; ailleurs tout reste visible).
   - En-tête : ombre qui apparaît dès qu'on défile.
   On anime « translate » et non « transform » pour ne pas bloquer les
   effets de survol des cartes.
   ===================================================================== */
@keyframes aw-css-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes aw-css-revele { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes aw-css-ombre { from { box-shadow: 0 0 0 0 rgba(19,36,58,0); } to { box-shadow: 0 8px 24px -14px rgba(19,36,58,.45); } }

@media (prefers-reduced-motion: no-preference) {
    /* Accroches des pages intérieures (au chargement) */
    html:not(.aw-js) .aw-accroche-page h1,
    html:not(.aw-js) .aw-accroche-page .aw-intro,
    html:not(.aw-js) .aw-accroche-page .aw-actions,
    html:not(.aw-js) .aw-accroche-page .aw-petit { animation: aw-css-monte .6s cubic-bezier(.2,.7,.2,1) both; }
    html:not(.aw-js) .aw-accroche-page .aw-intro { animation-delay: .08s; }
    html:not(.aw-js) .aw-accroche-page .aw-actions,
    html:not(.aw-js) .aw-accroche-page .aw-petit { animation-delay: .16s; }
    html:not(.aw-js) .aw-accroche-page img.aw-photo-accroche { animation: aw-css-monte .7s .12s cubic-bezier(.2,.7,.2,1) both; }

    @supports (animation-timeline: view()) {
        html:not(.aw-js) :is(
            .aw h2, .aw .aw-intro, .aw-metier, .aw blockquote.aw-citation, .aw .aw-carte,
            .aw img.aw-photo, .aw ol.aw-etapes > li, .aw .aw-encadre, .aw details.aw-faq,
            .aw .aw-tuile, .aw .aw-fiche-produit, .aw .aw-fiche-a-venir, .aw .aw-chiffre,
            .aw .aw-cas, .aw item-gallery .item,
            .ch .ch-titre, .ch .ch-chapo, .ch .ch-porte, .ch .ch-apparait, .ch .ch-chiffres > div,
            .ch-final h2, .ch-final p, .ch-final .ch-btns
        ):not(.aw-accroche-page *, .ch-accroche *) {
            animation: aw-css-revele linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }
    }
    @supports (animation-timeline: scroll()) {
        html:not(.aw-js) body > header {
            animation: aw-css-ombre linear both;
            animation-timeline: scroll(root);
            animation-range: 0 120px;
        }
    }
}

/* Apparitions par le script : on anime « translate » (et non « transform »)
   pour que les effets de survol des cartes et des boutons restent actifs. */
html.aw-js .aw-a-reveler {
    transform: none;
    translate: 0 22px;
    transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--aw-delai, 0ms),
                translate .7s cubic-bezier(.2,.7,.2,1) var(--aw-delai, 0ms),
                transform .25s, box-shadow .25s;
}
html.aw-js .aw-a-reveler.aw-visible { translate: 0 0; transform: none; }
html.aw-js .aw a.aw-carte.aw-a-reveler.aw-visible:hover,
html.aw-js .aw .aw-tuile.aw-a-reveler.aw-visible:hover,
html.aw-js .ch .ch-porte.aw-a-reveler.aw-visible:hover { transform: translateY(-4px); }
html.ch-js .ch .ch-apparait { transform: none; translate: 0 18px; transition: opacity .5s ease, translate .5s cubic-bezier(.2,.7,.2,1), transform .25s, box-shadow .25s; }
html.ch-js .ch .ch-apparait.ch-vu { translate: 0 0; transform: none; }
html.ch-js .ch a.ch-projet.ch-apparait.ch-vu:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
    html.aw-js .aw-a-reveler, html.ch-js .ch .ch-apparait { opacity: 1; translate: 0 0; transition: none; }
}

/* Visuels du haut des pages Nos logiciels et Réalisations (captures dans des cadres de navigateur) */
.aw-accroche-page .aw-visuel-accroche { position: relative; }
.aw-accroche-page .aw-visuel-accroche .aw-navigateur { box-shadow: 0 24px 50px -26px rgba(19,36,58,.55), 0 0 0 1px rgba(19,36,58,.08); }
.aw-accroche-page .aw-visuel-accroche .aw-navigateur img { aspect-ratio: 16 / 10; }
.aw-accroche-page .aw-visuel-logiciel .aw-navigateur { transform: rotate(1.5deg); }
.aw-accroche-page .aw-pile { min-height: 410px; }
.aw-accroche-page .aw-pile .aw-navigateur { position: absolute; width: 74%; }
.aw-accroche-page .aw-pile .aw-navigateur:nth-child(1) { left: 0; top: 0; transform: rotate(-3deg); }
.aw-accroche-page .aw-pile .aw-navigateur:nth-child(2) { right: 0; top: 70px; z-index: 1; }
.aw-accroche-page .aw-pile .aw-navigateur:nth-child(3) { left: 8%; top: 150px; z-index: 2; transform: rotate(2deg); }
@media screen and (max-width: 960px) {
    .aw-accroche-page .aw-pile { min-height: 0; aspect-ratio: 4 / 3; max-width: 520px; }
    .aw-accroche-page .aw-pile .aw-navigateur { width: 72%; }
    .aw-accroche-page .aw-pile .aw-navigateur:nth-child(2) { top: 18%; }
    .aw-accroche-page .aw-pile .aw-navigateur:nth-child(3) { top: 38%; }
}
@media (prefers-reduced-motion: no-preference) {
    html:not(.aw-js) .aw-accroche-page .aw-visuel-accroche,
    html.aw-js .aw-accroche-page .aw-visuel-accroche { animation: aw-css-monte .7s .12s cubic-bezier(.2,.7,.2,1) both; }
}

/* Bandeau des cookies : la mise en page en ligne ne s'applique que lorsque le bandeau est affiché.
   Une fois fermé, tarteaucitron le masque (display: none) : il ne doit plus capter les clics
   en bas de la page. */
#tarteaucitronRoot #tarteaucitronAlertBig:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; }
#tarteaucitronRoot #tarteaucitronAlertBig[style*="display: none"],
#tarteaucitronRoot #tarteaucitronAlertBig[style*="display:none"] { display: none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig[style*="opacity: 0"] { pointer-events: none !important; }

/* Mentions légales : texte sur toute la largeur du contenu, comme les autres pages */
.aw.aw-mentions > div > div { max-width: none; }
.aw.aw-mentions h2 { max-width: none; margin-top: 40px; }
.aw.aw-mentions > div > div > h2:first-child { margin-top: 0; }
.aw.aw-mentions p, .aw.aw-mentions li { max-width: none; }
.aw.aw-mentions table.aw-table { margin-top: 8px; }

/* Citation en encadré (page RGPD) : sans le retrait par défaut du navigateur */
.aw blockquote.aw-encadre { margin: 8px 0 0; }
.aw blockquote.aw-encadre p { margin: 0; }

/* =====================================================================
   Actualités (gabarit « article » du CMS) et pages au modèle 0 :
   titre et texte aux couleurs de la nouvelle charte.
   ===================================================================== */
/* Titre de page : bandeau clair comme les accroches .aw, au lieu de l'ancienne photo */
main h1.main {
    position: relative; overflow: hidden; margin: 0;
    padding: 64px max(240px, calc((100% - 1160px) / 2 + 240px)) 48px max(24px, calc((100% - 1160px) / 2 + 24px));
    background: linear-gradient(180deg, #fff 0%, #EAF9F8 100%);
    color: #13243A; text-shadow: none; text-transform: none; text-align: left;
    font-family: var(--aw-police); font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15;
}
main h1.main:after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -120px; border-radius: 50%; background: #17C2C0; }
/* Une page qui a déjà son propre haut de page (.aw-accroche-page) : pas de second titre */
main .editable:has(.aw-accroche-page) > h1.main { display: none; }

/* Corps des articles : colonne de lecture alignée sur le contenu du site */
body.layout-808 main > .one-column:not(:first-child) { max-width: 1160px; margin: 0 auto; padding: 0 24px; text-align: left; }
body.layout-808 main > .one-column:not(:first-child) > .editable { max-width: 760px; }
body.layout-808 main > .one-column:last-child { padding-bottom: 80px; }
body.layout-808 main > .one-column.centered > .editable { display: block; width: 100%; margin: 0; }
body.layout-808 main .item-data.type-file { margin: 40px 0 8px; }
body.layout-808 main .item-data.type-file, body.layout-808 main .item-data.type-file > div { width: auto !important; max-width: 760px; margin-left: 0; text-align: left; }
body.layout-808 main .item-data.type-file img { display: block; width: auto !important; max-width: 100% !important; height: auto; border-radius: 24px; box-shadow: 0 18px 40px -24px rgba(19,36,58,.35); margin: 0; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable > h2 { font-family: var(--aw-police); font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: #13243A; text-transform: none; margin: 40px 0 12px; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable > h3 { font-family: var(--aw-police); font-size: 20px; font-weight: 700; line-height: 1.3; color: #13243A; text-transform: none; margin: 32px 0 8px; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable > :is(p, ul, ol) { font-size: 17px; line-height: 1.7; color: #4A5A6A; margin: 0 0 16px; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable > :is(ul, ol) { padding-left: 0; list-style: none; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable li { position: relative; padding-left: 22px; margin: 6px 0; font-size: 17px; line-height: 1.6; color: #4A5A6A; }
body.layout-808 main .item-data.type-html:not(.aw) > div > .one-column > .editable li:before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 3px; background: #17C2C0; }
body.layout-808 main .item-data.type-html:not(.aw) a { color: #0E7C7B; text-decoration: underline; text-underline-offset: 3px; }
body.layout-808 main .item-data.type-html:not(.aw) a:hover { color: #13243A; }
@media screen and (max-width: 900px) { main h1.main { padding: 40px 24px 32px; } main h1.main:after { width: 180px; height: 180px; right: -70px; top: -80px; } }