@font-face {
      font-family: 'Marianne';
      src: url("./fontes_web/Marianne-Regular.woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Marianne';
      src: url("./fontes_web/Marianne-Bold.woff2");
      font-weight: 700;
      font-display: swap;
    }

    :root{
      --color-primary: #007A33;
      --color-primary-dark: #005F28;
      --color-bg: #FFFFFF;
      --color-muted: #6B6B6B;
      --color-bandeau: #F2F2F2;
      --color-line: #7a7879;
      --color-footer-natfra: #c4e4b5;
      --color-footer-inpn: #bde7e3;
      --color-footer-biom: #e3dff0;
	  
      /* --accent-inpn: #49AEBA;
      --accent-biom: #7b6ab3; */
	  
      --vert-inpn: #B1AA2D;
      --bleu-inpn: #49AEBA;
      --jaune-inpn: #E1BA57;
      --noir: #000000;

      --container-max: 1200px;

      --gutter: 24px;
      --base-line-height: 1.5;

      --h1-size: 64px;
      --h2-size: 32px;
      --p-size: 18px;
      --small-italic: 14px;
      --footer-text: 16px;
    }

    /* Reset simple */
    *{box-sizing: border-box}
    html,body{height:100%; width:100%; overflow-x:hidden;}
    body{
      margin:0;
      padding:0;
      font-family: 'Marianne', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--color-bg);
      color:#000;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:var(--base-line-height);
    }


    a{color:var(--noir); text-decoration:none}
    /* a{color:var(--vert-inpn); text-decoration:none} */
    a:hover{text-decoration:underline}

	.site-container{
      max-width:var(--container-max);
      margin:0 auto;
        flex-grow: 1;
    }

    .header-container{
        max-width:var(--container-max);
        margin:0 auto;
        flex-grow: 0;
    }

    .wrapper{
        box-sizing: border-box;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Header */
    header.site-header{
      height:120px;
      display:flex;
      align-items:center;
      border-bottom:1px solid #E0E0E0;
      box-shadow: 0px 5px 10px #00000029;
      background:var(--color-bg);
    }
    header .logo{max-width:240px}
    header img{max-width:100%; height:auto; display:block}

    /* Main banner */
    .alert-banner {
        max-width: 1600px;
        margin: 40px auto;
        display: flex;
        gap: 40px;
        border-bottom: 3px solid var(--color-line);
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .alert-icon-box {
        background-color: var(--color-bandeau);
        width: 140px;
        min-height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .alert-icon-box img.icon {
        width: 140px;
        height: auto;
    }

    .alert-banner .icon {
            width: 128px;
            height: 128px;
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .alert-content h1 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size:var(--h1-size);
        font-weight: 700;
    }

    .alert-content p {
        text-align: justify;
        line-height: 1.5;
        margin-bottom: 16px;
        font-size: var(--p-size);
    }

    .alert-content .meta {
        margin-top: 12px;
        font-size: var(--small-italic);
        font-style:italic;
        text-align: right;
        color: var(--color-muted);
    }

    /* Logos services */
    .logos-grid{display:flex; flex-wrap:wrap; gap:24px; justify-content:center; margin:32px 0}
    .logos-grid .logo-item{flex:0 0 calc(20% - 24px); max-width:160px; display:flex; align-items:center; justify-content:center}
    .logos-grid img{max-width:100%; height:auto}
	
    /* Platforms */
    .platforms{margin:48px 0}
    .platforms h2{font-size:var(--h2-size); color:var(--color-dark); margin-bottom:16px}
    .platforms .lead{font-size:var(--p-size); font-weight:700; margin-bottom:16px}
    .platforms .list{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
    .platforms a{display:block; color:var(--color-dark); font-size:var(--p-size)}

    /* 
    .platforms .list{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; align-items: start;}
    
    .platforms-inpn a, .region-compound-inpn.theme-inpn {
        border-left: 4px solid var(--accent-inpn);
    }
    .region-compound-inpn.theme-inpn .region-parent::after {
        color: var(--accent-inpn);
    }
    .region-compound-inpn.theme-inpn .region-submenu {
        border-left: 2px solid var(--accent-inpn);
    }
    .region-compound-inpn.theme-inpn .region-submenu a {
        color: var(--accent-inpn);
    }
    .region-compound-inpn.theme-inpn .region-submenu a:hover {
        background: var(--accent-inpn);
        color: white;
    }

    .platforms-biom a, .region-compound-inpn.theme-biom {
        border-left: 4px solid var(--accent-biom);
    }
    .region-compound-inpn.theme-biom .region-parent::after {
        color: var(--accent-biom);
    }
    .region-compound-inpn.theme-biom .region-submenu {
        border-left: 2px solid var(--accent-biom);
    }
    .region-compound-inpn.theme-biom .region-submenu a {
        color: var(--accent-biom);
    }
    .region-compound-inpn.theme-biom .region-submenu a:hover {
        background: var(--accent-biom);
        color: white;
    }

    .platforms-biom a:hover span, .platforms-inpn a:hover span, .platforms a.link-arrow-right:hover span {
        border-bottom: 1px solid currentColor;
    }

    .platforms-inpn a:hover, .platforms-inpn a.link-arrow-right:hover, .platforms-inpn .region-compound-inpn:hover {
        background: #f0f0f0;
    }
    .platforms-biom a:hover, .platforms-biom a.link-arrow-right:hover, .platforms-biom .region-compound-inpn:hover {
        background: #f0f0f0;
    }

    .platforms a{
        display:block;
        color:var(--noir);
        font-size:var(--p-size);
        padding: 16px 20px;
        background: #f8f8f8;
        border-radius: 8px;
        transition: all 0.2s ease;
        text-decoration: none;
        min-height: 56px;
        box-sizing: border-box;
    }
    .platforms a:hover{
        transform: translateX(4px);
        text-decoration: none;
    }

    @media (hover: none) {
        .platforms a:hover {
            background: #f8f8f8 !important;
            color: var(--noir) !important;
            transform: none !important;
        }

        .region-compound-inpn:hover {
            background: #f8f8f8 !important;
        }

        .platforms a:active, .region-compound-inpn:active {
            background: #f0f0f0 !important;
            color: var(--noir) !important;
        }

        .platforms-inpn .region-submenu a:active,
        .platforms-inpn .region-submenu a:hover {
            background: var(--accent-inpn) !important;
            color: white !important;
        }
        .platforms-biom .region-submenu a:active,
        .platforms-biom .region-submenu a:hover {
            background: var(--accent-biom) !important;
            color: white !important;
        }

        a, .region-compound-inpn, .region-parent {
            -webkit-tap-highlight-color: transparent;
        }
    }
    */

    /* Region with submenu (dropdown) */
    /* Keep the composed region + sub-links on a single line */
    .region-compound-inpn{
        white-space: nowrap;
        font-size: var(--p-size);
    }

    .region-compound-inpn a {
        display: inline; /* important pour rester sur la même ligne */
    }

    /* 
    .region-compound-inpn{
        position: relative;
        font-size: var(--p-size);
        padding: 16px 20px;
        background: #f8f8f8;
        border-radius: 8px;
        transition: background 0.2s ease;
        cursor: pointer;
        min-height: 56px;
        box-sizing: border-box;
        align-self: start;
    }

    .region-parent {
        display: block;
        font-weight: 500;
    }

    .region-parent::after {
        content: " ▼";
        font-size: 12px;
        margin-left: 8px;
        color: var(--bleu-inpn);
    }

    .region-submenu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 0;
        padding-left: 20px;
        border-left: 2px solid var(--bleu-inpn);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .region-compound-inpn:hover .region-submenu {
            max-height: 500px;
            opacity: 1;
            margin-top: 12px;
        }
    }

    .region-submenu a {
        color: var(--bleu-inpn);
        font-weight: 500;
        font-size: calc(var(--p-size) - 2px);
        text-decoration: none;
        padding: 8px 12px;
        background: white;
        border-radius: 4px;
        transition: all 0.2s ease;
        border: none;
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    .region-submenu a:hover {
        background: var(--accent-inpn);
        color: white;
        transform: translateX(4px);
    }
    */

	.link-arrow-right span::after {
		content: "";
		display: inline-block;
		width: 1rem;
		height: 1rem;
		background-image: url("Image_maquettes/arrow-right-line.svg");
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: 0.25rem;
		vertical-align: middle;
	}

	/* To have the underline for the all div */
	.link-arrow-right{
		text-decoration: none !important;
	}
	.link-arrow-right:hover span {
		border-bottom: 1px solid currentColor;
	}
	
	
	    /* FAQ */
    .faq{margin:48px 0; }
    .faq h2{font-size:var(--h2-size); color:var(--color-dark); margin-bottom:16px}
    /* .faq p{font-size:var(--p-size); color:var(--color-dark);margin:0 auto; max-width:900px} */

    .faq-bold {
        font-weight:Bold;
        display: flex;
        margin-top: 20px;
    }

    /* Footer */
        .footer {
        background-color: var(--color-footer);
        padding: 32px 0;
        box-sizing: border-box;
        }

        .footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 80px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 40px;
        box-sizing: border-box;
        }

        .footer-left {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: center;
        justify-content: center;
        flex: 1 1 500px;
        }

        .footer-left img {
        height: 60px;
        width: auto;
        flex-shrink: 0;
        }

        .footer-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        text-align: left;
        flex: 1 1 300px;
        justify-content: center;
        }

        .footer-right .logo-patrinat {
        height: 60px;
        width: auto;
        }

        .footer-right p {
        font-size: 16px;
        color: var(--noir, #000);
        margin: 0;
        line-height: 1.4;
        }

    /* Utility */
    .muted{color:var(--color-muted)}
    .visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
	
    .label {
        flex: 1;
        line-height: 1.4;
        margin-right: 20px;
    }
	
	/* Rescue INPN */
    /* Two-column rescue section */
    .rescue-inpn{
        display:grid;
        grid-template-columns: 65% 35%;
        align-items: flex-start;
        padding: 20px 0;
        gap: 20px;
        text-align: justify;
        font-size: var(--p-size);
    }
	
    .rescue-inpn .rescue-inpn-image img{max-width:420px; width:100%; height:auto; display:block}
    .rescue-inpn h2{font-size:var(--h2-size); margin:0 0 16px 0; color:var(--color-dark); font-weight:700}
    .rescue-inpn p{font-size:var(--p-size); margin:0 0 8px 0}
	.rescue-inpn a{font-size:var(--p-size) ;color:var(--color-dark); margin:0 0 8px 0}

    .rescue-inpn-bold {
        font-weight:Bold;
        display: flex;
        margin-top: 40px;
    }
	
	.rescue-inpn-text h2 {
        font-size: var(--h2-size);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
    }

    .rescue-inpn-text p {
        font-size: var(--p-size);
        line-height: 1.5;
        width: 90%;
    }

    .rescue-inpn-text li{
        list-style: none;
    }

    .rescue-inpn-text li::before{
        content: "-";
        margin-right: 10px;
        font-weight: 600;
    }

    .rescue-inpn-items {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rescue-inpn-items li {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        font-size: var(--p-size);
        font-weight: 600;
        width: 80%;
    }

    .rescue-inpn-items li::before {
        content: "-";
        margin-right: 10px;
        font-weight: 600;
    }

    .rescue-inpn-items-2 {
        margin-top: 20px;
    }




	
	/* Rescue Natfra */
    .rescue-natfra{
        display:grid;
        grid-template-columns: 65% 35%;
        align-items:center;
        margin:48px 0;
        padding:40px 0;
        text-align: justify;
    }

    .rescue-natfra .rescue-natfra-image img{max-width:420px; width:100%; height:auto; display:block; margin-left:auto}
    .rescue-natfra p{font-size:var(--p-size); margin:0 0 8px 0}

    .rescue-natfra-text h2 {
        font-size: var(--h2-size);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0;
    }

    .rescue-natfra-text p {
        font-size: var(--p-size);
        line-height: 1.5;
        width: 90%;
    }

    .rescue-natfra-items {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rescue-natfra-items li {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        font-size: var(--p-size);
        font-weight: 600;
        width: 80%;
    }

    .rescue-natfra-items li::before {
        content: "-";
        margin-right: 10px;
        font-weight: 600;
    }	

	/* Rescue Biom */
    .rescue-biom{
        display:grid;
        grid-template-columns: 65% 35%;
        align-items:center;
        margin:48px 0;
        padding:40px 0;
        text-align: justify;
    }

    .rescue-biom .rescue-biom-image img{max-width:420px; width:100%; height:auto; display:block; margin-left:auto}
    .rescue-biom p{font-size:var(--p-size); margin:0 0 8px 0}

    .rescue-biom-text h2 {
        font-size: var(--h2-size);
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 20px 0 0;
    }

    .rescue-biom-text p {
        font-size: var(--p-size);
        line-height: 1.5;
        width: 90%;
    }

    .rescue-biom-items {
        list-style: none;
        padding: 0;
        margin-top: 40px;
    }

    .rescue-biom-items .rescue-biom-li {
        display: flex;
        align-items: center;
        margin-top: 40px;
        font-size: var(--p-size);
        font-weight: 600;
    }

    .rescue-biom-items .rescue-biom-li::before {
        content: "-";
        margin-right: 10px;
        font-weight: 600;
    }

    .rescue-biom-items .rescue-biom-sub-li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
        font-size: var(--p-size);
        list-style: none;
        margin-top: 15px;
    }
	
	    /* Responsive */
	@media (max-width:1400px){
        header img{
            max-width:170px;
        }
    }
	@media (max-width:1200px){
      .site-container{padding:32px 40px}
      header.site-header{height:100px}
    }
    @media (max-width:900px){
      :root{--h1-size:44px; --h2-size:24px; --p-size:16px}
      .rescue-inpn{grid-template-columns:1fr; gap: 40px;}
	  .rescue-natfra{grid-template-columns:1fr; gap: 40px;}
	  .rescue-biom{grid-template-columns:1fr; gap: 40px;}
      .rescue-inpn-image, .rescue-natfra-image, .rescue-biom-image {
        display: flex;
        justify-content: center;
      }
      .rescue-inpn .rescue-inpn-image img, 
      .rescue-natfra .rescue-natfra-image img, 
      .rescue-biom .rescue-biom-image img {
        margin: 0 auto;
      }
      .alert-banner{flex-direction:column; padding:40px}
      .alert-banner .icon{margin-bottom:12px}
      .logos-grid .logo-item{flex:0 0 calc(33.333% - 24px)}
      .platforms .list{grid-template-columns:1fr}
      .site-container{padding:24px}
      .alert-icon-box {width: 100%; min-height: 120px;}
      .footer-inner {
        padding: 0 40px;
      }
      .footer-right {
        text-align: center;
        flex-direction: column;
      }
    }
    /* 
    Mobile: submenu toggle on click via .active class 
    .region-compound-inpn.active .region-submenu {
        max-height: 500px !important;
        opacity: 1 !important;
        margin-top: 12px !important;
    }
    */

    @media (max-width:480px){
      :root{--h1-size:34px; --h2-size:20px; --p-size:15px}
      header.site-header{height:80px}
      .logos-grid .logo-item{flex:0 0 calc(50% - 16px)}
      .footer-inner{
        padding:0 24px;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .footer-right{
        flex-direction: column;
        text-align: center;
        gap: 16px;
        flex: 1 1 auto;
      }
      .footer-left {
        flex: 1 1 auto;
      }
	.rescue-biom-items .rescue-biom-sub-li {
        gap: 10px;
        font-size: 12px;
		}
    }